富文本编辑器

Tinymce

富文本编辑器。

使用方式

有两种：

• 在原生的基础上二次开发，可以适应多种场景。

  使用 提供的 tinymce：

  import tinymce from 'tinymce';
  onMounted(()=>{
      tinymce.init({
        ...// 各种自定义配置
      })

• 直接使用 结合 react 或 vue 的组件 。（看官网）

  react：www.tiny.cloud/docs/tinymc...

  vue：www.tiny.cloud/docs/tinymc...

接下来是对第一种的笔记。

富文本编辑器的使用规律

本身的富文本编辑器的核心的js文件，负责把 编辑器创建出来。

后续的很多插件，皮肤css,图标，等都是从静态资源目录引入的。

常见操作：

基本操作

使用原生的 tinmce

初始化：tinymce.init（）
tinymce.init({
      license_key: 'gpl',  // 添加这一行，表明使用 GPL 开源许可
      selector:'#editor',// 表示挂在的元素
    })
// 在 onMounted 阶段

隐藏 不必要的 部分

tinymce.init{
  ...
  menubar:false,// 菜单栏
  toolbar:false,// 工具栏
  statusbar:false,// 状态栏
  ...
}

自定义样式

• skin 控制皮肤。默认是加载 静态资源目录下：/skin/ui/content.min.css 和 skin.min.css 文件。或者 通过 skin_url 导入自定义的皮肤(自己写content.min.css 和 skin.min.css 文件)。
• skin 皮肤控制的是 编辑器的 外围。content 是编辑器的内容区。内容去是一个 iframe 组件的，不属于 项目结构，所以不能 直接在 edit组件的 style 标签 中写样式进行设置。
• 可以通过content_css 定义内容区域样式。
• 图标的样式也是使用 icons_url 进行导入。

tinymce.init{
  ...
  skin_url:"myskin",
  content_css:"/mycontent.css",
  icons_url:"/myicon"
  ...
}

中文化

把界面的语言转换成中文。

• 在官网的 语言包里面下载 中文语言包。
• 将包解压到 静态资源目录 public中。
• 用 language:"zh_CN"导入。

各种语言都是一样。

自选工具栏中的内容以及自定义排序

分别使用：

• menu，menubar 定义 菜单栏。

  官网：www.tiny.cloud/docs/tinymc...

  menubar:设置有哪些菜单
  menu:配置具体的菜单项。

• toolbar 定义 工具栏。

  官网：www.tiny.cloud/docs/tinymc...

  给一个字符窜，定义工具栏里面包含的工具组件。`用空格隔开，竖线分组`
  不知道有哪些工具？到官网文档搜 'toolbar'。

tinymce 进阶需求

将编辑器和 js 进行配合。

首先拿到 编辑器的实例：

tinymce.activeEditor

获取输入内容

前端获取编辑器里的内容，然后发送给后端，是很常见的操作 。

通过编辑器的实例 的 getContent方法获取。

• 默认获取到的是 HTML

• 传递配置对象进行文本的设置。

  const editor = tinymce.activeEditor // 实例
  const content = editor.getContent({format:'text'}) // 文本

设置输入内容

通过编辑器的实例 的setContent方法设置编辑器的内容。

• 内容可以是 text 纯文本，也可以是 HTML...

获取选中的内容，进行指定的替换

const editor = tinymce.activeEditor // 实例
const selected = editor.selection // 选中的对象
console.log('selected1:',selected.getContent())// 获取选中的内容
selected.setContent('还不错')// 直接修改选中的内容。

---

tinymce 常见二次开发

常见的业务场景：

在外面点击一个按钮，对编辑器中选中的内容进行一些处理，比如改变颜色，改变样式，在外部的模态框中显示等等。

一些自带插件推荐

官网：www.tiny.cloud/docs/tinymc...

使用插件：

1. 将插件的文件引到 public/plugins/目录下。
2. 使用 plugins 注册插件。字符串形式，多个插件用空格隔开。
3. 在 toolbar 上添加对应的工具。

通过plugins配置需要使用的插件，会自动到 静态资源目录 的 /pluginds/ 下寻找对应插件。

注册了插件后，别忘了在工具栏 toolbar 里展示出来，不然看不见。

Tinymce 常见的自带插件:

• Image：上传图片
• Link：链接
• Code：代码
• Table：表格

开发自己的工具栏按钮（组件）

编写一些自己的功能tool，并且加到工具栏上。

1. 可以用写插件的方式，将插件添加到 /piblic/plugins/目录下 ，然后引入使用。

2. 可以在setup函数里面，直接使用 addButton方法进行添加功能按钮。这样更加简单，方便快捷。

接下来使用 addButton方法的方式。

editor.ui.registry.addButton(名字，配置对象)

官网：www.tiny.cloud/docs/tinymc...

示例：实现一个给选中的文本变成红色的 toolButton：

onMounted(()=>{
    tinymce.init({
      ...
      toolbar:"bold |copy cut| red| fontsize fontfamily",
      // setup 的参数是编辑器实例
      setup(editor){
        editor.ui.registry.addButton('red',{
            icon:"help",
            onAction:()=>{
              const _text = editor.selection.getContent()
              // 给选中的内容添加颜色
              editor.selection.setContent(`<span style="color:red">${_text}<span/>`)
            }
          }
        )
      }
    })
})