无法获取 CKEditor 的实例

Question

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

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

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());
});

我得到：

Cannot read property 'getData' of null

我做错了什么？

Answer 1

你可以在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();

Answer 2

您的代码存在一些问题

let editor = 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());

无法获取 CKEditor 的实例

Cannot get instance of CKEditor

html

javascript

jquery

textarea

ckeditor