无法获取 CKEditor 的实例

Posted 2023-05-07

【中文标题】无法获取 CKEditor 的实例

【英文标题】：Cannot get instance of CKEditor

【发布时间】：2020-01-09 22:11:39

【问题描述】：

我有几个需要用CKEditor 初始化的字段，为此我创建了一个包含initEditor 方法的帮助类。

下面的方法应该返回初始化的编辑器，但它没有：

window.CKEditorHelper = window.CKEditorHelper || ;

(function (exports) 

    exports.initEditor = function (input, myEditor) 
        ClassicEditor
            .create(document.querySelector(input), 
                language: 
                    ui: 'en'
                    content: 'en'
                
            )
            .then(editor => 
                myEditor = editor;
            );
    ;

)(window.CKEditorHelper);

这是通过以下方式调用的：

let editor = null;
CKEditorHelper.initEditor('#description', editor);

所以当我点击一个按钮时：

$('#save').on('click', function()
    console.log(editor.getData());
);

我明白了：

无法读取 null 的属性“getData”

我做错了什么？

【参考方案1】：

您的代码存在一些问题

让编辑器 = null;

let 关键字只在函数范围内定义一个变量，当您在另一个范围（您的点击句柄事件）上使用 editor 时，它可能是未定义的

另一行

myEditor = 编辑器；

这很简单，对您原来的 editor 对象的引用将消失

这是我的解决方案

改变你启动编辑器的方式，如下所示

window.editorInstance = editor: null;
CKEditorHelper.initEditor('#description', editorInstance);

将您的 CKEditorHelper 更改为

window.CKEditorHelper = window.CKEditorHelper || ;

(function (exports) 

exports.initEditor = function (input, myEditorInstance) 
    ClassicEditor
        .create(document.querySelector(input), 
            language: 
                ui: 'en'
                content: 'en'
            
        )
        .then(editor => 
            myEditorInstance.editor = editor;
        );
;

)(window.CKEditorHelper);

当你想使用你的编辑器时

console.log(editorInstance.editor.getData());

【讨论】：

我必须等待 7 小时才能分配赏金，无论如何问题已解决，谢谢 :)

【参考方案2】：

你可以用javascript给出这个

$(document).ready(function () 
  CKEDITOR.replace('tmpcontent',  height: '100px' )
)

使用下面的方法取值

$('#save').on('click', function()
 var textareaValue = CKEDITOR.instances.tmpcontent.getData();
);

<label class="control-label">Message</label>
<textarea name="tmpcontent" id="tmpcontent" class="form-control"></textarea>

//或在最新版本中

var myEditor;

ClassicEditor
    .create( document.querySelector( '#description' ) )
    .then( editor => 
        console.log( 'Editor was initialized', editor );
        myEditor = editor;
     )
    .catch( err => 
        console.error( err.stack );
     );

然后使用获取数据

myEditor.getData();

【讨论】：

我收到CKEDITOR 未定义，我使用的是最新版本“5”，仅使用ClassicEditor 无法使用CKEDITOR 访问此版本。谢谢你的回答

@sfarzoso 用ClassicEditor检查我的第二个解决方案

我找不到与第二种解决方案的代码有任何区别，请您解释一下吗？