wangEditor 富文本详解（下）-阿里云开发者社区

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");
});

wangEditor 富文本详解（下）