专栏首页LNMP开发那些事基础API指南 - 集成方法 - 构建文档 - ckeditor 5中文文档

基础API指南 - 集成方法 - 构建文档 - ckeditor 5中文文档

每一个CKEditor 5构建版本提供一个不同的编辑器类,用来创建编辑器实例:

  • Classic editor – Classic编辑器
  • Inline editor – Inline编辑器
  • Balloon editor – Balloon编辑器
  • Document editor – Decoupled编辑器

文档中的大多数例子使用Classic编辑器,其他的构建版本使用方法与此一致。

一个CKEditor 5构建版本编译了一个具体的编辑器类和一些插件。在你的应用中使用编辑器,使用构建版本是最简单的方法。但是你也可以直接使用editor classes和插件去创建一个更合适的版本。

创建编辑器

不管悬着什么构建版本,创建编辑器都是使用静态方法create()

示例 —— Classic编辑器

在你的html页面中添加CKEditor用来替换的元素:

<textarea name="content" id="editor">     &lt;p&gt;Here goes the initial content of the editor.&lt;/p&gt; </textarea>

之后调用ClassicEditor.create()来用Classic编辑器替换<textarea>元素:

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

这样,<textarea>元素就会被隐藏并用编辑器替换。 <textarea>数据用于初始化编辑器内容。 可以以相同的方式使用<div>元素。

示例 —— Inline编辑器

与前面的示例类似,添加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 ); } );

示例 —— Balloon编辑器

该过程与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 ); } );

示例 —— Decoupled编辑器

添加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.querySelector( '#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 support

因为构建版本是使用UMD模块分发,编辑器可以使用多种方法检索:

  • 通过CommonJS兼容的加载器(例如webpack或Browserify)
  • 通过RequireJS(或者其他的AMD库)
  • 如果上面的加载器都不可用,你可以使用全局命名空间

例如:

// 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://www.dnote.cn/users/ianzhi/posts/ckeditor5-builds-integration-basicapi

文章版权归作者所有,转载请保留此声明。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 概览 - 构建文档 - ckeditor5中文文档

    ckeditor 5构建版本是一些被准备好的富文本编辑器的集合。每一个“构建版本”提供一个包含一系列特性和一个默认配置的编辑器。他们提供了方便的解决方案,不需要...

    ianzhi
  • 获取和保存数据 - 集成 - 构建文档 - ckeditor5中文文档

    CKEditor 5允许您以各种方式从中检索数据并将其保存到服务器(或通常用于您的系统)。 在本指南中,您可以了解可用选项及其优缺点。

    ianzhi
  • angular 2+组件 - 框架 - 集成 - 构建文档 - ckeditor5中文文档

    CKEditor 5由现成的编辑器构建和构建所基于的CKEditor 5 Framework组成。

    ianzhi
  • 【亲测】最好用的4个JavaScript编辑器

    然后我在讲课的时候发现同学们用的编辑器各不相同,有的同学用的是editplus,有的甚至用的是老掉牙的DW,这我就不能忍受了,今天晚上给大家推荐几款比较Ok的编...

    web前端教室
  • Java程序员最常犯的 10 个错误!

    使用Arrays.asList()方法可以得到一个ArrayList,但是得到这个ArrayList其实是定义在Arrays类中的一个私有的静态内部类。这个类虽...

    Java技术栈
  • 概览 - 构建文档 - ckeditor5中文文档

    ckeditor 5构建版本是一些被准备好的富文本编辑器的集合。每一个“构建版本”提供一个包含一系列特性和一个默认配置的编辑器。他们提供了方便的解决方案,不需要...

    ianzhi
  • Promise的错误处理

    在开发过程中我们经常使用Promise来处理异步,但是我们经常忽略Promise的错误处理。

    挥刀北上
  • Promise: 给我一个承诺,我还你一个承诺

    处理concurrent programming,除了threading/multi-processing外,各家语言都有自己的绝活:erlang/elixir...

    tyrchen
  • JavaScript 错误处理大全【建议收藏】

    在所有的这些情况下,我们作为程序员都会产生错误,或者让编程引擎为我们创建一些错误。

    疯狂的技术宅
  • shell 文本操作命令

    :s/old/new/g 将当前行中查找到的所有字符串“old” 替换为“new”

    Krry

扫码关注云+社区

领取腾讯云代金券