TinyMCE -岩石教程

特点

高度可定制: 支持多种配置选项和插件，能够满足不同项目的需求。
跨浏览器支持: 兼容主流浏览器，包括 Chrome、Firefox、Safari、Edge 等。
强大的插件系统: 提供丰富的插件，可以扩展编辑器的功能，如图片上传、媒体嵌入、代码高亮等。
多语言支持: 支持多种语言，适用于国际化项目。
现代化界面: 提供简洁、直观的用户界面，提升用户体验。

使用场景

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

安装方式

使用 npm 或 yarn 安装

npm install tinymce
# 或者
yarn add tinymce

使用示例

HTML 文件中引入 TinyMCE 并初始化

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My TinyMCE Example</title>
  <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
  <script>
    tinymce.init({
      selector: '#mytextarea'
    });
  </script>
</head>
<body>
  <h1>My TinyMCE Example</h1>
  <textarea id="mytextarea">Hello, TinyMCE!</textarea>
</body>
</html>

常用 API 介绍

1. tinymce.init(options)

描述: 初始化 TinyMCE 编辑器并设置配置项。

参数:

options: 一个对象，包含配置选项，如选择器、插件、工具栏等。

示例:

tinymce.init({
  selector: '#mytextarea',  // 选择器
  plugins: 'lists link image',  // 插件
  toolbar: 'undo redo | styleselect | bold italic | link image | alignleft aligncenter alignright',  // 工具栏
  menubar: false  // 隐藏菜单栏
});

2. editor.setContent(html, options)

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

参数:

html: 字符串，包含要设置的 HTML 内容。
options (可选): 一个对象，包含额外的配置选项。

示例:

tinymce.activeEditor.setContent('<p>This is the new content!</p>');

3. editor.getContent(options)

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

参数:

options (可选): 一个对象，包含获取内容时的配置选项。

示例:

let content = tinymce.activeEditor.getContent();
console.log(content);  // 输出当前编辑器内容

4. editor.save()

描述: 保存编辑器内容到原始文本区域。

参数: 无

示例:

tinymce.activeEditor.save();
let textareaContent = document.getElementById('mytextarea').value;
console.log(textareaContent);  // 输出保存到文本区域的内容

5. editor.on(eventName, callback)

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

参数:

eventName: 字符串，事件名称，如 init, change, click 等。
callback: 函数，当事件触发时调用。

示例:

tinymce.activeEditor.on('change', function(e) {
  console.log('Content changed:', e.target.getContent());
});

6. editor.execCommand(command, show_ui, value)

描述: 执行编辑器命令。

参数:

command: 字符串，命令名称，如 mceInsertContent, mceToggleFormat, mceReplaceContent 等。
show_ui: 布尔值，是否显示用户界面（大部分情况为 false）。
value: 命令所需的值。

示例:

tinymce.activeEditor.execCommand('mceInsertContent', false, '<p>Inserted content</p>');

7. editor.focus()

描述: 聚焦到编辑器。

参数: 无

示例:

tinymce.activeEditor.focus();

8. editor.remove()

描述: 移除编辑器实例。

参数: 无

示例:

tinymce.activeEditor.remove();

9. editor.getContainer()

描述: 获取编辑器容器的 DOM 节点。

参数: 无

示例:

let editorContainer = tinymce.activeEditor.getContainer();
console.log(editorContainer);  // 输出编辑器容器的 DOM 节点

10. editor.setMode(mode)

描述: 设置编辑器模式，可以是 "design" 或 "readonly"。

参数:

mode: 字符串，"design"（设计模式）或 "readonly"（只读模式）。

示例:

tinymce.activeEditor.setMode('readonly');  // 设置为只读模式

高级用法

自定义插件: TinyMCE 允许开发者创建和集成自定义插件，以扩展编辑器的功能。

示例:

tinymce.PluginManager.add('myCustomPlugin', function(editor, url) {
  // 添加一个按钮
  editor.ui.registry.addButton('myCustomButton', {
    text: 'My Button',
    onAction: function() {
      // 插入自定义内容
      editor.insertContent('<p>Hello from My Custom Plugin!</p>');
    }
  });

  // 添加一个菜单项
  editor.ui.registry.addMenuItem('myCustomMenuItem', {
    text: 'My Menu Item',
    onAction: function() {
      // 插入自定义内容
      editor.insertContent('<p>Menu item clicked!</p>');
    }
  });

  return {
    getMetadata: function() {
      return {
        name: 'My Custom Plugin',
        url: 'http://example.com'
      };
    }
  };
});

// 使用自定义插件
tinymce.init({
  selector: '#mytextarea',
  plugins: 'myCustomPlugin',  // 注册插件
  toolbar: 'myCustomButton'  // 将按钮添加到工具栏
});

TinyMCE

特点

使用场景

安装方式

使用示例

常用 API 介绍

高级用法

官方资料