vue+element-ui使用 tinymce富文本编辑器步骤（上传图片+上传本地视频）以及遇到的一些bug
前言
最近接触前端，发现富文本使用频率比较高，在网上找了很多种方法也看了很多资料，现在来总结最近新使用的富文本编辑器tinymce（tinymce的介绍大家可以百度哈~）
tinymce的中文官网：tinymce的中文官网
前端项目都基于vue来开发的（本人是前端新手，如有不对地方，还请各位大佬指点）
以前用的都是vue-quill-editor富文本插件， 这个插件还不错，是vue自带的，比较轻巧，适用于功能不是很大，简单的富文本编辑器，等有时间再写一篇vue-quill-editor的使用心得,啰嗦这么久，进入正题啦~~（这是一篇很详细的教程，一步一步来一点都不难）
使用方法：
- 下载插件：
npm install tinymce -S - 安装之后，在 node_modules 中找到 tinymce/skins 目录，然后将 skins 目录拷贝到 static 目录下
但是我是使用 vue-cli 3.x 构建的 typescript 项目，所以就放到 public 目录下
- 新建一个根目录tinymce，因为tinymce 默认是英文界面，所以还需要下载一个中文语言包 也放到tinymce目录下
图片展示：
- 初始化数据
import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/modern/theme'
import Editor from '@tinymce/tinymce-vue'
如果找不到 import 'tinymce/themes/modern/theme'
可以替换成 import 'tinymce/themes/silver/theme'
上传图片+本地视频的是
tinymce-vue 是一个组件，需要在 components 中注册，然后直接使用
注册组件：
<template>
<div class="myEditor">
<div class="tinymce-editor-wrapper">
<editor
v-model="content"
:disabled="disabled"
:init="options"
initial-value="请输入内容..."
/>
</div>
</div>
</template>
<script>
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver'
//引入图片上传服务器的接口
import { uploadOss } from "@/api/system/oss";
// 引入编辑器插件plugins
import 'tinymce/plugins/advlist'
import 'tinymce/plugins/autolink'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/link'
import 'tinymce/plugins/image'
import 'tinymce/plugins/charmap'
import 'tinymce/plugins/print'
import 'tinymce/plugins/preview'
import 'tinymce/plugins/anchor'
import 'tinymce/plugins/searchreplace'
import 'tinymce/plugins/visualblocks'
import 'tinymce/plugins/fullscreen'
import 'tinymce/plugins/insertdatetime'
import 'tinymce/plugins/media'
import 'tinymce/plugins/table'
//引入工具栏图标
import 'tinymce/icons/default'
// 自定义工具栏
const toolbar =
'undo redo | insert | styleselect | fontselect bold italic forecolor backcolor | alignleft aligncenter alignright | outdent indent | link image media | fullscreen'
// 引入插件
const plugins = [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks fullscreen',
'insertdatetime media table'
]
// 字体
const fonts =
'Andale Mono=andale mono,times; Arial=arial,helvetica,sans-serif; 黑体=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,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: ''
},
disabled: {
type: Boolean,
default: false
}
},
data() {
return {
content: this.value,
options: {
language_url: '/tinymce/zh_CN.js', // 语言包的路径
language: 'zh_CN', // 语言
skin_url: '/tinymce/skins/ui/oxide', // 浅色
plugins: plugins, // 插件
toolbar: toolbar, // 工具栏
font_formats: fonts, // 字体
height: 900, // 编辑器高度
branding: false, // 是否禁用“Powered by TinyMCE”
menubar: true, // 顶部菜单栏显示
resVideo:'', //上传视频的url
uploaded:false,//有没有上传完成
file_picker_types: 'media',
images_upload_handler: (blobInfo, success, failure) => {
this.handleImageAdded(blobInfo, success, failure)
},
//be used to add custom file picker to those dialogs that have it.
file_picker_callback: (callback, value, meta) => {
this.open(callback, value, meta)
}
}
}
},
watch: {
value(val) { //父子组建双向绑定
this.content = val
},
content(val) {
this.$emit('input', val)
}
},
mounted() {
tinymce.init({})
},
created() {
},
methods: {
open(callback, value, meta){
if (meta.filetype == 'media') {
let input = document.createElement('input');//创建一个隐藏的input
input.setAttribute('type', 'file');
let that = this;
input.onchange = function(){
let file = this.files[0];//选取第一个文件
that.uploadVideo(file,'media'); // 上传视频拿到url
console.log('dongbug',that.options.uploaded)
setTimeout(()=>{
if(that.options.uploaded){
console.log(that.resVideo,'true')
callback(that.resVideo) //将url显示在弹框输入框中
}else{
setTimeout(()=>{
//设置几秒后再去取数据
console.log(that.resVideo,'false')
callback(this.resVideo)
},5000)
}
},5000)
}
//触发点击
input.click();
}
},
// 插入视频的方法
uploadVideo(file,type){
const formdate = new FormData()
formdate.set('file',file)
console.log(formdate)
uploadOss(formdate).then(response =>{
if (response.code == 200) {
if(type == 'media') {
this.resVideo = response.url
this.options.uploaded = true
}
console.log('dsdsdoooooooo', this.options.uploaded)
}
})
},
// 插入图片的方法
handleImageAdded(blobInfo, success, failure) {
console.log('图片',blobInfo.blob())
let file = blobInfo.blob()
const isLt8M = file.size / 1024 / 1024 < 20
if (!isLt8M) {
this.$message.error('图片大小不能超过 20MB!')
return
}
const formdate = new FormData()
formdate.set('file',blobInfo.blob())
console.log('图片',formdate)
uploadOss(formdate).then(response =>{
if (response.code == 200) {
let url = response.url
success(url)
} else {
failure(response.message)
this.$message.error(response.message)
}
})
},
async info() { //回显内容
console.log(this.mubanId)
let { data } = await getDetail({
templateId: this.mubanId
})
this.content = data
}
}
}
</script>
<style lang="scss" scoped></style>
<style>
.tox-silver-sink {
z-index: 13000 !important;
}
</style>
引入组件：（根据自己存放组件的路径来哦）
import TinymceEditor from '@/components/Tinymce/index'
注册组件：
components: {TinymceEditor },
使用组件：
<tinymce-editor
v-model="form.tables"
v-if="open"
/>
说一下v-if=“open ”这块
因为我的富文本使用在弹出框，每次一点击修改就会显示和上传一样的内容，而且不可以修改
原因是因为弹窗是父组件，富文本是子组件，弹窗关闭的时候子组件没有触发销毁钩子函数，既然没有销毁，那么第二次打开弹窗的时候也就不会再次初始化，所以父组件的弹窗每次打开关闭、打开关闭，显示都是第一次的富文本内容。
解决方法：
所以要在使用富文本组件上加上v-if，使子组件随弹窗关闭进行销毁，随弹窗的打开，进行初始化
代码如下：
<el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="内容" prop="tables">
<tinymce-editor
v-model="form.tables"
v-if="open"
/>
</el-form-item>
</el-form>
</el-dialog >
还有遇到一种情况，富文本会出现这种情况:
工具栏的icon都显示not found
解决方法：
在tinymce组件中引入这段代码：import 'tinymce/icons/default'
就可以啦~
图片上传
还有个问题是图片的上传：（图片上传的方法）
inymce 提供了 images_upload_url等 api 让用户配置上传图片的相关参数
images_upload_handler 自定义一个上传方法
这个方法会提供三个参数：blobInfo, success, failure
其中 blobinfo 是一个对象，包含上传文件的信息：
success和failure 是函数，上传成功的时候向 success 传入一个图片地址，失败的时候向 failure 传入报错信息
视频上传
有了图片上传就少不了视频上传（编辑器一开始是没有本地视频上传的按钮，只有填写视频url）
需要引入对应的插件media
import 'tinymce/plugins/media'
const toolbar =
'undo redo | insert | styleselect | fontselect bold italic forecolor backcolor | alignleft aligncenter alignright | outdent indent | link image media | fullscreen'
// 引入插件
const plugins = [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks fullscreen',
'insertdatetime media table'
]
在data加上这四行
resVideo:'', //上传视频的url
uploaded:false,//有没有上传完成
file_picker_types: 'media',
file_picker_callback: (callback, value, meta) => {
this.open(callback, value, meta)
}
this.open是上传视频的方法（返回三个参数）
注意这一块
如果不加定时器，上传视频返回的uploaded会延迟，所以就会进入判断的else方法，url就不会显示到input框中
这些都设置完成后就会出现一个可以的上传本地文件的图标（同理也可以上传图片和文件）
但是预览效果为图片，不能预览
解决方法
找到tinymce的原文件下的media>plugin.js文件
找到下面源码、注释掉
第二步：创建一个全局变量来存video的src
第三步：判断video标签 获取src值赋值给videoSource（写在注释的那一段代码那里）：
if(node.name === 'video' && hasLiveEmbeds(editor) && global$8.ceFalse){
console.log('videoSource===', videoSource)
videoSource = ''
if(node.attributes['map'] && node.attributes['map'].src){
videoSource = node.attributes['map'].src
}else{
for(var ii=0;ii<node.attributes.length;ii++){
if(node.attributes[ii].name == "src"){
videoSource = node.map.node.attributes[ii].value
}
}
}
if(node.firstChild && node.firstChild.value){
var elel=node.firstChild && node.firstChild.value
var objE = document.createElement("div");
objE.innerHTML = elel;
var dom = objE.getElementsByTagName('source')[0]
videoSource = dom.getAttribute('src')
}
node.replace(createPreviewIframeNode(editor, node));
}
第四步：在createPreviewIframeNode 方法中有两处修改：修改previewNode.attr中src:videoSource || node.attr(‘src’), 增加播放属性controls: ‘controls’。
var createPreviewIframeNode = function (editor, node) {
var previewWrapper;
var previewNode;
var shimNode;
var name = node.name;
previewWrapper = new global$7('span', 1);
previewWrapper.attr({
'contentEditable': 'false',
'style': node.attr('style'),
'data-mce-object': name,
'class': 'mce-preview-object mce-object-' + name
});
retainAttributesAndInnerHtml(editor, node, previewWrapper);
previewNode = new global$7(name, 1);
previewNode.attr({
src: videoSource || node.attr('src'), // 修改
controls: 'controls', // 新增
allowfullscreen: node.attr('allowfullscreen'),
style: node.attr('style'),
class: node.attr('class'),
width: node.attr('width'),
height: node.attr('height'),
frameborder: '0'
});
shimNode = new global$7('span', 1);
shimNode.attr('class', 'mce-shim');
previewWrapper.append(previewNode);
previewWrapper.append(shimNode);
return previewWrapper;
};
这样就可以正常显示了：
效果图
好了tinymce富文本的使用就写到这，如有不足，欢迎补充~~~
思路来源：参考链接，https://www.cnblogs.com/wisewrong/p/8985471.html
视频上传思路来源：https://blog.csdn.net/web_527965583_ld/article/details/107299416
718
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
