tinymce官网:http://tinymce.ax-z.cn/
vue2语法
前期准备
npm/cnpm/yarn install tinymce vue @tinymce/tinymce-vue -S
{
"@tinymce/tinymce-vue": "^3.0.1",
"tinymce": "^5.8.2",
"vue": "2.6.10",
}
配置页面 - 项目public公共部分存放tinymce的中英翻译,皮肤等静态资源;
从node_model中直接赋值到项目中
组件页面
<template>
<div class="tinymce-editor">
<Editor
:id="tinymceId"
v-model="myValue"
:init="init"
:disabled="disabled"
@onClick="onClick"
/>
</div>
</template>
<script>
import axios from 'axios'
import tinymce from 'tinymce/tinymce' // tinymce默认hidden,不引入不显示
import Editor from '@tinymce/tinymce-vue' // 编辑器引入
import 'tinymce/themes/silver/theme' // 编辑器主题
import 'tinymce/icons/default' // 引入编辑器图标icon,不引入则不显示对应图标
import 'tinymce/plugins/advlist' // 高级列表
import 'tinymce/plugins/autolink' // 自动链接
import 'tinymce/plugins/link' // 超链接
import 'tinymce/plugins/image' // 插入编辑图片
import 'tinymce/plugins/lists' // 列表插件
import 'tinymce/plugins/charmap' // 特殊字符
import 'tinymce/plugins/media' // 插入编辑媒体
import 'tinymce/plugins/wordcount' // 字数统计
// import 'tinymce/plugins/axupimgs'
const fonts = [
'宋体=宋体',
'微软雅黑=微软雅黑',
'新宋体=新宋体',
'黑体=黑体',
'楷体=楷体',
'隶书=隶书',
'Courier New=courier new,courier',
'AkrutiKndPadmini=Akpdmi-n',
'Andale Mono=andale mono,times',
'Arial=arial,helvetica,sans-serif',
'Arial Black=arial black,avant garde',
'Book Antiqua=book antiqua,palatino',
'Comic Sans MS=comic sans ms,sans-serif',
'Courier New=courier new,courier',
'Georgia=georgia,palatino',
'Helvetica=helvetica',
'Impact=impact,chicago',
'Symbol=symbol',
'Tahoma=tahoma,arial,helvetica,sans-serif',
'Terminal=terminal,monaco',
'Times New Roman=times new roman,times',
'Trebuchet MS=trebuchet ms,geneva',
'Verdana=verdana,geneva',
'Webdings=webdings',
'Wingdings=wingdings,zapf dingbats'
]
export default {
components: {
Editor
},
props: {
// 内容
value: {
type: String,
default: ''
},
tinymceId: {
type: String,
default: 'tinymce'
},
// 是否禁用
disabled: {
type: Boolean,
default: false
},
// 插件
plugins: {
type: [String, Array],
default: 'advlist autolink link image lists charmap media wordcount'
},
// 工具栏
toolbar: {
type: [String, Array],
default:
'undo redo | formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table'
}
},
data() {
return {
myValue: this.value,
init: {
selector: '#tinymce',
language_url: process.env.VUE_APP_BASE_PUBLIC_URL + '/tinymce/langs/zh-cn.js', // 汉化路径是自定义的,一般放在public或static里面
language: 'zh_CN',
skin_url: process.env.VUE_APP_BASE_PUBLIC_URL + '/tinymce/skins/', // 皮肤
plugins: this.plugins, // 插件
toolbar: this.toolbar,// 工具栏