vue中添加Tinymce富文本编辑器
1.在 package.json 中安装插件
"@tinymce/tinymce-vue": "^2.1.0",
"tinymce": "^5.1.5"添加后，重新install
2.封装组件也可以直接用，封装是为了后期的延展性做考虑
// 根据需求，自己手动记得预览功能
预览
手动引入需要的插件
import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/silver/theme'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/textcolor'
import 'tinymce/plugins/preview'
import 'tinymce/plugins/media'在data里面对编辑器进行定义，因为上传方式有两种，写了两个 上传方法当时写在 methods里面，但是调用的时候，调不到，有可能是我写的有问题，可以自己进行尝试
init: {
fontsize_formats: '8px 10px 12px 14px 16px 18px', // 第二步
language_url: '../../static/tinymce/langs/zh_CN.js',
language: 'zh_CN',
skin_url: '../../static/tinymce/skins/ui/oxide',
height: 500,
content_css: ['../../static/tinymce/skins/content/default/content.css'],
accept: '',
// eslint-disable-next-line standard/object-curly-even-spacing
branding: false,
selector: '#textarea',
paste_data_images: false,
file_picker_types: 'media',
media_live_embeds: true,
plugins: ' link table lists image code colorpicker textcolor contextmenu ', // media
toolbar: ' preview bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | undo redo | code uploadpic',
audio_template_callback: function (data) {
return ''
},
setup: (editor) => {
// eslint-disable-next-line eqeqeq
editor.ui.registry.addButton('preview', {
text: '预览',
onAction: (_) => {
this.preview()
}
})
},
file_picker_callback: (cb, value, meta) => {
// 当点击meidia图标上传时,判断meta.filetype == 'media'有必要，因为file_picker_callback是media(媒体)、image(图片)、file(文件)的共同入口
// eslint-disable-next-line eqeqeq
if (meta.filetype == 'media') {
// 创建一个隐藏的type=file的文件选择input
let input = document.createElement('input')
input.setAttribute('type', 'file')
input.onchange = function () {
let file = this.files[0]// 只选取第一个文件。如果要选取全部，后面注意做修改
uploadPic(file, cb)
/* let xhr, formData;
xhr = new XMLHttpRequest();
xhr.open('POST', self.apiUrl);
xhr.withCredentials = self.credentials;
xhr.upload.onprogress = function (e) {
// 进度(e.loaded / e.total * 100)
};
xhr.onerror = function () {
//根据自己的需要添加代码
console.log(xhr.status);
return;
};
xhr.onload = function () {
let json;
if (xhr.status < 200 || xhr.status >= 300) {
console.log('HTTP 错误: ' + xhr.status);
return;
}
json = JSON.parse(xhr.responseText);
//假设接口返回JSON数据为{status: 0, msg: "上传成功", data: {location: "/localImgs/1546434503854.mp4"}}
if(json.status==0){
//接口返回的文件保存地址
let mediaLocation=json.data.location;
//cb()回调函数，将mediaLocation显示在弹框输入框中
cb(mediaLocation, { title: file.name });
}else{
console.log(json.msg);
return;
}
}; */
}
// 触发点击
input.click()
}
async function uploadPic(blobInfo, cb) {
let formData = new FormData()
// 服务端接收文件的参数名，文件数据，文件名
// formData.append('file', blobInfo)
// let res = await upload.upload(formData)
// let data = res.data
// eslint-disable-next-line eqeqeq
// if (data && data.code == 0) {
// cb(data.data, {title: blobInfo.name})
// return data.data
// } else {
// }
}
},
images_upload_handler: (blobInfo, success, failure) => {
if (blobInfo.blob().size > 1024 * 1024) {
failure('文件体积过大,不大于1M')
} else {
uploadPic(this.type)
}
async function uploadPic(type) {
let formData = new FormData()
// 服务端接收文件的参数名，文件数据，文件名
// formData.append('file', blobInfo.blob())
// let res
// if (type === 'preview') {
// res = await pagemanager.uoloadImage(formData)
// } else {
// res = await upload.upload(formData)
// }
// let data = res.data
// // eslint-disable-next-line eqeqeq
// if (data && data.code == 0) {
// success(data.data)
// } else {
// failure('上传失败')
// }
}
}
}在对富文本进行初始化
components: {Editor},
created() {
tinymce.init(this.init)
},
* 我开始安装的的版本过高，引入插件后，无法加载出来编辑器，后来把版本降低到现在使用的这个，就可以加载出
文档和度娘也有提到，版本跟插件的关系，版本不能超过5