vue引入
npm install @tinymce/tinymce-vue
npm install tinymce
复制文件夹
复制node_modules下tinymce到src/assets下(如果有public,也可以选择public)
复制完这个文件夹,这个插件就可以删除了
npm uninstall tinymce
下载语言包
选择Chinese (China) 进行下载
assets/tinymce中新建目录langs,将语言包zh_CN.js放到该文件夹下
index.ejs或者index.html body中添加
<script type="text/javascript" src="/assets/tinymce/tinymce.min.js"></script>
拷贝目录
使用拷贝插件,将assets/tinymce拷贝到dist目录下,这么做的原因是因为上面配置了tinymce文件夹位置,
加载资源文件文件时,会访问ip地址:端口号/assets/tinymce/。。。
所以需要把tinymce拷贝到dist目录下
npm install copy-webpack-plugin@4.0.1 --save
webpack.dev.config.js、webpack.prod.config.js
const CopyWebpackPlugin = require('copy-webpack-plugin')
const path = require('path');
plugins: [
new CopyWebpackPlugin(
[
{
from: path.join(__dirname, 'src/assets/tinymce'),
to: path.join(__dirname, 'dist/assets/tinymce')
}
],
{
copyUnmodified: true
}
),
]
新建editor.vue
<template>
<div>
<vue-tinymce
ref="tinymce"
@input="$emit('input', content)"
v-model="content"
:init="setting">
</vue-tinymce>
</div>
</template>
<script>
import vueTinymce from '@tinymce/tinymce-vue'
export default {
components: {
vueTinymce
},
props: {
value: {
type: String,
default: ''
},
plugins: {
type: [String, Array],
default: "lists image media table wordcount code fullscreen help toc fullpage autosave nonbreaking insertdatetime visualchars visualblocks searchreplace spellchecker pagebreak link charmap paste print preview hr anchor"
},
toolbar: {
type: [String, Array],
default(){
return [
'newdocument undo redo | formatselect visualaid|cut copy paste selectall| bold italic underline strikethrough |codeformat blockformats| superscript subscript | forecolor backcolor | alignleft aligncenter alignright alignjustify | outdent indent | removeformat | code bullist numlist | lists image media table link |fullscreen help toc fullpage restoredraft nonbreaking insertdatetime visualchars visualblocks searchreplace spellchecker pagebreak anchor charmap pastetext print preview hr',
]
}
}
},
data() {
return {
content: this.value,
setting: {
height: 500,
statusbar: false, // 隐藏编辑器底部的状态栏
language: "zh_CN",//语言
plugins: this.plugins,//插件
toolbar: this.toolbar,//工具栏
paste_data_images: true, // 允许粘贴图像
images_upload_handler: (blobInfo, success, failure) => {
const img = 'data:image/jpeg;base64,' + blobInfo.base64()
success(img)
},
}
}
},
watch: {
value(val) {
if (val !== this.content) {
this.content = val;
}
}
}
}
</script>
页面中使用
<template>
<editor v-model="content" ref="editor"></editor>
</template>
<script>
import Editor from '../_comps/editor'
export default {
components: {
Editor
},
data() {
return {
content:''
}
}
</script>
自定义图片上传功能
images_upload_handler: (blobInfo, success, failure) => this.uploadImg(blobInfo, success, failure)
methods: {
async uploadImg(blobInfo, success, failure) {
let formData = new FormData();
formData.append('file', blobInfo.blob(), blobInfo.filename());
// 发送ajax返回的url
let uri= await this.uploadFile(formData);
success(uri)
},
uploadFile(formData) {
return axios.post("/api/editor/upload", formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(r => {
let data = r.data;
return data
});
},
}
上传视频
// 想要哪一个图标提供本地文件选择功能,参数可为media(媒体)、image(图片)、file(文件)
file_picker_types: 'media',
file_picker_callback: (cb, value, meta) => this.uploadMedia(cb, value, meta)
methods: {
uploadMedia(cb, value, meta) {
//当点击meidia图标上传时,判断meta.filetype == 'media'有必要,因为file_picker_callback是media(媒体)、image(图片)、file(文件)的共同入口
if (meta.filetype === 'media') {
//创建一个隐藏的type=file的文件选择input
let input = document.createElement('input');
input.setAttribute('type', 'file');
input.onchange = (e) => {
this.upload(e.currentTarget.files[0], cb)
}
//触发点击
input.click();
}
},
async upload(file, cb) {
let formData = new FormData();
formData.append('file', file);
let uri= await this.uploadFile(formData);
//cb()回调函数,将mediaLocation显示在弹框输入框中
cb(uri, {title: file.name});
},
//uploadFile同上
}
关于富文本编辑器内视频不能预览,解决办法暂时只能是通过修改源码的方式,请替换tinymce/plugins/media/plugin.min.js下载链接:https://download.csdn.net/download/qq_35134375/12998656
文件链接
https://download.csdn.net/download/qq_35134375/12998767