最近在搞富文本,经过对比我选择了tinymce,也遇到很多七七八八的问题,现在终于搞好了
第一、 安装
我现在的版本
“@tinymce/tinymce-vue”: “^3.2.2”,
“tinymce”: “^5.4.2”,
npm install @tinymce/tinymce-vue -S,npm install tinymce -S
第二、 从node_modules复制我们想要的东西
下载的时候可以先在static下面建个目录tinymce,下载tinymce完成后在node_modules 中找到 tinymce/skins目录,将其复制到static\tinymce目录下面,
我这里用的是脚手架4.3.1的我就放在public里面的static
第三、引用语言包
因为这个是英文的为了方便可以引用中文包语言包下载
第四、引入组件
<template>
<div class="tinymce-editor">
<editor id="tinymce" v-model="myValue" :init="init" @onClick="onClick"></editor>
</div>
</template>
<script>
import tinymce from 'tinymce/tinymce';
import Editor from '@tinymce/tinymce-vue';
import 'tinymce/themes/silver/theme';
import 'tinymce/icons/default/icons';
import 'tinymce/plugins/image';
import 'tinymce/plugins/media';// 插入视频插件
import 'tinymce/plugins/table';// 插入表格插件
import 'tinymce/plugins/lists';// 列表插件
import 'tinymce/plugins/wordcount';// 字数统计插件
export default {
name:'tinymceEditor',
components: { Editor },
props: {
value: {
type: String,
default: ''
},
// 基本路径,默认为空根目录,如果你的项目发布后的地址为目录形式,
// 即abc.com/tinymce,baseUrl需要配置成tinymce,不然发布后资源会找不到
baseUrl: {
type: String,
default: ''
},
disabled: {
type: Boolean,
default: false
},
plugins: {
type: [String, Array],
default: 'lists image media table wordcount'
},
toolbar: {
type: [String, Array],
default: 'undo redo | formatselect | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat'
}
},
data() {
return {
//初始化配置
init: {
language_url: '/static/tinymce/langs/zh_CN.js',
language: 'zh_CN',
skin_url: '/static/tinymce/skins/ui/oxide', // skin路径
height: 300, // 编辑器高度
branding: false, // 是否禁用“Powered by TinyMCE”
menubar: true, // 顶部菜单栏显示
plugins: this.plugins,
toolbar: this.toolbar,
//此处为图片上传处理函数,这个直接用了base64的图片形式上传图片,
//如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
// images_upload_handler: (blobInfo, success) => {
// const img = 'data:image/jpeg;base64,' + blobInfo.base64();
// success(img);
// }
},
myValue: this.value
};
},
mounted() {
tinymce.init({});
},
methods: {
//添加相关的事件,可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events
//需要什么事件可以自己增加
onClick(e) {
this.$emit('onClick', e, tinymce);
},
//可以添加一些自己的自定义事件,如清空内容
clear() {
this.myValue = '';
}
},
watch: {
value(newValue) {
this.myValue = newValue;
},
myValue(newValue) {
this.$emit('input', newValue);
}
}
};
</script>
使用方法
<TinymceEditor ref="editor" :value="msg" @onClick="onClick" ></TinymceEditor>
<button @click="clear">清空内容</button>
就这么简单但是我还是搞了好久好久呜呜呜呜小菜鸡的悲哀啊
第五、最后来说下我遇到问题
1、首先我的样式出不来主要是我没有那个样式包,于是我苦苦寻找,终于皇天不负有心人然我找到了
之前看别人的文章都是引用这个
import 'tinymce/themes/modern/theme'
但是我下载的包里没有这个,改成就这个就好了
import 'tinymce/themes/silver/theme';
2、第二问题是出来了都是not found的没有截图忘记了,控制台还有这个Uncaught SyntaxError: Unexpected token ‘<’
你就看控制台后面是什么js缺少什么你就引入什么就完美解决了
import 'tinymce/icons/default/icons';//为了解决icons的问题
// 下面是一些插件你需要什么就放什么可以去官网的插件库去找
import 'tinymce/plugins/image';
import 'tinymce/plugins/media';// 插入视频插件
import 'tinymce/plugins/table';// 插入表格插件
import 'tinymce/plugins/lists';// 列表插件
import 'tinymce/plugins/wordcount';// 字数统计插件
3、还有最后一个问题
就是skin_url这个地址的问题
写这个地址文本都显示不出来
skin_url: '/static/tinymce/skins/lightgray',
改成这个就好啦
skin_url: '/static/tinymce/skins/ui/oxide', // skin路径