ruby-on-rails – Rails – 我第一次加载页面时没有加载Froala编辑器插件,如何在初始化编辑器之前加载插件？

2024年1月2日 278次阅读

我在我的rails 4.2应用程序上安装了froala编辑器.我没有使用gem,因为我在工具栏中添加了额外的自定义按钮.我在/ public / froala中有所有froala文件(知道它不是最佳实践,但它仍然很容易以这种方式更新,这是我可以让自定义按钮工作的唯一方法).

我已经设置了工具栏默认值

jQuery ->
          $('#edit').froalaEditor({
            toolbarButtons: ['fullscreen', 'bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'fontFamily', 'fontSize', '|', 'color', 'emoticons', 'inlineStyle', 'paragraphStyle', '|', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', '-', 'insertLink', 'insertImage', 'insertVideo', 'insertTable', '|', 'quote', 'insertHR', 'undo', 'redo', 'clearFormatting', 'selectAll', 'html'],
            imageResizeWithPercent: true,
            imageDefaultWidth: 70,
            imageInsertButtons: ['imageByURL']

但我有一个问题.当我加载页面时,工具栏没有显示正确的按钮,只有在我刷新页面后,我设置的按钮才会显示.我问他们的支持并向他们展示了一个视频,他们告诉我,当我第一次加载页面时,我没有加载插件.他们说要确保在初始化编辑器之前加载插件.

我该怎么做呢？

最佳答案 在你的Gemfile中

gem 'wysiwyg-rails'

在application.css中

/*
 *= require froala_editor.min.css
 *= require froala_style.min.css
 *= require font-awesome
 *= require plugins/code_view.min.css
 *= require plugins/draggable.min.css
 *= require plugins/file.min.css
 *= require plugins/table.min.css
 *= require plugins/video.min.css
 *= require plugins/colors.min.css
 *= require plugins/image.min.css
 *= require plugins/image_manager.min.css
 *= require plugins/line_breaker.min.css
 *= require plugins/quick_insert.min.css
*/

在application.js中

//= require froala_editor.min.js
//= require plugins/align.min.js
//= require plugins/code_beautifier.min.js
//= require plugins/code_view.min.js
//= require plugins/draggable.min.js
//= require plugins/entities.min.js
//= require plugins/file.min.js
//= require plugins/font_size.min.js
//= require plugins/font_family.min.js
//= require plugins/image.min.js
//= require plugins/image_manager.min.js
//= require plugins/inline_style.min.js
//= require plugins/line_breaker.min.js
//= require plugins/link.min.js
//= require plugins/lists.min.js
//= require plugins/paragraph_format.min.js
//= require plugins/paragraph_style.min.js
//= require plugins/quick_insert.min.js
//= require plugins/table.min.js
//= require plugins/video.min.js
//= require plugins/colors.min.js
//= require plugins/quote.min.js

然后尝试你的代码

$('#edit').froalaEditor({
            toolbarButtons: ['fullscreen', 'bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'fontFamily', 'fontSize', '|', 'color', 'emoticons', 'inlineStyle', 'paragraphStyle', '|', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', '-', 'insertLink', 'insertImage', 'insertVideo', 'insertTable', '|', 'quote', 'insertHR', 'undo', 'redo', 'clearFormatting', 'selectAll', 'html'],
            imageResizeWithPercent: true,
            imageDefaultWidth: 70,
            imageInsertButtons: ['imageByURL']
});

希望这对你有用.

点赞