ckeditor 从 textarea 获取实例 - Javascript (1)

📌 相关文章

📜 ckeditor 从 textarea 获取实例 - Javascript (1)

📅 最后修改于: 2023-12-03 15:14:09.593000 🧑 作者: Mango

使用 CKEditor 从 textarea 获取实例

在Web开发中，经常需要使用富文本编辑器来编辑和展示富文本内容。CKEditor是一个优秀的开源富文本编辑器，它具有丰富的功能和良好的用户体验。在使用CKEditor时，有时需要从textarea中获取CKEditor实例，以便获取编辑器中的文本内容或进行其他操作。

获取 CKEditor 实例的方法

使用CKEditor从textarea中获取实例并不复杂。我们只需要通过textarea的ID，调用CKEditor中提供的api即可。下面是一个简单的示例代码：

// HTML代码
<textarea id="editor"></textarea>

// JavaScript代码
<script>
    ClassicEditor.create(document.querySelector('#editor'))
        .then(editor => {
            // 获取CKEditor实例
            console.log(editor);
        })
        .catch(error => {
            console.error(error);
        });
</script>

在上面的示例代码中，我们首先在HTML中创建了一个textarea标签，并为其设置了ID为“editor”。然后在JavaScript代码中，我们调用了CKEditor提供的ClassicEditor.create()方法来创建一个CKEditor实例，并将其绑定到我们创建的textarea中。

在成功创建CKEditor实例后，我们可以通过.then()方法的回调函数获取到实例。在回调函数中，我们可以直接使用editor变量来访问CKEditor实例。

示例

下面是一个完整的示例代码和效果，你可以在自己的本地环境中运行该示例：

````html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CKEditor获取实例</title>
    <script src="https://cdn.ckeditor.com/ckeditor5/29.2.0/classic/ckeditor.js"></script>
</head>
<body>

<textarea id="editor"></textarea>
<button onclick="getEditorContent()">获取内容</button>

<script>
    ClassicEditor.create(document.querySelector('#editor'))
        .then(editor => {
            console.log(editor);
        })
        .catch(error => {
            console.error(error);
        });

    function getEditorContent() {
        let editor = ClassicEditor.instances[0];
        if (editor) {
            console.log(editor.getData());
        } else {
            console.log('未初始化');
        }
    }
</script>

</body>
</html>

总结

通过以上示例，我们可以看到从CKEditor中获取实例非常简单，只需要在创建CKEditor实例时，将其绑定到textarea中，并在回调函数中获取editor实例即可。获取到editor实例之后，我们就可以在代码中使用它，并从中获取编辑器中的文本内容或者进行其他的编辑操作。