wangEditor 富文本详解（中）https://developer.aliyun.com/article/1513310?spm=a2c6h.13148508.setting.31.f8774f0euyBLtl
4. 编辑器 API
4.1 getConfig
获取编辑器所有配置
const handleCreated = (editor) => { const result = editor.getConfig(); console.log(result); };
4.2 getAllMenuKeys
获取编辑器所有 menu 的 key
const handleCreated = (editor) => { const result = editor.getAllMenuKeys(); console.log(result); };
4.3 getMenuConfig
获取单个 menu 的配置。
const handleCreated = (editor) => { const result = editor.getMenuConfig("color"); console.log(result); };
4.4 alert
编辑器 alert ，可通过 customAlert 配置。
editor.alert("错误信息", "error");
customAlert 配置
<script setup lang="ts"> import { message } from "antd"; const customAlert = (s, t) => { switch (t) { case "success": message.success(s); break; case "info": message.info(s); break; case "warning": message.warning(s); break; case "error": message.error(s); break; default: message.info(s); break; } }; </script> <template> <div class="editor-content-view"> <Toolbar /> <Editor @customAlert="customAlert" /> </div> </template>
4.5 handleTab
控制编辑器按 tab 键时，输入什么。
<script setup lang="ts"> const handleCreated = (editor: any) => { editor.handleTab = () => editor.insertText("aaaaa"); }; </script> <template> <div class="editor-content-view"> <Toolbar /> <Editor @onCreated="handleCreated" /> </div> </template>
4.6 getHtml
editor.getHtml() 获取非格式化的 html
const result = editor.getHtml(); console.log(result);
4.7 getText
获取当前编辑器的纯文本内容
const handleCreated = (editor) => { const result = editor.getText(); console.log(result); };
4.8 setHtml
重置编辑器的 HTML 内容。
editor.setHtml("<p>hello</p>");
4.9 isEmpty
判断当前编辑器内容是否为空（只有一个空段落）
editor.isEmpty();
4.10 getSelectionText
获取选中的文本
const result = editor.getSelectionText(); console.log(result);
4.11 getElemsByType
通过 type 获取编辑器的 element 列表。
editor.getElemsByType("image"); // 所有图片 editor.getElemsByType("link"); // 所有链接
4.12 getElemsByTypePrefix
通过 type 前缀获取编辑器的 element 列表。
editor.getElemsByTypePrefix("header"); // 获取所有标题 header1 header2 header3...
4.13 deleteBackward
向前删除，相当于按 backspace 键。
editor.deleteBackward();
4.14 deleteForward
向后删除，相当于按 delete 键
editor.deleteForward();
4.15 deleteFragment
删除选中的内容
editor.deleteFragment();
4.16 getFragment
获取选中的内容，json 格式
editor.getFragment();
4.17 insertBreak
在选区回车换行
editor.insertBreak();
4.18 insertText
在选区插入文本
editor.insertText("aaaa");
4.19 dangerouslyInsertHtml
插入富文本
editor.dangerouslyInsertHtml(`<h1>标题</h1><p>文本 <b>加粗</b></p>`);
4.20 clear
清空编辑器内容
editor.clear();
4.21 undo
撤销
editor.undo();
4.22 redo
重做
editor.redo();
4.23 insertNode
在选区插入一个节点
const node = { type: "paragraph", children: [{ text: "simple text" }] }; editor.insertNode(node);
4.24 insertNodes
在选区插入多个节点
import { SlateTransforms } from "@wangeditor/editor"; const node1 = { type: "paragraph", children: [{ text: "aaa" }] }; const node2 = { type: "paragraph", children: [{ text: "bbb" }] }; const nodeList = [node1, node2]; SlateTransforms.insertNodes(editor, nodeList);
4.25 removeNodes
删除选区所在的节点
import { SlateTransforms } from "@wangeditor/editor"; SlateTransforms.removeNodes(editor);
4.26 获取选中节点
可使用 SlateEditor.nodes 获取选中的节点。
import { SlateEditor, SlateElement, SlateNode } from "@wangeditor/editor"; const nodeEntries = SlateEditor.nodes(editor, { match: (node) => { if (SlateElement.isElement(node)) { if (node.type === "paragraph") { return true; // 匹配 paragraph } } return false; }, universal: true, }); if (nodeEntries == null) { console.log("当前未选中的 paragraph"); } else { for (let nodeEntry of nodeEntries) { const [node, path] = nodeEntry; console.log("选中了 paragraph 节点", node); console.log("节点 path 是", path); } }
4.27 setNodes
设置选中节点的属性
import { SlateTransforms } from "@wangeditor/editor"; SlateTransforms.setNodes( editor, { // @ts-ignore textAlign: "right", }, { mode: "highest", // 针对最高层级的节点 } );
4.28 getParentNode
获取一个节点的父节点
const parentNode = editor.getParentNode(node); // 返回 node 或者 null
4.29 toDOMNode
获取一个节点对应的 DOM 节点
const elem = editor.toDOMNode(node); // 返回 HTMLElement
4.30 isInline
判断一个节点是否是 inline
const inline = editor.isInline(node);
4.31 isVoid
判断一个节点是否是 void
const void = editor.isVoid(node)
4.32 isText
判断一个节点是否是 text
import { SlateText } from "@wangeditor/editor"; SlateText.isText(node); // true/false
4.33 isElement
判断一个节点是否是 elem
import { SlateElement } from "@wangeditor/editor"; SlateElement.isElement(node); // true/false
4.34 addMark
为选中的文本添加标记（文本样式）
editor.addMark("bold", true); // 加粗 editor.addMark("color", "#999"); // 文本颜色
4.35 removeMark
对选中的文字，取消标记（文本样式）
editor.removeMark("bold"); // 取消加粗
4.36 marks
获取选中文字的标记（文本样式）
import { SlateEditor } from "@wangeditor/editor"; SlateEditor.marks(editor); // 例如 { bold: true, color: "#595959" }
4.37 id
获取编辑器 id
editor.id; // 如 'wangEditor-1'
4.38 isFullScreen
编辑器是否全屏
editor.isFullScreen; // true/false
4.39 focus
聚焦到编辑器
editor.focus(); // editor.focus(true) // 选区定位到最后
4.40 blur
失焦编辑器
editor.blur();
4.41 isFocused
判断当前编辑器是否聚焦？
editor.isFocused(); // true/false
4.42 updateView
强制更新视图
editor.updateView();
4.43 scrollToElem
滚动到指定元素，类似锚点。
editor.scrollToElem(elemId);
4.44 showProgressBar
显示进度条，一般用于上传功能
editor.showProgressBar(progress); // progress 为 0-100 的数字
4.45 hidePanelOrModal
隐藏当前的弹框 （如插入链接） 和下拉列表（如设置标题、设置字体）
editor.hidePanelOrModal();
4.46 fullScreen
设置为全屏
editor.fullScreen();
4.47 unFullScreen
取消全屏
editor.unFullScreen();
4.48 disable
禁用编辑器，设置为只读
editor.disable();
4.49 isDisabled
判断当前编辑器是否只读？
editor.isDisabled(); // true/false
4.50 enable
取消禁用，取消只读
editor.enable();
4.51 destroy
销毁编辑器和工具栏
editor.destroy();
4.52 getEditableContainer
获取编辑区域容器 DOM 节点
editor.getEditableContainer();
4.53 selection
获取编辑器当前的选区。如果未选中，则返回 null 。
editor.selection; // selection 或 null
selection 数据结构如下：
{ "anchor": { "path": [1, 0], "offset": 8 }, "focus": { "path": [1, 0], "offset": 10 } }
4.54 select
选中一个指定的选区。
const newSelection = { anchor: { path: [1, 0], offset: 8 }, focus: { path: [1, 0], offset: 10 }, }; editor.select(newSelection);
4.55 selectAll
选中所有内容
editor.selectAll();
4.56 deselect
取消选中
editor.deselect();
4.57 move
移动光标
editor.move(3); // 移动 3 个字符
4.58 moveReverse
反向移动光标
editor.moveReverse(2); // 反向移动 2 个字符
4.59 restoreSelection
恢复最近一次非 null 选区。如编辑器 blur 之后，再重新恢复选区。
editor.restoreSelection();
4.60 isSelectedAll
判断编辑器是否全部选中。
editor.isSelectedAll(); // true/false
4.61 getSelectionPosition
获取选区的定位，将视情况返回 left right top bottom 的其中几个。
editor.getSelectionPosition(); // 例如 { left: "80.15px", top: "116px" }
4.62 getNodePosition
获取某个节点的定位，将视情况返回 left right top bottom 的其中几个。
editor.getNodePosition(node); // 例如 { left: "80.15px", top: "116px" }
4.63 on
监听某个事件
editor.on("event-key", fn);
4.64 off
取消监听
editor.off("event-key", fn);
4.65 once
只监听一次
editor.once("event-key", fn);
4.66 emit
触发事件
editor.emit("event-key");
4.67 内置的事件
editor.on("fullScreen", () => { console.log("fullScreen"); }); editor.on("unFullScreen", () => { console.log("unFullScreen"); }); editor.on("scroll", () => { console.log("scroll"); }); editor.on("modalOrPanelShow", (modalOrPanel) => { console.log(modalOrPanel); }); editor.on("modalOrPanelHide", () => { console.log("modalOrPanelHide"); });
