每一个CKEditor 5构建版本提供一个不同的编辑器类,用来创建编辑器实例:
文档中的大多数例子使用Classic编辑器,其他的构建版本使用方法与此一致。
一个CKEditor 5构建版本编译了一个具体的编辑器类和一些插件。在你的应用中使用编辑器,使用构建版本是最简单的方法。但是你也可以直接使用editor classes和插件去创建一个更合适的版本。
不管悬着什么构建版本,创建编辑器都是使用静态方法create()
。
在你的html页面中添加CKEditor用来替换的元素:
<textarea name="content" id="editor">
<p>Here goes the initial content of the editor.</p>
</textarea>
之后调用ClassicEditor.create()
来用Classic编辑器替换<textarea>
元素:
ClassicEditor
.create(
document
.querySelector( '#editor' ) )
.then(
editor
=> {
console
.log(
editor
);
} )
.
catch
(
error
=> {
console
.error(
error
);
} );
这样,<textarea>元素就会被隐藏并用编辑器替换。 <textarea>数据用于初始化编辑器内容。 可以以相同的方式使用<div>元素。
与前面的示例类似,添加CKEditor应该初始化到页面的元素:
<
div id
="editor">
&
lt
;
p
&
gt
;
Here goes the initial content of the editor
.&
lt
;/
p
&
gt
;
</
div
>
Then call InlineEditor.create()
to attach Inline editor to the <div>
element:
InlineEditor
.create(
document
.querySelector( '#editor' ) )
.then(
editor
=> {
console
.log(
editor
);
} )
.
catch
(
error
=> {
console
.error(
error
);
} );
该过程与Inline编辑器相同。 唯一的区别是你需要使用BalloonEditor.create()
方法。
添加CKEditor应初始化到您的页面的元素:
<
div id
="editor">
&
lt
;
p
&
gt
;
Here goes the initial content of the editor
.&
lt
;/
p
&
gt
;
</
div
>
然后调用BalloonEditor.create()
将Balloon编辑器附加到<div>元素:
BalloonEditor
.create(
document
.querySelector( '#editor' ) )
.then(
editor
=> {
console
.log(
editor
);
} )
.
catch
(
error
=> {
console
.error(
error
);
} );
添加CKEditor应初始化到工具栏和可编辑区的元素到页面:
<!--
The toolbar will be rendered in this container
. -->
<
div id
="toolbar-container"></
div
>
<!--
This container will become the editable
. -->
<
div id
="editor">
<
p
>
This is the initial editor content
.</
p
>
</
div
>
然后调用DecoupledEditor.create()
方法,使用工具栏创建一个Decoupled编辑器实例,并在两个单独的容器中创建工具栏和编辑区实例:
DecoupledEditor
.create(
document
.
query
Selector( '#editor' ) )
.then(
editor
=> {
const
toolbarContainer
=
document
.querySelector( '#toolbar-container' );
toolbarContainer
.appendChild(
editor
.
ui
.
view
.
toolbar
.
element
);
} )
.
catch
(
error
=> {
console
.error(
error
);
} );
每个编辑器类都可以在create()
方法中接受不同的参数,并且可以以不同的方式处理初始化。 例如,经典编辑器将使用编辑器替换给定元素,而内联编辑器将使用给定元素初始化其上的编辑器。 请参阅每个编辑器的文档以了解详细信息。
编辑器类的接口也不是强制的。 由于编辑器的不同实现在功能方面可能有很大差异,因此编辑器类实现者可以完全自由地使用API。 因此,本指南中的示例可能不适用于某些编辑器类。
创建编辑器后,可以通过其API与其进行交互。 上面例子中的编辑器变量应该启用它。
To replace the editor content with new data, use the setData()
method:
用新数据替换编辑器内容,请使用setData()
方法。
editor.setData( '<p>Some text.</p>' );
获取编辑器如果由于任何原因需要检索编辑器内容,例如通过Ajax调用将其发送到服务器,请使用getData()
方法:
const data = editor.getData();
在现代应用程序中,通常通过JavaScript以交互方式从页面创建和删除元素。 在这种情况下,应使用destroy()
方法销毁CKEditor实例:
editor
.destroy()
.
catch
(
error
=> {
console
.log(
error
);
} );
一旦销毁,编辑器实例使用的资源就会被释放,用于创建编辑器的原始元素会自动显示和更新,以反映最终的编辑器数据。
Document#change:data
当文档以编辑器数据中“可见”的方式更改时,将触发此事件。 还有一组更改,例如选择位置更改,标记更改,这些更改不会影响editor.getData()的结果。 要收听所有这些更改,您可以使用更广泛的Document #change事件。
因为构建版本是使用UMD模块分发,编辑器可以使用多种方法检索:
例如:
// In the CommonJS environment.
const
ClassicEditor
=
require
( '@ckeditor/ckeditor5-build-classic' );
ClassicEditor
.create( ... ); // [Function]
// If AMD is present, you can do this.
require
( [ 'path/to/ckeditor5-build-classic/build/ckeditor' ],
ClassicEditor
=> {
ClassicEditor
.create( ... ); // [Function]
} );
// As a global variable.
ClassicEditor
.create( ... ); // [Function]
// As an ES6 module (if using webpack or Rollup).
import ClassicEditor from
'@ckeditor/ckeditor5-build-classic';
ClassicEditor
.create( ... ); // [Function]
CKEditor 提供了丰富的API与剪辑器交互。获取更多信息请查阅API文档。
文章作者ianzhi,原文地址:https://cloud.tencent.com/developer/article/1476870
文章版权归作者所有,转载请保留此声明。