WangEditor -岩石教程

特点

轻量级: 核心文件体积小，加载速度快，性能优秀。
简单易用: 提供直观的用户界面和简单的 API，易于上手和集成。
跨平台支持: 兼容主流浏览器，支持桌面和移动端设备。
插件丰富: 提供多种插件，可以扩展编辑器功能，如图片上传、表格、代码高亮等。
自定义配置: 支持高度自定义，可以根据需求配置工具栏和功能。
多语言支持: 内置多种语言，适用于国际化项目。
开源免费: 源代码公开，免费使用，并有活跃的社区支持。

使用场景

任何需要富文本输入的 web 应用

安装方式

使用 npm 或 yarn 安装

npm install @wangeditor/editor
# 或者
yarn add @wangeditor/editor

使用示例

在 HTML 文件中引入 WangEditor5 并初始化

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>WangEditor5 Example</title>
  <link rel="stylesheet" href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css">
</head>
<body>
  <h1>WangEditor5 Example</h1>
  <div id="editor-container"></div>
  <script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
  <script>
    const { createEditor, createToolbar } = window.wangEditor;
    const editorConfig = {};
    const editor = createEditor({
      selector: '#editor-container',
      config: editorConfig,
      mode: 'default',
    });
    const toolbarConfig = {};
    const toolbar = createToolbar({
      editor,
      selector: '#toolbar-container',
      config: toolbarConfig,
      mode: 'default',
    });
  </script>
</body>
</html>

常用 API 介绍

1. createEditor(config)

描述: 创建并初始化 WangEditor5 实例。

参数:

config: 一个对象，包含配置选项。

示例:

const editor = createEditor({
  selector: '#editor-container',
  config: {
    placeholder: '请输入内容...',
  },
});

2. editor.getHtml()

描述: 获取编辑器的 HTML 内容。

参数: 无

示例:

const htmlContent = editor.getHtml();
console.log(htmlContent);

3. editor.setHtml(html)

描述: 设置编辑器内容为指定的 HTML。

参数:

html: 字符串，包含要设置的 HTML 内容。

示例:

editor.setHtml('<p>Hello, WangEditor5!</p>');

4. editor.getText()

描述: 获取编辑器的纯文本内容。

参数: 无

示例:

const textContent = editor.getText();
console.log(textContent);

5. editor.clear()

描述: 清空编辑器内容。

参数: 无

示例:

editor.clear();

6. editor.destroy()

描述: 销毁编辑器实例。

参数: 无

示例:

editor.destroy();

7. editor.insertText(text)

描述: 在当前光标位置插入文本。

参数:

text: 字符串，要插入的文本内容。

示例:

editor.insertText('Hello, world!');

8. editor.insertHtml(html)

描述: 在当前光标位置插入 HTML。

参数:

html: 字符串，要插入的 HTML 内容。

示例:

editor.insertHtml('<strong>Bold text</strong>');

9. editor.cmd.do(name, value)

描述: 执行编辑器命令，如加粗、插入图片等。

参数:

name: 字符串，命令名称，如 bold, italic, underline 等。
value: 命令参数，可选。

示例:

// 执行加粗命令
editor.cmd.do('bold');

10. editor.on(eventName, handler)

描述: 为编辑器注册事件监听器。

参数:

eventName: 字符串，事件名称，如 change, focus, blur 等。
handler: 函数，当事件触发时调用。

示例:

editor.on('change', function() {
  console.log('Content changed!');
});

高级用法

自定义工具栏: WangEditor5 允许开发者自定义工具栏按钮，以满足特定需求。

示例:

const editor = createEditor({
  selector: '#editor-container',
  config: {
    menus: ['bold', 'italic', 'underline', 'image'],
  },
});
const toolbar = createToolbar({
  editor,
  selector: '#toolbar-container',
  config: {
    items: [
      'bold',
      'italic',
      'underline',
      'image',
      {
        key: 'myButton',
        title: 'My Button',
        iconSvg: '<svg>...</svg>',
        onClick(editor) {
          alert('My Button Clicked!');
        },
      },
    ],
  },
});

WangEditor

特点

使用场景

安装方式

使用示例

常用 API 介绍

高级用法

官方资料