【tinymce-vue】tinymce-vue自定义图片上传插件，且在插件中调用vue组件

最近工作项目需要基于tinymce-vue进行插件开发，需要自己写一个插入图片/视频/链接的插件，虽然说tinymce自带就有这些插件，但是这些插件的UI界面长得不是很美观，所以大佬说要自定义tinymce的这些插件。现在就基于tinymce-vue自定义图片上传的插件，来记录一下吧。
先讲一个这个关于图片上传的需求：

在点击菜单栏的插入图片，要弹出一个我们自定义的vue组件
点击图片上传后要将图片插入到编辑框里与封面图中
插入的图片，不管是在编辑框里还是在封面图里，图片的右下角要带着一个裁剪的按钮，让用户可以对图片进行裁剪
以下是我自己画的一张图

这里就简单地记录一下吧，然后写一个超简的demo，demo仅记录自定义图片上传插件，且在插件中调用vue组件，并将上传的图片插入到编辑框，就是一个超简单的模板。其他的像上传后再把图片插入后封面图跟图片编辑按钮就不做记录，需要自己拓展

如何引入tinymce-vue插件与汉化插件就不讲了。（demo地址
）
先在node_modules的tinymce文件夹下的plugins，下创建自定义的插件文件夹例如uploadImg,然后在该文件夹下创建index.js、plugin.js（最好将plugins文件夹移到node_modules外的其他目录，不然每次npm install 插件就都没了，每次都要给插件作备份）

import 'tinymce/plugins/uploadImg';  //这里需要将插件引入
//  然后再init中使用该插件plugins: ' uploadImg', // 插件toolbar: 'undo redo | uploadImg ', // 顶部排版

自定义插件（就是上面创建的plugin.js）
一开始是想怎么在外部给这个插件传参，但是发现好像不太可行，然后就改成直接在插件里创建组件了。
在插件中调用一个vue的插件，是通过Vue的render函数来做渲染的，一开始是用extend来创建组件，但是效果不好就给换成render了，然后通过组件里抛出的事件来做组件响应，从而来控制我们动态组件。

import Vue from 'vue'
import TinymceUpload from '@/components/Tinymce/TinymceUpload'  // 引入自己的自定义插件
(function () {'use strict';var global = tinymce.util.Tools.resolve('tinymce.PluginManager');var register = function (editor) {editor.addCommand('beHeader', function () {});};var Commands = {register: register};var register$1 = function (editor) {// 内有行级元素 需要加上font-size:0   由于部分按钮icon需要自定义，所以这里也定义了一个按钮iconeditor.ui.registry.addIcon('upload', '<div class="iconBox" style="font-size:0" ><img class=editIcon src="http://placehold.it/24x24" /></div>');editor.ui.registry.addButton('uploadImg', {icon: 'upload',tooltip: 'uploadImg', // 鼠标移到按钮上显示的文字提示onAction: function () {uploadEvent(editor)}});editor.ui.registry.addMenuItem('uploadImg', {icon: 'upload',text: 'uploadImg',onAction: function () {uploadEvent(editor)}});};var Buttons = {register: register$1};// 图片按钮事件let uploadEvent = function (editor) {let loader = new Vue({render:(h,con)=> {return h(TinymceUpload, {props: {panelShow: true,},on: {hidePanel(val) { //关闭上传工具弹框document.body.removeChild(content.$el)content = nullloader.$destroy()},successUpload(imgList) { //获得上传完成回调imgList.forEach((item, key) => {if (item != undefined) {editor.focus();let idName = `${new Date().getTime()}-${key}` // 给每个图片都加上一个id 时间戳加索引保证图片id唯一 加上id是为了方便后面操作，例如给插入的图片加上编辑按钮editor.selection.setContent(editor.dom.createHTML('img', {src: item,id: idName}));}})},}})}})let content = loader.$mount()document.body.appendChild(content.$el)}function Plugin() {global.add('uploadImg', function (editor) {Commands.register(editor);Buttons.register(editor);});}Plugin();}());

由于这种写法虽然说能够满足我们的业务需求，但我总觉得不太优雅，如果看到篇文章的有缘人有其他好的解决方案也可以一起来交流交流。
虽然看起来挺简单的，但是这只是一个模板，除非只是单纯的插入图片到编辑框，如果加上业务逻辑的话那就没那么简单了。
废话讲完，附上超简版的demo
，后面如果有时间我会结合一些业务需求对插件跟组件进行封装，做成一个组件库，然后以后如果有对tinymce进行插件拓展也会在这个简易版的demo上继续添加定义插件模板

【tinymce-vue】tinymce-vue自定义图片上传插件，且在插件中调用vue组件相关推荐

element显示服务器的图片,Vue+ElementUI+SpringMVC实现图片上传和回显
Vue+ElementUI+SpringMVC实现图片上传和table回显而我们也常遇到表单中包含图片上传的需求,并且需要在table中显示图片,所以这里我就讲一下结合后端的SpringMVC框架如 ...
Vue+ElementUI+SpringMVC实现图片上传和回显
Vue+ElementUI+SpringMVC实现图片上传和table回显在之前我们已经讲过了 Vue+ElementUI+SpringMVC实现分页 . 而我们也常遇到表单中包含图片上传的需求,并 ...
使用vue+elementUi+springBoot实现图片上传，图片删除，图片展示
使用vue+elementUi+springBoot实现图片上传,图片删除,图片展示环境配置准备环境使用软件图片上传图片删除图片显示所有代码均为参考,每个人的方法不一样,效果不一样,该代 ...
vue上传图片文件到服务器,vue如何将quill图片上传到服务器
通过自定义quill图片上传按钮,实现将图片上传服务器,并插入服务器地址. export default { name: "editor", props: ['content'], ...
vue3开发1：在vue3项目中集成ckeditor5编辑器，自定义图片上传，图片编辑排坑（一）
最近尝试用了vue3进行开发,没想到在使用element-plus框架的时候出现了bug(一个星期后官方修复了),所以我对在项目中集成富文本插件ckeditor5比较忐忑,而且也没有vue3中集成ck ...
quill自定义图片上传
quill是个不错的富文本编辑器,但是它的图片上传是直接将本地图片读成base64跟文本混合在一起,这显然不适合一般开发需求,我们希望插入的是一个图片url,故这里将基于vue.js实现quill的图 ...
HTML5输入框里加图片代码,做了一个input上传加号框，图片上传后显示在框中，怎么让加号消失？...
CSS代码: .div_imgall {border:1px solid blue;width:100px;height:100px;position:relative;} .input_flie { ...
vue2 + tinymce 包含自定义图片上传及视频、音频上传
安装安装时需要注意一个问题,两个包如果不适用会出现报错情况且无法使用,我这边使用的是当前这两个版本 npm install @tinymce/tinymce-vue@3.2.8 -S npm ins ...
elementui图片上传php,vue+element-ui+富文本————图片上传
最近用vue+element-ui开发一套后台管理系统,其中项目中需要用到富文本编辑器,这里总结下开发过程中遇到的坑和使用方法. 刚开始用的是vue-quill-editor结合element-ui上 ...
vue+element-ui+富文本————图片上传
最近用vue+element-ui开发一套后台管理系统,其中项目中需要用到富文本编辑器,这里总结下开发过程中遇到的坑和使用方法. 刚开始用的是vue-quill-editor结合element-ui上 ...

【tinymce-vue】tinymce-vue自定义图片上传插件，且在插件中调用vue组件

【tinymce-vue】tinymce-vue自定义图片上传插件，且在插件中调用vue组件相关推荐

最新文章

热门文章