安装tinymce
npm install tinymce -S
npm install @tinymce/tinymce-vue -S
npm install --save @packy-tang/vue-tinymce
挪动文件
tinymce-vue是tinymce官方提供的一个vue组件,可以直接拿过来使用,但是必须要到官网注册获取api-key,否则只有一段时间的试用期。所以你不想购买的话就老老实实编写自己的组件。
这两个组件安装完之后,在public目录下新建文件夹static,目录建好后,找到node_modules文件夹下的tinymce目录,将tinymce目录复制到我们创建的static文件夹内,如下图所示
配置中文语言包
现在一般install导入都会自带中文语言包 如果如图没有zh_CN.JS的话就需要自己下载
下载中文语言包
点击–>现在中文语言包
下载后解压 拿到zh_CN.js 放在如上图所示位置 没有文件夹就自己新建
编写组件
页面代码
<template>
<vue-tinymce
v-model="content"
:setting="setting"
:setup="setup"
@change="change"/>
</template>
script代码
// 不建议直接挂载到main.js中 所以写在组件中
import Vue from 'vue'
import tinymce from 'tinymce'
import VueTinymce from '@packy-tang/vue-tinymce'
Vue.prototype.$tinymce = tinymce
Vue.use(VueTinymce)
// 找自己的本地路径
import '@/assets/tinymce/langs/zh_CN.js'
props 定义的属性
props: {
// 富文本内容
value: {
type: [String, Object],
default: ''
},
// 高度,默认450px
height: {
type: [String, Number],
default: 450
},
// 不存在autoresize插件(默认):控制的是用户通过编辑器右下角控件可拖拽的最大最小高度。
// 使用autoresize插件:控制编辑器自动伸缩的最大最小高度。
// 注:此参数默认设置的是可编辑区域,而不是整个编辑器
maxHeight: [String, Number],
// 1级菜单
menubar: {
type: [String, Boolean],
default: 'file edit insert view format table tools help'
},
// 模板
templates: {
type: Array,
default() {
/* 示例
{title: 'Some title 1', description: 'Some desc 1', content: 'My content'},
{title: 'Some title 2', description: 'Some desc 2', url: 'print.php'}
*/
return []
}
}
data中 定义的属性 都是关于富文本的配置
data() {
return {
setting: {
// 本地语言
language: 'zh_CN',
// 隐藏右下角技术支持
branding: false,
// 编辑器高度
height: this.height,
max_height: this.maxHeight,
// 只读属性
readonly: this.readonly,
// 占位文本
placeholder: this.placeholder,
// 工具栏模式 floating/sliding/scrolling/wrap
toolbar_mode: 'wrap',
// 1级菜单
menubar: this.menubar,
// 插件
plugins: 'advlist anchor autolink autosave code codesample charmap emoticons \
fullscreen help hr image imagetools indent2em insertdatetime link lists \
media nonbreaking noneditable pagebreak paste print preview \
quickbars searchreplace table template wordcount',
// HTML源码 撤销 恢复 恢复上次草稿
// 剪切 复制 粘帖 粘贴为文本
// 文字颜色 背景颜色 粗体 斜体 下划线 删除线 插入/编辑链接 描点
// 左对齐 居中 右对齐 两端对齐 减少缩进 增加缩进
// 格式 区块 字体 字号
// 符号列表 序号列表
// 引用 下标 上标 清除格式
// 表格 插入/编辑图片 插入/编辑媒体 特殊符号 表情 水平分割线 分页符 插入日期/时间 打印 预览
// 全屏
// 百度地图 首行缩进 设置行高 格式刷 Ax多图片上传 代码示例 不间断空格 查找 模板 显示区块边框 字数统计
/*toolbar: 'code undo redo restoredraft | \
cut copy paste pastetext | \
forecolor backcolor bold italic underline strikethrough link anchor | \
alignleft aligncenter alignright alignjustify outdent indent | \
styleselect formatselect fontselect fontsizeselect | \
bullist numlist | \
blockquote subscript superscript removeformat | \
table image media charmap emoticons hr pagebreak insertdatetime print preview | \
fullscreen | \
bdmap indent2em lineheight formatpainter axupimgs codesample nonbreaking searchreplace template visualblocks wordcount',*/
toolbar: 'code undo redo restoredraft | \
cut copy paste pastetext | \
forecolor backcolor bold italic underline strikethrough link anchor | \
alignleft aligncenter alignright alignjustify outdent indent indent2em lineheight | \
hr nonbreaking pagebreak insertdatetime template searchreplace | \
styleselect formatselect fontselect fontsizeselect | \
bullist numlist | \
blockquote subscript superscript removeformat | \
table image media charmap emoticons codesample | \
wordcount print preview fullscreen',
// 快速导航
quickbars_selection_toolbar: 'removeformat | bold italic underline strikethrough | fontsizeselect forecolor backcolor',
// 文字大小列表
fontsize_formats: '11px 12px 14px 16px 18px 24px 36px 48px 56px 72px',
// 字体列表
font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;\
宋体=SimSun,serif;\
新宋体=NSimSun,serif;\
仿宋=FangSong,serif;\
仿宋_GB2312=FangSong_GB2312,serif;\
黑体=SimHei,sans-serif;\
Arial=arial,helvetica,sans-serif;\
Arial Black=arial black,avant garde;\
Comic Sans MS=comic sans ms,sans-serif;\
Courier New=courier new,courier;\
Times New Roman=times new roman,times;\
Verdana=verdana,geneva;\
Webdings=webdings;\
Wingdings=wingdings,zapf dingbats;',
// 模板
templates: this.templates,
// 粘帖图片base64
paste_data_images: true,
// 图片上传
images_upload_handler: (blobInfo, success, failure) => {
success('data:image/jpeg;base64,' + blobInfo.base64())
},
/*// 工具栏分组
toolbar_groups: {
formatting: {
text: '文字格式',
tooltip: 'Formatting',
items: 'bold italic underline | superscript subscript',
},
alignment: {
icon: 'align-left',
tooltip: 'alignment',
items: 'alignleft aligncenter alignright alignjustify',
},
}*/
}
}
}
computed 定义的属性
computed: {
content: {
get() {
return this.value
},
set(val) {
this.$emit('update:value', val)
}
}
}
methods
methods: {
setup() {
//
},
change() {
this.$emit('change', this.content)
}
}
style样式代码
<style lang="stylus">
.tox-tinymce
border 1px solid #E4E7ED
.tox .tox-menubar + .tox-toolbar,
.tox .tox-menubar + .tox-toolbar-overlord .tox-toolbar__primary,
.tox:not([dir=rtl]) .tox-toolbar__group:not(:last-of-type)
border-color #E4E7ED
</style>
完整代码
报错
如果是这个报错就是路径问题,检查自己的路径是否正确