vue2 + tinymce 包含自定义图片上传及视频、音频上传

安装

安装时需要注意一个问题，两个包如果不适用会出现报错情况且无法使用，我这边使用的是当前这两个版本

npm install @tinymce/tinymce-vue@3.2.8 -S
npm install tinymce@5.10.0 -S

使用

在node_modules下找到 tinymce 文件并整个拷贝到public下
在components中创建公用组件（如下，注请求接口地址需修改为自己的）

<template><div class="tinymce-editor"><!-- 同一页面使用多个编辑器时必须传入id参数，否则只有第一个编辑器会生效--><editor :id="editorId" v-model="editorValue" :disabled="disabledIn" :init="editorInit" /></div>
</template><script>
/*
使用public本地库
*/
// 引入tinymce主件
import tinymce from '../../public/tinymce/tinymce'
// 引入tinymce-vue组件
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/icons/default/icons'
// 必须引入主体才能汉化和显示
import '../../public/tinymce/themes/silver'
import '../../public/tinymce/zh_CN'
// import '../../../public/tinymce/icons/default/icons'
// 引入富文本编辑器主题的js和css
import '../../public/tinymce/themes/silver/theme.min'
import '../../public/tinymce/skins/ui/oxide/skin.min.css'
// 扩展插件
import '../../public/tinymce/plugins/image'
import '../../public/tinymce/plugins/link'
import '../../public/tinymce/plugins/code'
import '../../public/tinymce/plugins/table'
import '../../public/tinymce/plugins/lists'
import '../../public/tinymce/plugins/wordcount' // 字数统计插件
import '../../public/tinymce/plugins/media' // 插入视频插件
import '../../public/tinymce/plugins/template' // 模板插件
import '../../public/tinymce/plugins/fullscreen'
import '../../public/tinymce/plugins/paste'
import '../../public/tinymce/plugins/preview'
import '../../public/tinymce/plugins/contextmenu'
import '../../public/tinymce/plugins/textcolor'
import '../../public/tinymce/plugins/indent2em' // 首行缩进
// 首行缩进插件需单独下载后将下载文件放在plugins下
export default {name: 'Tinymce',components: {Editor},props: {type: {type: Number,default: 0},height: {type: Number,default: 500},id: {type: String,default: 'tinymceEditor'},value: {type: String,default: ''},disabledIn: {type: Boolean,default: false},plugins: {type: [String, Array],default: 'link lists image code table wordcount media fullscreen preview paste indent2em'},toolbar: {type: [String, Array],default: 'fontselect | bold italic underline strikethrough | link unlink image media | undo redo | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | indent2em outdent indent blockquote | code | removeformat'}},data() {return {editorInit: {language_url: '../../public/tinymce/zh_CN.js',language: 'zh_CN',skin_url: '/public/tinymce/skins/ui/oxide/',content_css: '/public/tinymce/skins/content/default/content.css',height: this.height,content_style: '* { padding:0; margin:0; } img {max-width:100% !important; display: block; } video { max-width:100% !important; display: block; }',plugin_preview_width: 375, // 预览宽度plugin_preview_height: 668,lineheight_val:'1 1.1 1.2 1.3 1.35 1.4 1.5 1.55 1.6 1.75 1.8 1.9 1.95 2 2.1 2.2 2.3 2.4 2.5 2.6 2.7 2.8 3 3.1 3.2 3.3 3.4 4 5',fontsize_formats: '8px 10px 11px 12px 13px 14px 15px 16px 17px 18px 24px 36px',font_formats:"微软雅黑='微软雅黑';宋体='宋体';黑体='黑体';仿宋='仿宋';楷体='楷体';隶书='隶书';幼圆='幼圆';Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=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=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",plugins: this.plugins,indent2em_val: '2em', // 首行缩进powerpaste_word_import: 'merge',toolbar: this.toolbar,paste_data_images: true,statusbar: true, // 底部的状态栏menubar: false, // 最上方的菜单branding: false, // 水印“Powered by TinyMCE”convert_urls: false, // 去除URL转换// 图片自定义上传images_upload_handler: (blobInfo, success, failure) => {const fileData = new FormData()fileData.append('files', blobInfo.blob())// 调用上传接口uploadImgs(fileData).then(({ data, status, msg }) => {if (status == 'success') {// 这里就是返回的图片地址// 将返回的url传入到success回调函数中success(data[0].fileUrl)} else {failure(msg)}})},file_picker_callback: (callback, value, meta) => {const _tath = thisvar filetype = '.pdf, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .mp3, .mp4'var materialType = ''switch (meta.filetype) {case 'image':filetype = '.jpg, .jpeg, .png, .gif'materialType = '1'breakcase 'media':filetype = '.mp3, .mp4'breakcase 'file':default:}var input = document.createElement('input')input.setAttribute('type', 'file')input.setAttribute('accept', filetype)input.click()input.onchange = function() {var file = this.files[0]if (file.type == 'video/mp4' || file.type.indexOf('video') != -1) {materialType = '3'} else if (file.type == 'audio/mpeg' || file.type == 'audio/mp3' || file.type.indexOf('audio') != -1) {materialType = '2'}if (materialType == '1') {// 图片上传const fileData = new FormData()fileData.append('files', file)uploadImgs(fileData).then(({ data, status, msg }) => {if (status == 'success') {// 成功则将返回的url传入callback回调函数中// callback 接受两个参数， url 和 图片名称// 注意图片名称必须要传callback(data[0].fileUrl, { title: file.name })}})} else {// 音频、视频上传const fileData = new FormData()fileData.append('files', file)fileData.append('materialType', materialType)uploadMedias(fileData).then(({ data, code, msg }) => {if (code == 200) {callback(data[0].fileUrl, { title: file.name })}})}}}},editorId: this.id,newValue: ''}},computed: {editorValue: {get() {return this.value},set(val) {this.newValue = val}}},watch: {newValue(newValue) {this.$emit('input', newValue)}},mounted() {},beforeDestroy() {this.clear()},methods: {clear() {this.editorValue = ''}}
}
</script><style lang="scss" scoped>
</style>

单页面基本使用

<template><div><!-- 同一页面使用多个编辑器时必须传入id参数，否则只有第一个编辑器会生效--><my-tinymce :id="'Content'" v-model="content"></my-tinymce></div>
</template><script>
import myTinymce from '@/components/tinymce.vue'
export default {components: {myTinymce},data() {return {content: ''}}
}
</script>

注：如果在上传视频时出现两个视频重复的视频组件可以看下另外一篇文章vue + tinymce 插入视屏的坑_later遇见她的博客-CSDN博客

vue2 + tinymce 包含自定义图片上传及视频、音频上传相关推荐

php拍视频上传,php视频拍照上传头像功能实现代码分享
现在手机拍照很火,那么如何使用手机拍照并上传头像呢?原因很简单,就是数据传递,首先手机传递照片信息,既不是post传递也不是get函数传递,这个另外一种数据如果要在php中实现视频拍照我们需要借助于 ...
PHP实现给视频加图片水印,怎么在视频画面上加图片？如何给视频添加自己的图片作为水印？视频添加图片水印的方法...
今天就是周一啦,昨天周末大家有没有跟好友去玩呢~反正小编是跟同学聚会去了,聚会主题:胖.哈哈哈,不过小编可不跟他们一样只会长胖,小编可是瘦瘦瘦的呢,偷偷的告诉你们,小编减肥瘦了三十斤哦,嘻嘻.好啦,废 ...
html 前端优化上传视频,前端上传组件Plupload使用---上传大视频(分片上传)
上传视频到服务器 1.引入js插件: 2.html页面如图: 上传视频: 上传视频支持AVI.wma.rmvb.rm.flash.mp4.mid.3GP等格式 3.js代码 $(function ( ...
大文件切片上传、视频切片上传转m3u8播放
一.故事前不久干项目,涉及到在线学习,简单来说就是对文章.视频进行在线学习,这个时候问题出现了,就是在上传视频的时候,速度很是慢,除此之外,视频播放也是卡的鸭皮,然后就开始疯狂网上搜刮知识,最终解决 ...
ftp服务器批量上传文件,bat批量上传ftp文件到服务器
bat批量上传ftp文件到服务器内容精选换一换 CDM支持周期性自动将新增文件上传到OBS,不需要写代码,也不需要用户频繁手动上传即可使用OBS的海量存储能力进行文件备份.这里以CDM周期性备份F ...
往服务器上传文件的软件,上传云服务器文件的软件
上传云服务器文件的软件内容精选换一换若用户私钥泄露,用户可通过管理控制台使用新的密钥对替换弹性云服务器内的公钥,替换完成后,用户需要使用本地保存的新密钥对的私钥登录该弹性云服务器,无法使用替换前 ...
华为服务器上传文件,云服务器上传文件方式
云服务器上传文件方式内容精选换一换安装传输工具在本地主机和Windows云服务器上分别安装数据传输工具,将文件上传到云服务器.例如QQ.exe.在本地主机和Windows云服务器上分别安装数据传 ...
怎么把文件上传云服务器上,如何把文件上传到云服务器上
如何把文件上传到云服务器上内容精选换一换将文件上传至Windows云服务器一般会采用MSTSC远程桌面连接的方式.本节为您介绍本地Windows计算机通过远程桌面连接,上传文件至Windows云 ...
将文件传到免费服务器上,将文件传到服务器上
将文件传到服务器上内容精选换一换支持将华为云服务器上的音视频文件通过内网方式上传到与服务器在同一区域的视频点播服务中,但您需要先将服务器当前使用的DNS切换为华为云的内网DNS,具体请参见怎样切 ...

vue2 + tinymce 包含自定义图片上传及视频、音频上传

安装

使用

vue2 + tinymce 包含自定义图片上传及视频、音频上传相关推荐

最新文章

热门文章