Vue.js

最后更新：2026-11-04 10:10:15

本节涵盖：

使用 NPM 安装 TinyMCE Vue.js 集成
使用 TinyMCE Vue.js 集成
配置编辑器
- api-key
- licenseKey
- cloud-channel
- disabled
- readonly
- id
- init
- initial-value
- inline
- model-events
- output-format
- plugins
- tag-name
- toolbar
- tinymce-script-src
表单输入绑定：v-model
事件绑定

使用 NPM 安装 TinyMCE Vue.js 集成

要安装 tinymce-vue 包。

对于 Vue.js 3.x 用户：
```
npm install "@tinymce/tinymce-vue"
```
对于 Vue.js 2.x 用户：
```
npm install "@tinymce/tinymce-vue@^3"
```

使用 TinyMCE Vue.js 集成

加载组件。

对于打包加载器用户（如 webpack、rollup 或 browserify）：

// es modules
import Editor from '@tinymce/tinymce-vue';
// commonjs require
// NOTE: default needed after require
var Editor = require('@tinymce/tinymce-vue').default;

在 HTML 文件中加载 tinymce-vue：

<script src="/path/to/tinymce-vue.min.js"></script>

将编辑器添加到应用的 components 属性中：

// This might look different depending on how you have set up your app
// but the important part is the components property
var app = new Vue({
  el: '#app',
  data: { /* Your data */ },
  components: {
    'editor': Editor // <- Important part
  },
  methods: { /* Your methods */}
})

在 template 中添加 <editor> 标签

<editor
  id="uuid"
  api-key="no-api-key"
  :init="{
    plugins: 'advlist anchor autolink charmap code fullscreen help image insertdatetime link lists media preview searchreplace table visualblocks wordcount',
    toolbar: 'undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
    height: 500,
  }"
/>

配置编辑器

编辑器接受以下属性：

<editor
  api-key="no-api-key"
  cloud-channel="8"
  :disabled=false
  :readonly=false
  id="uuid"
  :init= "{ }"
  initial-value=""
  :inline=true
  model-events= ""
  plugins=""
  tag-name="div"
  toolbar=""
  value=""
/>

对于 tinymce-vue 正常工作，不需要任何配置属性。使用 api-key 指定 Tiny Cloud API 密钥，以移除“继续使用 TinyMCE 需要有效的 API 密钥。请通知管理员检查当前 API 密钥。点击此处了解更多信息。”警告消息。

`api-key`

Tiny Cloud API 密钥。在使用 Tiny Cloud 提供 TinyMCE 编辑器的部署中是必需的。

要注册 Tiny Cloud API 密钥，请访问 Tiny Account 注册页面。要检索现有 Tiny Account 的 Tiny Cloud API 密钥，请登录并访问 Tiny Account 仪表板。

类型： String

默认值： 'no-api-key'

示例：使用 `api-key`

<editor
  api-key="no-api-key"
/>

`licenseKey`

指定 TinyMCE 许可证密钥。对于 TinyMCE 自托管部署是必需的。此属性对于仅使用 Tiny Cloud 的云部署不是必需的，因为您的云订阅自动包含商业许可证。更多信息，请参阅：License Key。

类型： String

默认值： undefined

可能值：* undefined - 当使用 API 密钥从 Tiny Cloud 加载时使用* 'gpl' - 用于使用 GPL 许可的开源项目* 'T8LK:…' - 用于商业 TinyMCE 安装（版本 8+ 必须使用此前缀）* 'GPL+T8LK:' - 用于需要高级功能同时保持 GPL 合规性的开源项目。

在混合部署（同时使用云和自托管功能）中：
您可以同时提供 API 密钥和许可证密钥
编辑器将在可用时使用云服务
如果无法联系云服务，它将自动回退到本地许可证密钥

示例：商业许可证

<editor
  licenseKey="T8LK:..."
/>

示例：使用 `licenseKey` 配合 GPL

<editor
  licenseKey="gpl"
/>

`cloud-channel`

类型： String

默认值： '8'

可能值： '8'、'8-testing'、'8-dev'、'8.10'

更改用于编辑器的 TinyMCE 构建版本，使其为以下 Tiny Cloud 通道之一：

8（默认值）：TinyMCE 当前的企业版发布。
8-testing：TinyMCE 下一个企业版发布的当前候选版本。
8-dev：TinyMCE 的夜间构建版本。
版本号如 8.10：TinyMCE 特定的企业版发布版本。

例如：

<editor
  api-key="no-api-key"
  cloud-channel="8-dev"
  :init="{ /* your other settings */ }"
/>

有关 TinyMCE 开发通道的信息，请参阅：指定从 Cloud 部署的 TinyMCE 编辑器版本 - dev、testing 和 stable releases。

`disabled`

disabled 属性可以动态地在“禁用”（只读）模式（true）和标准可编辑模式（false）之间切换编辑器。

类型： Boolean

默认值： false

可能值： true、false

示例：使用 `disabled`

<editor
  :disabled=true
/>

`readonly`

readonly 属性可以动态地在“只读”模式（true）和标准可编辑模式（false）之间切换编辑器。

类型： Boolean

默认值： false

可能值： true、false

示例：使用 `readonly`

<editor
  :readonly=true
/>

`id`

编辑器的 id。用于通过 tinymce.get('ID') 方法检索编辑器实例。

类型： String

默认值： 自动生成的 UUID

示例：使用 `id`

<editor
  id="uuid"
/>

`init`

发送给 tinymce.init 方法的对象，用于初始化编辑器。

有关 TinyMCE 选择器（tinymce.init）的信息，请参阅：Basic setup。

类型： Object

默认值： '{ }'

示例：使用 `init`

<editor
  :init="{
    plugins: 'lists link image paste help wordcount',
    toolbar: 'undo redo | blocks | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | help'
  }"
/>

`initial-value`

编辑器初始化时的初始内容。

类型： String

默认值： ' '

示例：使用 `initial-value`

<editor
  initial-value="Once upon a time..."
/>

`inline`

用于将编辑器设置为内联模式。使用 <editor :inline=true /> 等同于在 TinyMCE 选择器（tinymce.init）中设置 {inline: true}。

有关内联模式的信息，请参阅：用户界面选项 - inline 和设置内联编辑模式。

类型： Boolean

默认值： false

可选值： true, false

示例：使用 `inline`

<editor
  :inline=true
/>

`model-events`

设置 v-model 事件的触发事件。

关于可用的 TinyMCE 事件列表，请参阅：可用事件 - 编辑器事件。

类型： String

默认值： 'change keyup undo redo'。

示例：使用 `model-events`

<editor
  model-events="change input undo paste"
/>

`output-format`

用于指定通过 input 事件发出的内容的格式。这会影响与数据绑定配合使用的内容的格式。

类型： String

默认值： 'html'

可选值： 'html', 'text'

示例：使用 `output-format`

<editor
  output-format="text"
/>

`plugins`

用于包含编辑器的插件。使用 <editor plugins="lists code" /> 等同于在 TinyMCE 选择器（tinymce.init）中设置 {plugins: 'lists code'}。

有关向 TinyMCE 添加插件的信息，请参阅：向 TinyMCE 添加插件。

类型： String 或 Array

示例：使用 `plugins`

<editor
  plugins="lists code"
/>

`tag-name`

仅当 <editor :inline=true /> 时有效。用于定义内联模式下编辑器的 HTML 元素。

类型： String

默认值： 'div'

示例：使用 `tag-name`

<editor
  :inline=true
  tag-name="my-custom-tag"
/>

`toolbar`

用于设置编辑器的工具栏。使用 <editor toolbar="bold italic" /> 等同于在 TinyMCE 选择器（tinymce.init）中设置 {toolbar: 'bold italic'}。

有关设置 TinyMCE 工具栏的信息，请参阅：用户界面选项 - 工具栏。

类型： String

可选值： 请参见 TinyMCE 可用的工具栏按钮。

示例：使用 `toolbar`

<editor
  plugins="code"
  toolbar="bold italic underline code"
/>

`tinymce-script-src`

使用 tinymce-script-src 属性指定要懒加载的外部 TinyMCE 版本。

类型： String

示例：使用 `tinymce-script-src`

<editor
  tinymce-script-src="/path/to/tinymce.min.js"
/>

表单输入绑定：`v-model`

可以使用 v-model 指令创建双向数据绑定。例如：

<editor v-model="content" />

有关 v-model 和表单输入绑定的信息，请参阅：Vue.js 文档 - 表单输入绑定。

事件绑定

可以将函数绑定到编辑器事件，例如：

<editor @selectionChange="handlerFunction" />

对于 v3.x 支持的旧版 Vue（Vue 2），事件绑定的语法为：<editor v-on:selectionChange="handlerFunction"> 或 <editor @onSelectionChange="handlerFunction">。

当调用处理程序时（本例中的 handlerFunction），它将接收两个参数：

event - TinyMCE 事件对象。
editor - 对编辑器的引用。

以下事件可用：

activate
addUndo
beforeAddUndo
beforeExecCommand
beforeGetContent
beforeRenderUI
beforeSetContent
beforePaste
blur
change
clearUndos
click
contextMenu
commentChange
compositionEnd
compositionStart
compositionUpdate
copy
cut
dblclick
deactivate
dirty
drag
dragDrop
dragEnd
dragGesture
dragOver
drop
execCommand
focus
focusIn
focusOut
getContent
hide
init
input
keyDown
keyPress
keyUp
loadContent
mouseDown
mouseEnter
mouseLeave
mouseMove
mouseOut
mouseOver
mouseUp
nodeChange
objectResizeStart
objectResized
objectSelected
paste
postProcess
postRender
preProcess
progressState
redo
remove
reset
saveContent
selectionChange
setAttrib
setContent
show
submit
undo
visualAid

Vue.js

使用 NPM 安装 TinyMCE Vue.js 集成

使用 TinyMCE Vue.js 集成

配置编辑器

api-key

示例：使用 api-key

licenseKey

示例：商业许可证

示例：使用 licenseKey 配合 GPL

cloud-channel

disabled

示例：使用 disabled

readonly

示例：使用 readonly

id

示例：使用 id

init

示例：使用 init

initial-value

示例：使用 initial-value

inline

示例：使用 inline

model-events

示例：使用 model-events

output-format

示例：使用 output-format

plugins

示例：使用 plugins

tag-name

示例：使用 tag-name

toolbar

示例：使用 toolbar

tinymce-script-src

示例：使用 tinymce-script-src

表单输入绑定：v-model

事件绑定

`api-key`

示例：使用 `api-key`

`licenseKey`

示例：使用 `licenseKey` 配合 GPL

`cloud-channel`

`disabled`

示例：使用 `disabled`

`readonly`

示例：使用 `readonly`

`id`

示例：使用 `id`

`init`

示例：使用 `init`

`initial-value`

示例：使用 `initial-value`

`inline`

示例：使用 `inline`

`model-events`

示例：使用 `model-events`

`output-format`

示例：使用 `output-format`

`plugins`

示例：使用 `plugins`

`tag-name`

示例：使用 `tag-name`

`toolbar`

示例：使用 `toolbar`

`tinymce-script-src`

示例：使用 `tinymce-script-src`

表单输入绑定：`v-model`