В настоящее время я сталкиваюсь с проблемой, когда пытаюсь настроить редактор текста действий в рельсах 7.1.3 для обработки встроенных видео YouTube.
В настоящее время работают рельсы 7.1.3, Ruby 3.2.0 и используются карты импорта.
(По превосходному примеру Криса Оливера https://thewikihow.com/video_2iGBuLQ3S0c Письменное руководство есть здесь - https://dev.to/superails/ruby-on-rails-embed-youtube-videos-with-actiontext-tldr-3m35)
Я получаю эту ошибку: Uncaught SyntaxError: запрошенный модуль «trix» не обеспечивает экспорт с именем «default» (в youtube.js:1:8). Ошибка понятна, но как ее исправить я не знаю.
В моем файле youtube.js я импортирую трикс вот так.
import Trix from "trix"
import Rails from "@rails/ujs"
let lang = Trix.config.lang;
Trix.config.toolbar = {
getDefaultHTML: function() {
return `
<div class = "trix-button-row">
.....
Я безуспешно пытался изменить его на
import * as Trix from "trix"
Когда я заглядываю в trix.js, я вижу экспорт:
export{Wn as default};
Мой файл importmap.rb выглядит так:
pin "application"
pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "@hotwired/stimulus", to: "stimulus.min.js"
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js"
pin_all_from "app/javascript/controllers", under: "controllers"
pin "@rails/actiontext", to: "actiontext.esm.js"
pin "@rails/ujs", to: "@rails--ujs.js" # @7.1.3
pin "trix" # @2.0.10
Кто-нибудь сталкивался с этой проблемой раньше? А может быть, нашли решение?
pin "trix"
ссылки на сборку UMD, которая не имеет экспорта, а только предоставляет Trix глобально. Это значит, что import "trix"
— это все, что вам нужно. Эта сборка также предназначена для работы с простыми звездочками:
https://github.com/rails/rails/blob/main/actiontext/app/assets/javascripts/trix.js
С другой стороны, сборка ESM имеет экспорт по умолчанию:
https://cdn.jsdelivr.net/npm/[email protected]/dist/trix.esm.js
>> Rails.application.assets.find_asset("trix").filename
=> "/home/alex/.rbenv/versions/3.3.0/lib/ruby/gems/3.3.0/gems/actiontext-7.1.3/app/assets/javascripts/trix.js"
Если вы закрепили trix
отдельно в своем каталоге поставщика (это будет сборка esm), это ничего не изменит, потому что поставщик находится в конце путей к ресурсам:
>> Rails.application.assets.paths
=>
["/home/alex/code/stackoverflow/app/assets/builds",
"/home/alex/code/stackoverflow/app/assets/config",
...
"/home/alex/.rbenv/versions/3.3.0/lib/ruby/gems/3.3.0/gems/actiontext-7.1.3/app/assets/javascripts",
...
"/home/alex/code/stackoverflow/vendor/javascript"] # <= gets searched last
Это лучшее, что я мог придумать, чтобы исправить порядок:
# config/initializers/assets.rb
Rails.application.config.after_initialize do |app|
# https://github.com/rails/sprockets/blob/v4.2.1/lib/sprockets/paths.rb#L37
app.assets.prepend_path Rails.root.join("vendor/javascript")
end
>> Rails.application.assets.find_asset("trix").filename
=> "/home/alex/code/stackoverflow/vendor/javascript/trix.js"
Изменение вашего PIN-кода на URL-адрес jspm также может исправить это, однако PIN-коды URL-адреса больше не используются по умолчанию в importmap-rails v2
, поэтому это операция копирования и вставки вручную:
# config/importmap.rb
pin "trix", to: "https://ga.jspm.io/npm:[email protected]/dist/trix.esm.min.js"
да, import "trix";
тогда у вас будет глобальный Trix
, который вы сможете изменить. последний раз, когда я проверял, это был единственный подход.
Спасибо! Я не уверен, как изменить его в файле js, если Trix недоступен. ``` import "trix" import Rails from "@rails/ujs" let lang = Trix.config.lang; Trix.config.toolbar = { getDefaultHTML: function() { return ` <div class = "trix-button-row"> <span class = "trix-button-group trix-button-group--text-tools" data- trix-button-group = "text-tools"> ..... ``` Панель инструментов Trix.config.toolbar недоступна, когда я просто импортирую "trix";
вы имеете в виду, что ваш редактор говорит вам, что это недоступно? это глобальная константа, поэтому она доступна везде. У меня отлично работает со сборками umd или esm. вы также можете: pin "trix", to: "https://ga.jspm.io/npm:[email protected]/dist/trix.esm.min.js"
использовать import Trix from "trix"
Ах, теперь я понял. Спасибо! :) Это работает, когда я прикрепляю его к ga.jspm.io... Однако я получаю новую ошибку: Uncaught TypeError: невозможно назначить свойство «панель инструментов» только для чтения объекта «[object Object]»
попробуй Trix.config.toolbar.getDefaultHTML = function () {
Большое спасибо за ваш ответ! Кажется, я изо всех сил пытаюсь понять, как лучше всего расширить или отредактировать функциональность actiontext/trix? Я пытаюсь добавить возможность встраивания YouTube, но, думаю, мне нужно импортировать trix.js в файл javascript, а затем отредактировать или расширить его? Или я использую здесь неправильный подход?