我需要重新加载我的页面以显示CKEDITOR

Question

我已经在我的项目上使用了CKEDITOR 4和两个自制插件，从1个月开始，一切都很好。

我试着按照我上一个插件的模板来做第三个插件，他自己的插件工作得很好。

问题是，当我第二次转到索引视图，然后转到ckeditor字段所在的New视图时。只有CKEDITOR字段不再出现，除非重新加载页面。如果我出去又回来，CKEDITOR将不会出现，直到我重新加载页面。

控制台上没有错误或警告。

如果我删除最后一个插件，我只是让它正常工作。但是，如果我保留最后一个插件，但删除我的第二个自制插件，它也工作得很好。现在，如果我删除我的第一个自制插件，并保留第二个和最后一个，我得到了相同的bug。所以我猜它是这样的，但我不知道如何调试它，因为看不到错误或警告。

我甚至不知道我能给你哪个代码，所以这是两个插件的代码

第二个：plugin.js

CKEDITOR.plugins.add( 'linkfile', {
    icons: 'linkfile',
    lang: [ 'zh', 'en'],
    init: function( editor ) {
        editor.addCommand( 'linkfileDialog', new CKEDITOR.dialogCommand( 'linkfileDialog' ) );
        editor.ui.addButton( 'linkfile', {
                label : 'Image/video url',
            command: 'linkfileDialog',
            toolbar: 'insert'
        });

        CKEDITOR.dialog.add( 'linkfileDialog', this.path + 'dialogs/linkfile.js' );
    }
});

` `dialogs/linkfile.js

CKEDITOR.dialog.add( 'linkfileDialog', function( editor ) {

    return {
                    title : 'Image/video url',
        minWidth: 400,
        minHeight: 75,
        contents: [
            {
                id: 'tab-basic',
                label: 'Basic Settings',
                elements: [
                    {
                        type: 'text',
                        id: 'linkfileURL',
                              label : 'Paste video(mp4/webm) or image (jpg/png/gif) URL',
                    }
                ]
            }
        ],
      onOk: function() {
      var dialog = this;
            var url=dialog.getValueOf( 'tab-basic', 'linkfileURL').trim();
      var fileExtension = url.split('.').pop()
      var content = '';
      var blackList = ['iplogger', '2no.co','bc.vc', 'yip.su', 'bit.do','soo.gd', '7.ly', 'tiny.cc', 'zzb.bz', 'cur.lv', 'shorte.st', 'adf', 'bit', 'biturl', 'rurl.co']
      for (i=0; blackList.length >= i; i++){
        if (url.includes(blackList[i])) {
          alert( 'Forbidden url');
                return false;
        }
      }
      if (fileExtension == "mp4" || fileExtension == "webm") {
        content = '<video style="max-height:400px;" width="100%" controls> <source src="' + url + '"type="video/mp4"></video>'
      } else if (fileExtension == "jpg" || fileExtension == "png" || fileExtension == "gif" ||
        fileExtension == "jpeg") {
        content = '<img src="' + url +'"/>';
        } else {
          alert( 'Incorrect url');
                return false;
        }
          var element = CKEDITOR.dom.element.createFromHtml(content);
          editor.insertElement(element);
        }
    };
});

最后一个

plugin.js

( function() {
    CKEDITOR.plugins.add( 'rsembbed',
        {
            lang: ['en'],
            init: function( editor )
            {
                editor.ui.addButton( 'Rsembbed',
                    {
                        label : "Twitter/instagram embbed",
                        toolbar : 'insert',
                        command : 'rsembbed',
                        icon : this.path + 'icons/rsembbed.png'
                    });

                editor.addCommand( 'rsembbed', new CKEDITOR.dialogCommand( 'rsembbedDialog' ) );
                CKEDITOR.dialog.add( 'rsembbedDialog', this.path + 'dialogs/rsembbed.js' );
            }
        });
})();

dialogs/rsembbed.js

CKEDITOR.dialog.add( 'rsembbedDialog', function( editor ) {

    return {
                    title : 'Twitter/instagram url',
        minWidth: 400,
        minHeight: 75,
        contents: [
            {
                id: 'tab-basic',
                label: 'Basic Settings',
                elements: [
                    {
                        type: 'text',
                        id: 'rsembbedURL',
                              label : 'Paste twitter or instagram URL',
                    }
                ]
            }
        ],
      onOk: function() {
        var dialog = this;
              var url=dialog.getValueOf( 'tab-basic', 'rsembbedURL').trim();
        var content = '';
        if (url.indexOf("twitter.com") > 0){
          $.ajax({
              url: "https://publish.twitter.com/oembed?url=" + url,
              type: 'GET',
              dataType: 'jsonp',
                success: function(res){
                content = res.html
                console.log(content)
                var element = CKEDITOR.dom.element.createFromHtml(content);
                editor.insertElement(element); }
            });
            }  else {
              alert( 'Incorrect url');
                    return false;
            }
          }
        };
      });

如果你有任何我可以探索的路径，因为我从昨天开始就在努力解决这个问题……

Answer 1

你用的是turbolink吗？

我认为您的问题是turbolink:加载而不是就绪函数

试着使用

$( document ).on('turbolinks:load', () ->
  ....
)

和

$(document).on("turbolinks:before-cache", function() {
  ....
});