如何防止 Ckeditor 的视频检测器插件在页面上有多个实例时复制内容

How to prevent VideoDetector plugin for Ckeditor to duplicate content when there are multiple instances on the page?

本文关键字：实例 复制 的视频 Ckeditor 何防止 检测器 插件      更新时间：2023-09-26

设置和目标：

我正在使用 CKEditor 的视频检测器插件：http://ckeditor.com/addon/videodetector

我的目标是允许将视频添加到内容中。

页面上大约有五个 CKeditor 实例。每个都有.ckeditor类来初始化插件（包括jQuery插件）。然后在代码中，我设置了自定义工具栏，默认情况下用于页面上的所有插件。

您可以在下面看到示例设置。

$(document).ready(function() {
    CKEDITOR.config.toolbar = [
        [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord' ],
        {
            name: 'basicstyles',
            groups: [ 'basicstyles', 'cleanup' ],
            items: [ 'Bold', 'Italic', '-', 'RemoveFormat' ]
        },
        {
            name: 'paragraph',
            groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ],
            items: [ 'NumberedList', 'BulletedList', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ]
        },
        {
            name: 'links',
            items: [ 'Link', 'Unlink', 'VideoDetector' ]
        }
    ];
    CKEDITOR.config.uiColor = '#e5e5e5';
    CKEDITOR.config.removePlugins = 'elementspath';
    CKEDITOR.config.extraPlugins = 'videodetector';
    CKEDITOR.config.extraAllowedContent = 'iframe[*]';
    CKEDITOR.config.allowedContent = true;
});

问题：

此配置有效，但是当您开始在不同的实例中插入视频时，问题就开始了。首先，如果您使用插件向每个 CKEditor 实例添加不同的视频，则始终会添加相同的视频。如果我保存，刷新然后插入新视频，我只能插入新视频。但是，一旦我保存了表单，初始视频就会被新视频替换。

我认为问题可能与实例有关，它们相互覆盖，但我不确定如何解决它。

如果有任何问题，请告诉我。

我遇到了类似的问题，但就我而言，我只是试图将多个视频插入同一个编辑器。问题是插件正在寻找具有一类cke_dialog_contents的第一个元素。每次。

我修改了插件代码，以便在对话框 onOK 函数中检索对话框输入元素的值，然后传递给解析函数，而不是要求解析函数从 DOM 中查找值。我没有像您的示例那样在页面上的多个编辑器实例中尝试过此操作，但我怀疑它在这种情况下应该同样有效。

首先，更改 onOK 函数以从其自己的对话框中检索值：

onOk: function(){
    var dialog = this;
    var inputVal = dialog.getValueOf('tab-basic', 'url_video');
    //detectamos el video
    var respuesta = detectar(inputVal);

然后更改 dectectar（） 函数以接受字符串作为参数：

function detectar(inputVal){
    var url = inputVal;

我正在使用 ckeditor 4.3.4 和视频检测器 1.1。

相关文章：