3

我正在使用 CKEditor 构建自定义文本编辑器，并且我想编写自己的 JavaScript 函数以将 HTML 插入 CKEditor 窗口。

CKEditor 有一个方法叫做editor.insertHtml()在文档中的光标位置插入 HTML。可以从 CKEditor 插件中访问此方法，但我更喜欢自由地在 CKEditor 之外编写自己的函数，然后将生成的 HTML 插入到编辑器中。

那么我该如何访问editor.insertHtml()呢？我在下面复制了我的代码。我尝试使用CKEDITOR.instances.editor1.insertHtml()，但这不起作用。

这个问题CKEditor editor1.insertHtml() not working for me表明我需要监听该instanceReady事件，但我不确定如何执行此操作，因此我希望得到更详细的解释。谢谢！

<html>
<head>
    <meta charset="utf-8">
    <script src="ckeditor/ckeditor.js"></script>
</head>
<body>
<textarea id="editor1"></textarea>
<script type="text/javascript">
    // Replaces the <textarea id="editor1"> with a CKEditor
    // instance, using default configuration.
    CKEDITOR.replace( 'editor1',
    {
        height:"500", width:"1000"
    });
</script>
<script type="text/javascript">
    CKEDITOR.instances.editor1.insertHtml('<h1>someText</h1>');
</script>

</body>
</html>
4

1 回答 1

3

instanceReady事件：

在创建 CKEDITOR 实例、完全初始化并准备好交互时触发。

您可以按如下方式使用它：

CKEDITOR.replace( 'editor1', {
    height: '500', 
    width: '1000',
    on: {
       instanceReady: function() {
           // this is current editor instance
           this.insertHtml( '<h1>someText</h1>' );
       }
    }
} );

要使用实例的 API，基本上将您的代码放在instanceReady回调中。否则，您的代码将在编辑器尚未准备好时执行。

于 2013-08-12T20:57:43.573 回答