简介
在 web 开发中,富文本编辑器通常是不可缺少的组件之一。而在前端开发中,CKEditor 是广泛应用的富文本编辑器之一。在 CKEditor 5 中,我们可以使用 @ckeditor/ckeditor5-widget npm 包来轻松创建自定义的交互式小部件,如按钮、下拉选项、进度条等。本文将介绍如何使用 @ckeditor/ckeditor5-widget npm 包。
安装
要使用 @ckeditor/ckeditor5-widget npm 包,我们需要将其安装到我们的项目中。我们可以使用以下命令在项目中安装该软件包:
npm install --save @ckeditor/ckeditor5-widget
使用
安装完毕后,我们只需调用模块来创建一个新的小部件。这里有一个简单的示例,演示如何使用 @ckeditor/ckeditor5-widget npm 包创建自定义下拉选项:
-- -------------------- ---- ------- ------ ------------- ---- ------------------------------------------------------- ------ ------ ---- ---------------------------------------- ------------- -------- ----------------------- --------- -- - -------- - ------ -- -------- - ---------- ------- --------- ------- --------------- --------------- -------- - - - ------ ------ -- - ----------------------------- ------------------ - --------------- --------- ----------- -------- - -- ---------------------- ----------------- ------------------- - ------ ------------------ ----- - ------------- ---------- - -- - ----- ------------- - --------------- -------------------------- --------- - -- ------ -------------- - - -- ---------------------- -------------- ------------------- - ------ ------------------ ----- - ------------- ---------- - -- - ----- ------------- - --------------- -------------------------- --------- - -- ------ -------------- - - -- -------------------- -------- ----- ---------- - ------ ---- - -- - --------------------------- --------------------- ------------- ---- - -- - -- - - ------- ----- -- - -------------- ----- -- - --
在此示例中,我们使用 createDropdown() 函数创建了一个自定义下拉选项,该函数允许我们根据需要向下拉列表中添加选项。我们还实现了一个 createDropdownWidget() 函数,该函数使用我们的 createDropdown() 函数来创建一个新的小部件,并将其插入编辑器中。最后,我们使用 editor.commands.get('widget').on('execute', ...) 来监听“小部件执行”事件,以便我们可以针对 small-widget 命令扩展编辑器。
在使用此示例时,请务必按照 CKEditor 官方文档的要求正确地配置所有所需的选项。例如,定义一个自定义下拉选项时,我们需要注册它的元素,并确保我们正确地定义了元素的转换。
创建一个新的小部件
要创建一个新的小部件,我们可以使用 createWidget() 函数。createWidget() 函数将返回一组小部件数据,我们可以将其插入 model 中。
import Widget from '@ckeditor/ckeditor5-widget/src/widget'; const widget = createWidget( 'my-widget', { label: 'My widget', icon: 'my-widget.svg' } );
深入研究
我们可以使用 @ckeditor/ckeditor5-widget npm 包来轻松地构建自定义的交互式小部件。我们可以使用 insertContent() 方法,将我们的小部件插入到编辑器中。
editor.model.insertContent( createDropdownWidget( editor.model, data ) );
由于 @ckeditor/ckeditor5-widget npm 包所提供的功能非常强大,因此我们可以通过使用插件和自定义数据旁路来扩展并修改这些小部件。
总结
在本文中,我们学习了如何使用 @ckeditor/ckeditor5-widget npm 包,创建自定义的交互式小组件。我们通过使用 createWidget() 函数来创建新的小部件,并使用 insertContent() 方法将其插入到 CKEditor 5 编辑器中。我们还实现了一个 createDropdown() 函数,该函数创建了一个自定义下拉选项。尽管如此,CKEditor 5 和 @ckeditor/ckeditor5-widget npm 包过于庞大,这里仅是说明,如果需要深入学习,请参考官方文档。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/5f320e633b0ab45f74a8bd53