如何在vue3.0+中使⽤tinymce及实现多图上传⽂件上传公式编辑功能相关⽂档
安装tinymce
1、安装相关依赖
yarn add tinymce || npm install tinymce -S
yarn add @tinymce/tinymce-vue || npm install @tinymce/tinymce-vue -S
在项⽬public⽂件夹下新建tinymce⽂件夹，将下载后的压缩包解压⾄此⽂件夹另将node_modules/tinymce/skins⽂件夹也复制到public/tinymce⾥
3、封装组件：在src/components下新建TEditor.vue，并写⼊以下代码
<template>
<div class="tinymce-box">
<Editor v-model="contentValue" :init="init" :disabled="disabled" @onClick="onClick" />
</div>
</template>
<script>
import api from '../api/api.js'
//引⼊tinymce编辑器
import Editor from '@tinymce/tinymce-vue'
//引⼊node_modules⾥的tinymce相关⽂件⽂件
import tinymce from 'tinymce/tinymce' //tinymce默认hidden，不引⼊则不显⽰编辑器
import 'tinymce/themes/silver' //编辑器主题，不引⼊则报错
import 'tinymce/icons/default' //引⼊编辑器图标icon，不引⼊则不显⽰对应图标
// 引⼊编辑器插件（基本免费插件都在这⼉了）
import 'tinymce/plugins/advlist' //⾼级列表
import 'tinymce/plugins/anchor' //锚点
import 'tinymce/plugins/autolink' //⾃动链接
import 'tinymce/plugins/autoresize' //编辑器⾼度⾃适应，注：plugins⾥引⼊此插件时，Init⾥设置的height将失效
import 'tinymce/plugins/autosave' //⾃动存稿
import 'tinymce/plugins/charmap' //特殊字符
import 'tinymce/plugins/code' //编辑源码
import 'tinymce/plugins/codesample' //代码⽰例
import 'tinymce/plugins/directionality' //⽂字⽅向
import 'tinymce/plugins/emoticons' //表情
import 'tinymce/plugins/fullpage' //⽂档属性
import 'tinymce/plugins/fullscreen' //全屏
import 'tinymce/plugins/help' //帮助
import 'tinymce/plugins/hr' //⽔平分割线
import 'tinymce/plugins/image' //插⼊编辑图⽚
import 'tinymce/plugins/importcss' //引⼊css
import 'tinymce/plugins/insertdatetime' //插⼊⽇期时间
import 'tinymce/plugins/link' //超链接
import 'tinymce/plugins/lists' //列表插件
import 'tinymce/plugins/media' //插⼊编辑媒体
import 'tinymce/plugins/nonbreaking' //插⼊不间断空格
import 'tinymce/plugins/pagebreak' //插⼊分页符
import 'tinymce/plugins/paste' //粘贴插件
import 'tinymce/plugins/preview'//预览
import 'tinymce/plugins/print'//打印
import 'tinymce/plugins/quickbars' //快速⼯具栏
import 'tinymce/plugins/save' //保存
import 'tinymce/plugins/searchreplace' //查替换
// import 'tinymce/plugins/spellchecker' //拼写检查，暂未加⼊，不建议使⽤
import 'tinymce/plugins/tabfocus' //切⼊切出，按tab键切出编辑器，切⼊页⾯其他输⼊框中
import 'tinymce/plugins/table' //表格
import 'tinymce/plugins/template' //内容模板
import 'tinymce/plugins/textcolor' //⽂字颜⾊
import 'tinymce/plugins/textpattern' //快速排版
import 'tinymce/plugins/toc' //⽬录⽣成器
import 'tinymce/plugins/visualblocks' //显⽰元素范围
import 'tinymce/plugins/visualchars' //显⽰不可见字符
import 'tinymce/plugins/wordcount' //字数统计
export default {
name: 'TEditor',
components: {
Editor
},
props: {
value: {
type: String,
default: ''
},
disabled: {
type: Boolean,
default: false
},
plugins: {
type: [String, Array],
default: 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount textpattern autosave ' },
toolbar: {
type: [String, Array],
default: 'fullscreen 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 hr pagebreak insertdatetime print preview | code selectall searchreplace visualblocks | indent2em lineheight formatpainter axupimgs'
},
},
data(){
return {
init: {
language_url: '/tinymce/langs/zh_CN.js', //引⼊语⾔包⽂件
language: 'zh_CN', //语⾔类型
skin_url: '/tinymce/skins/ui/oxide', //⽪肤：浅⾊
// skin_url: '/tinymce/skins/ui/oxide-dark',//⽪肤：暗⾊
plugins: this.plugins, //插件配置
toolbar: lbar, //⼯具栏配置，设为false则隐藏
// menubar: 'file edit', //菜单栏配置，设为false则隐藏，不配置则默认显⽰全部菜单，也可⾃定义配置--查看 tinymce.ax-z/configure/editor-appearance.php --搜索“⾃定义菜单”
fontsize_formats: '12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px', //字体⼤⼩
font_formats: '微软雅⿊=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif；苹果苹⽅=PingFang SC,Microsoft YaHei,sans-serif；宋体=simsun,serif；仿宋体=FangSong,serif;⿊体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black= lineheight_formats: "0.5 0.8 1 1.2 1.5 1.75 2 2.5 3 4 5", //⾏⾼配置，也可配置成"12px 14px 16px 20px"这种形式
height: 400, //注：引⼊autoresize插件时，此属性失效
placeholder: '在这⾥输⼊⽂字',
branding: false, //tiny技术⽀持信息是否显⽰
resize: false, //编辑器宽⾼是否可变，false-否,true-⾼可变，'both'-宽⾼均可，注意引号
// statusbar: false, //最下⽅的元素路径和字数统计那⼀栏是否显⽰
elementpath: false, //元素路径是否显⽰
content_style: "img {max-width:100%;}", //直接⾃定义可编辑区域的css样式
// content_css: '/tinycontent.css', //以css⽂件⽅式⾃定义可编辑区域的css样式，css⽂件需⾃⼰创建并引⼊
// images_upload_url: '/apib/api-upload/uploadimg', //后端处理程序的url，建议直接⾃定义上传函数image_upload_handler，这个就可以不⽤了
// images_upload_base_path: '/demo', //相对基本路径--关于图⽚上传建议查看--tinymce.ax-z/
general/upload-images.php
paste_data_images: true, //图⽚是否可粘贴
images_upload_handler: (blobInfo, success, failure) => {
if(blobInfo.blob().size/1024/1024>2){
failure("上传失败，图⽚⼤⼩请控制在 2M 以内")
}else{
let params=new FormData()
params.append('file',blobInfo.blob())
let config={
headers:{
"Content-Type":"multipart/form-data"
}
}
this.$axios.post(`${api.baseUrl}/api-upload/uploadimg`,params,config).then(res=>{
if(de==200){
success(res.data.msg) //上传成功，在成功函数⾥填⼊图⽚路径
}else{
failure("上传失败")
}
}).catch(()=>{
failure("上传出错，服务器开⼩差了呢")
})
}
}
},
contentValue: this.value
}
},
watch: {
value (newValue) {
},
contentValue (newValue) {
this.$emit('input', newValue)
},
},
created(){
},
mounted(){
tinymce.init({})
},
methods: {
// 添加相关的事件，可⽤的事件参照⽂档=> github/tinymce/tinymce-vue => All available events
onClick(e){
this.$emit('onClick', e, tinymce)
},
//清空内容
clear(){
},
css文件怎么写},
}
</script>
<style lang="less">
</style>
注册及使⽤组件
在main.js中全局注册
import TEditor from '@/components/TEditor.vue'
Vueponent('TEditor',TEditor)
在相关页⾯使⽤
<TEditor ref="editor" v-model="value" />
注：单图上传插件调⽤接⼝不同，上传图⽚和上传⽂件的两个函数都有调⽤，所以上传⽂件函数⾥也要添加对图⽚上传的判断和处理
表情插件⽆法成功加载
出现如下报错，是因为引⼊路径出问题，引⼊不到⽂件包导致的，需要⾃⼰配置路径
Uncaught SyntaxError: Unexpected token '<'
Failed to load emoticons: Script at URL
"xxxx/static/js/plugins/emoticons/js/emojis.js" did not call
`tinymce.Resource.add('icons', data)` within 1 second
解决⽅法
1、将node_modules/tinymce/plugins/emoticons⽂件夹复制到public/tinymce⾥
2、在如上代码⾥的init⾥添加⼀⾏代码emoticons_database_url:'/tinymce/emoticons/js/emojis.js'，见图
3、在如上代码⾥的plugins和toolbars⾥分别添加emoticons来引⼊表情插件，见图
4、刷新或重启项⽬即可
添加⾸⾏缩进功能
1、前往上⽅⽂档⾥下载intent2em插件
2、将解压后的⾸⾏缩进插件intent2em复制到public/tinymce⽂件夹下，见图
3、在indent2em⾥新建index.js并写⼊以下代码
// Exports the "indent2em" plugin for usage with module loaders
// Usage:
// CommonJS:
// require('tinymce/plugins/indent2em')
// ES2015:
// import 'tinymce/plugins/indent2em'
require('./plugin.js');
4、在components/TEditor.vue⾥引⼊⾸⾏缩进插件，并在plugins和toolbar⾥注册该插件，见图import '../../public/tinymce/indent2em' //⾸⾏缩进
5、刷新或重启项⽬即可使⽤
格式刷
⽅法和⾸⾏缩进功能⼀样
解决css引⼊报警告的问题
解决
由于项⽬路径的部署，之前的默认css引⼊可能会出现问题并报警告，所以建议⾃⼰引⼊⼀份css以替代之前的
1、在public/tinymce⽂件夹下新建tinycontent.css
2、在src/components/TEditor.vue的init⾥引⼊tinycontent.css，并将content_style注释掉（因为引⼊css⽂件，content_style字段就不需要了）content_css: `${api.editorUrl}tinymce/tinycontent.css`, //以css⽂件⽅式⾃定义可编辑区域的css样式，css⽂件需⾃⼰创建并引⼊
3、刷新或重启项⽬即可，警告消失
实现多图上传功能
1、前往上⽅⽂档⾥下载多图上传插件axupimgs
2、将解压后的多图上传插件axupimgs复制到public/tinymce⽂件夹下
3、在axupimgs⽂件夹下新建index.js并写⼊以下代码
// Exports the "axupimgs" plugin for usage with module loaders
// Usage:
// CommonJS:
// require('tinymce/plugins/axupimgs')
// ES2015:
// import 'tinymce/plugins/axupimgs'
require('./plugin.js');
4、打开axupimgs/plugin.js，配置以下⼏⾏代码（为什么配置：因为这⼏⾏代码的作⽤是引⼊多图上传弹框upfiles.html⽂件，
若多图上传功能有弹框，但是弹框内⽆内容，则可能是此路径未引⼊正确，此时则需要再配置⼀下）
配置前：
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论