vue2 引入 TinyMCE
安装引入
npm install --save tinymce "@tinymce/tinymce-vue@^3"
基础引入示例：
<template>
<div id="my-editor">
<img alt="Vue logo" src="./assets/logo.png">
<editor
:init="{
plugins: 'lists link image table code help wordcount'
}"
/>
</div>
</template>
<script>
import Editor from '@tinymce/tinymce-vue'
export default {
name: 'my-editor',
components: {
'editor': Editor
}
}
</script>
https://www.tiny.cloud/docs/tinymce/6/vue-pm/
基本设置
-
语言包配置
-
TinyMCE 四个常见配置选项：
-
选择器配置（必需）
-
插件配置
-
工具栏配置
-
菜单和菜单栏配置
-
选择器配置
tinymce.init({
selector: 'textarea', // 指定页面上通过 TinyMCE 进行编辑的元素 可以匹配id： selector: 'textarea#default'
// 将可编辑区域的宽度和高度（以像素为单位）设置为数值
width: 600,
height: 300,
});
语言包配置
默认英文，需要更改中文为语言首选项。配置完成后将更改工具栏、菜单项、按钮和工具提示中的语言。
-
-
将下载到的语言包
js文件解压缩到path/to/tinymce/langs/文件夹中。 -
配置语言选项参数为 语言包下载页中，中文对应语言代码：zh-CN。
tinymce.init({
selector: 'textarea',
language: "zh_CN",
language_url: "/tinymce/langs/zh_CN.js",
directionality: 'rtl'// 指定文本排列方向
});
可以使用language 和
注意语言包路径：
语言包存放的 tinymce 目录需要放在 public 文件夹下，这里的url路径不包含 public 。文件存放位置为 /public/tinymce/langs/zh_CN.js language_url 为 /tinymce/langs/zh_CN.js
插件配置
功能通过使用插件进行扩展
tinymce.init({
selector: 'textarea',
plugins: 'advlist link image lists'
// 启用列表 ( lists)、高级列表 ( advlist)、链接 ( link) 和图像 ( image) 插件。
});
插件配置
提供了一组默认的工具栏控件，可以使用该 toolbar 选项覆盖。
tinymce.init({
selector: 'textarea',
toolbar: 'undo redo | styles | bold italic | alignleft aligncenter alignright alignjustify | outdent indent'
});
该toolbar选项定义工具栏按钮的存在、顺序和分组。
使用空格分隔的列表来指定 TinyMCE 的工具栏按钮。使用“|”创建工具栏组 按钮名称之间的管道字符。
更多：
菜单和菜单栏配置
有两个菜单选项：menubar和menu。menubar用于定义菜单的存在和顺序，例如File、Edit和View。menu用于定义菜单项的存在和顺序，例如新建文档、全选和源代码。
menubar
显示File、Edit和View菜单
tinymce.init({
selector: 'textarea',
menubar: 'file edit view'
});
menu
创建Edit仅包含Undo、Redo和Select all项的菜单
tinymce.init({
selector: 'textarea', // change this value according to your HTML
menu: {
edit: { title: 'Edit', items: 'undo, redo, selectall' }
}
});
自定义菜单
要创建一个标题为“测试”的菜单，请为菜单提供一个标识符，并为菜单提供一个带有 title 和items 的对象。
例如：
tinymce.init({
selector: 'textarea', // change this value according to your HTML
menu: {
happy: { title: '测试', items: 'code' }
},
plugins: 'code', // required by the code menu item
menubar: '测试' // adds happy to the menu bar
});
默认菜单控件
默认菜单如下：
tinymce.init({
selector: 'textarea', // change this value according to your HTML
menu: {
file: { title: 'File', items: 'newdocument restoredraft | preview | export print | deleteallconversations' },
edit: { title: 'Edit', items: 'undo redo | cut copy paste pastetext | selectall | searchreplace' },
view: { title: 'View', items: 'code | visualaid visualchars visualblocks | spellchecker | preview fullscreen | showcomments' },
insert: { title: 'Insert', items: 'image link media addcomment pageembed template codesample inserttable | charmap emoticons hr | pagebreak nonbreaking anchor tableofcontents | insertdatetime' },
format: { title: 'Format', items: 'bold italic underline strikethrough superscript subscript codeformat | styles blocks fontfamily fontsize align lineheight | forecolor backcolor | language | removeformat' },
tools: { title: 'Tools', items: 'spellchecker spellcheckerlanguage | a11ycheck code wordcount' },
table: { title: 'Table', items: 'inserttable | cell row column | advtablesort | tableprops deletetable' },
help: { title: 'Help', items: 'help' }
}
});
一些菜单项需要插件，例如table菜单和项目需要table插件。
样式设置
设置可编辑区域的样式content_css。
content_css: 'css/content.css',
编辑模式
TinyMCE 具有三种主要的集成模式：经典的完整编辑模式、内联编辑模式和无干扰模式。
https://www.tiny.cloud/docs/tinymce/6/use-tinymce-inline/
经典编辑模式：
特点：富文本样式不受外部全局样式影响
内联编辑模式：
使用selector指定的元素进行编辑
使用编辑器初始化页面的css样式表
tinymce -vue
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<editor
:init="{
plugins: 'lists link image table code help wordcount'
}"
/>
</div>
</template>
<script>
import Editor from '@tinymce/tinymce-vue'
export default {
name: 'app',
components: {
'editor': Editor
}
}
</script>
FAQ
使用npm安装，也提示域名未在tiny cloud 中指定，不使用 tinymce 的cloud 服务，需要下载自托管版本：https://www.tiny.cloud/get-tiny/self-hosted/ 复制到 public 文件夹下 本地引用
