rails ckeditor不使用turbolinks

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了rails ckeditor不使用turbolinks相关的知识,希望对你有一定的参考价值。

我刚刚在我目前使用的rails应用程序和turbolinks中安装了ckeditor gem。我根据https://github.com/galetahub/ckeditor的说明安装了宝石。安装后的应用程序没有在帖子#new中呈现ckeditor,我认为它与turbolinks有关。关于如何解决的任何想法?

application.html.erb中的以下内容似乎是罪魁祸首

            <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>

的Gemfile

            gem 'turbolinks'
            gem 'ckeditor', '4.1.3'

的application.js

            //= require jquery
            //= require jquery.turbolinks 
            //= require jquery.validate
            //= require jquery_ujs
            //= require ckeditor/init
            //= require ckeditor/config
            //= require maps
            //= require map_theme/vendor/modernizr.custom
            //= require map_theme/vendor/matchMedia
            //= require map_theme/vendor/bootstrap
            //= require map_theme/vendor/jquery.storageapi
            //= require map_theme/vendor/jquery.easing
            //= require map_theme/vendor/animo
            //= require map_theme/vendor/jquery.slimscroll.min
            //= require map_theme/vendor/screenfull
            //= require bootstrap-datepicker/core
            //= require map_theme/demo/demo-rtl
            //= require map_theme/vendor/index
            //= require map_theme/vendor/jquery.classyloader.min
            //= require map_theme/vendor/moment-with-locales.min
            //= require map_theme/app
            //= require reports
            //= require users
            //= require turbolinks

application.html.erb

              <head>
                <script src="https://use.typekit.net/yzs0vln.js"></script>
                <script>
                  try{Typekit.load({ async: true });}catch(e){}
                </script>
                <meta charset="utf-8">
                <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
                <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
                <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
                <%= javascript_include_tag "https://js.stripe.com/v3/" %>
                <%= csrf_meta_tags %>
              </head>

发布表格

            <div class="panel-body text-md">    
                <%= form_for @post, html: { multipart: true } do |f| %>

                        <div class="field form-group">
                            <%= f.label :image %> <br>
                            <%= f.file_field :image %> 
                        </div>

                        <div class="field form-group">
                            <%= f.label :title %> <br>
                            <%= f.text_field :title, class: 'form-control'  %> 
                        </div>


                        <div class="field form-group">
                            <%= f.label :body %> <br>
                            <%= f.cktext_area :body, class: 'form-control'  %> 
                        </div>



                        <div class="field form-group">
                            <%= f.label :youtube_id %> <br>
                            <%= f.text_field :youtube_id, class: 'form-control' %> 
                        </div>

                        <div class="field form-group">
                            <%= f.submit  class: "btn btn-inverse btn-md"%> <br>
                        </div>  

                    <% end %>
            </div>  

config.js

            CKEDITOR.editorConfig = function( config ) {
              config.language = 'en';
              config.uiColor = '#ffffff';
              /* Filebrowser routes */
              // The location of an external file browser, that should be launched when "Browse Server" button is pressed.
              config.filebrowserBrowseUrl = "/ckeditor/attachment_files";
              // The location of an external file browser, that should be launched when "Browse Server" button is pressed in the Flash dialog.
              config.filebrowserFlashBrowseUrl = "/ckeditor/attachment_files";
              // The location of a script that handles file uploads in the Flash dialog.
              config.filebrowserFlashUploadUrl = "/ckeditor/attachment_files";
              // The location of an external file browser, that should be launched when "Browse Server" button is pressed in the Link tab of Image dialog.
              config.filebrowserImageBrowseLinkUrl = "/ckeditor/pictures";
              // The location of an external file browser, that should be launched when "Browse Server" button is pressed in the Image dialog.
              config.filebrowserImageBrowseUrl = "/ckeditor/pictures";
              // The location of a script that handles file uploads in the Image dialog.
              config.filebrowserImageUploadUrl = "/ckeditor/pictures?";
              // The location of a script that handles file uploads.
              config.filebrowserUploadUrl = "/ckeditor/attachment_files";
              config.allowedContent = true;
              // Toolbar groups configuration.
              config.toolbar = [
                { name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Source'] },
                { name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
                // { name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ], items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] },
                // { name: 'forms', items: [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
                { name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
                { name: 'insert', items: [ 'Image', 'Flash', 'Table', 'HorizontalRule', 'SpecialChar' ] },
                { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ] },
                '/',
                { name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] },
                { name: 'colors', items: [ 'TextColor', 'BGColor' ] },
                { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] }
              ];
              config.toolbar_mini = [
                { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ] },
                { name: 'styles', items: [ 'Font', 'FontSize' ] },
                { name: 'colors', items: [ 'TextColor', 'BGColor' ] },
                { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
                { name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule', 'SpecialChar' ] }
              ];
            };
答案

我解决了我的问题,它与自定义CSS而不是turbolinks有关。我有一个用于youtube视频的iframe包装器与CKEDITOR的iframe冲突。只需将id重命名为you_tube即可避免冲突。

以上是关于rails ckeditor不使用turbolinks的主要内容,如果未能解决你的问题,请参考以下文章

ckeditor-rails 和回形针无法正常工作

使用Cloudinary,Carrierwave,Ckeditor和Rails Admin时出现问题

将Ckeditor值绑定到angularjs和rails中的模型文本

CKEditor的第二个实例没有保存到db | Ruby on Rails

无法从CKEditor中删除magicline

试图将占位符添加到CKeditor 4,但没有任何运气