Rails - 当我第一次加载页面时,Froala 编辑器插件没有加载,我该如何在初始化编辑器之前加载插件?
Rails - Froala editor plugins aren't loading when I first load the page, how do I load the plugins before initializing the editor?
我的 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']
});
希望这对你有用。
据我估计,您在初始加载页面时遇到 jQuery 加载问题。请确保您有
Gemfile
gem 'wysiwyg-rails'
gem 'jquery-rails'
application.js
//= require jquery
确保要求 jQuery 在 //= require_tree .
之前,所有插件都必须在树之前。以下是我的完整要求列表,它完全有效。
//
//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require twitter/bootstrap
//= require froala_editor.min.js
//= require plugins/align.min.js
//= require plugins/char_counter.min.js
//= require plugins/code_beautifier.min.js
//= require plugins/code_view.min.js
//= require plugins/colors.min.js
//= require plugins/entities.min.js
//= require plugins/font_family.min.js
//= require plugins/font_size.min.js
//= require plugins/fullscreen.min.js
//= require plugins/image.min.js
//= require plugins/image_manager.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/save.min.js
//= require plugins/table.min.js
//= require plugins/url.min.js
//= require turbolinks
//= require_tree .
对于遇到同样问题的任何其他人,是 turbolinks 导致的。我禁用了 turbolinks,问题就解决了。
我的 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']
});
希望这对你有用。
据我估计,您在初始加载页面时遇到 jQuery 加载问题。请确保您有
Gemfile
gem 'wysiwyg-rails'
gem 'jquery-rails'
application.js
//= require jquery
确保要求 jQuery 在 //= require_tree .
之前,所有插件都必须在树之前。以下是我的完整要求列表,它完全有效。
//
//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require twitter/bootstrap
//= require froala_editor.min.js
//= require plugins/align.min.js
//= require plugins/char_counter.min.js
//= require plugins/code_beautifier.min.js
//= require plugins/code_view.min.js
//= require plugins/colors.min.js
//= require plugins/entities.min.js
//= require plugins/font_family.min.js
//= require plugins/font_size.min.js
//= require plugins/fullscreen.min.js
//= require plugins/image.min.js
//= require plugins/image_manager.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/save.min.js
//= require plugins/table.min.js
//= require plugins/url.min.js
//= require turbolinks
//= require_tree .
对于遇到同样问题的任何其他人,是 turbolinks 导致的。我禁用了 turbolinks,问题就解决了。