rails ckeditor not working with turbolinks



我刚刚在当前正在使用和turbolinks的Rails应用程序中安装了Ckeditor GEM。我根据说明安装了宝石,https://github.com/galetahub/ckeditor。在安装后,应用程序并未在post#new中渲染ckeditor,我认为它与涡轮链接有关。关于如何解决的任何想法?

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

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

gemfile

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

申请人

            //= 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而非涡轮链接有关。我有一个YouTube视频的iframe包装器,与Ckeditor的iFrame相抵触。简单地将ID重命名为you_tube即可避免冲突。

最新更新