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

Question

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

我试图按照最后一个插件的模板做第三个插件，并且该插件本身运行良好。

问题是当我第二次转到索引视图，然后转到 ckeditor 字段所在的新视图时。只有 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' );
}
});

'对话框/链接文件.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

你用过涡轮链接吗？

我认为您的问题是涡轮链接：加载而不是就绪功能

尝试使用

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

和

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