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

Question

自 1 个月以来，我在我的项目中使用了 CKEDITOR 4 和两个自制插件，一切正常。

我试着按照我上一个插件的模板做第三个插件，这个插件本身运行良好。

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

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

如果我删除了最后一个插件，我就让它正常工作了。 但是，如果我保留最后一个插件但删除我的第二个自制插件，它也能正常工作。 现在，如果我删除我的第一个自制插件并保留第二个和最后一个插件，我就会遇到同样的错误。 所以我想这与此有关，但我不知道如何调试它，因为没有错误或警告可见。

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

第二个: 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:load 而不是 ready 函数

尝试使用

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

和

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