在vue中使用tinymce富文本编辑器+tinymce富文本编辑器插入图片+自定义菜单按钮封装+vue-tinymce富文本

1.安装

npm install tinymce -Snpm install @packy-tang/vue-tinymce

2.把node_modules\tinymce里面的tinymce文件夹复制到public文件夹下面，并在html中引入tinymce.min.js，如下图

3.在mian.js中引入@packy-tang/vue-tinymce

4.封装组件代码

<template><div><vue-tinymce  :key="tinymceFlag" v-model="Editortext" :setting="setting"   @change="change"  :setup="setting.setup" /></div>
</template>
<script>export default {name: "tinymce",props: {content: {//父组件传进来的默认值type: String,default: "",},itemkey: {//多个富文本用于区分type: String,default: "",},custom: {//添加自定义菜单按钮type: String,default: "",},},activated() {this.tinymceFlag++;//组件缓存的时候用于再次加载，不然有些时候再次加载会出现只显示一个textarea的问题},data() {let _this = this;return {tinymceFlag: 1,Editortext: this.content,setting: {menubar: false,//上面的菜单隐藏selector: `#Editor${_this.itemkey}`,//多个富文本的时候加上itemkey用于区分toolbar: `insertfile undo redo | charmap bold italic underline strikethrough subscript  superscript | fontsizeselect| inserttable table tableprops deletetable cell row| alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | ${_this.custom} image `,plugins: "table charmap  preview image  ",language: "zh_CN", //本地化设置statusbar: false,//隐藏最底部的状态栏height: 500,//默认高度image_advtab: true,setup: function (editor) {editor.on("input blur undo redo execCommand", (e) => {//多个触发事件获取最新值var msg = _this.Editortext.toString();//获取带html的值if (_this.itemkey != undefined && _this.itemkey != "") {//多个富文本时返回值给父组件_this.$emit("message", {key: _this.itemkey,msg: msg,});} else {//单个富文本返回值给父组件_this.$emit("message", msg);}});//添加自定义的菜单按钮if (_this.custom.indexOf("menuDateButton") != -1) {editor.ui.registry.addMenuButton("menuDateButton", {//添加菜单按钮text: "公式模板",fetch: function (callback) {var items = [];let formula=[{name:'公式1',code:'1'},{name:'公式2',code:'2'},{name:'公式3',code:'3'},]formula.map((resitem) => {items.push({type: "menuitem",text: resitem.name,onAction: function (_) {editor.insertContent(resitem.name);editor.input();},});});callback(items);},});}},// 图片异步上传处理函数images_upload_handler: (blobInfo, success, failure) => {//本地base64图片var reader=new FileReader();reader.onload=function(e){//reader.result就是转换成的base64success(reader.result)}  reader.readAsDataURL(blobInfo.blob())//把图片上传到服务器// var formData = new FormData();// formData.append('images',blobInfo.blob(), blobInfo.filename());// // _this.$api.uploadScenicFace这个是我调用后台图片上传接口的函数// _this.$api.uploadScenicFace(formData, _this.token, function(data) {//     // 图片上传成功以后调用success,图片就可以在富文本编辑器中显示了//     success(data.url);// });},},};},watch: {content: {immediate: true,deep: true,handler(newValue, oldValue) {// 这里是从列表页编辑时做的内容注入，没有需要可以不写if (this.content == undefined) {this.Editortext = "";} else {this.Editortext = this.content;}},},},mounted() {},methods: {change(editor) {//这里只有输入框改变的时候才会触发，比如自定义模板选择的时候就触发不了},},
};
</script>

5.调用代码

<template><div ><VueTinymceUeditor :content="'editor1'" itemkey="editor1" custom='menuDateButton' @message="message"></VueTinymceUeditor><VueTinymceUeditor :content="'editor2'" itemkey="editor2" custom='menuDateButton' @message="message"></VueTinymceUeditor></div>
</template><script>
import VueTinymceUeditor from "@/components/VueTinymceUeditor/index.vue"
export default {name: 'App',components: {VueTinymceUeditor},methods: {message(content) {console.log(content)}},
}
</script><style>
</style>

更多功能配置可以到官方网站上进行查看tinymce | Docs | TinyMCE

中文文档：TinyMCE中文文档中文手册

我的另外一种使用方法链接：在vue中使用tinymce富文本编辑器+tinymce富文本编辑器插入图片_vip.khan的博客-CSDN博客_tinymce富文本

在vue中使用tinymce富文本编辑器+tinymce富文本编辑器插入图片+自定义菜单按钮封装+vue-tinymce富文本相关推荐

使用Typora编辑器编写md文档插入图片方法
使用Typora编辑器编写md文档插入图片方法截图粘贴到文档中: 图片右键,选择"复制图片到"将图片复制到md文档相对路径: 将图片路径修改为相对路径,并替换斜杆为"/ ...
iOS 富文本风格NSMutableParagraphStyle、定制UITextView插入图片和定制复制
问题一开发过程中,经常会遇到动态计算行高的问题, - (CGRect)boundingRectWithSize:(CGSize)size options:(NSStringDrawingOption ...
python办公自动化（六）python-pptx创建PPT、操作幻灯片、文本框、绘制图表、插入图片、读取内容
python-pptx 在日常生活中经常使用到ppt来进行展示,可以使用python-pptx中的命令来操作ppt,通过代码进行创建.python-pptx是用于创建和更新PowerPoint文件的p ...
vue 中使用 QRCode.js 链接转二维码带中间图片
前言项目中需要一个链接转二维码的功能,找了一下决定使用QRCode.js(很久以前的插件了) 下载引入1. <div id="qrcode" ref="qrco ...
Vue中通过el-upload组件实现上传前预览本地图片
1.实现效果如下图所示用户选择本地待上传的图片,选择成功后,上传组件隐藏,呈现本地预览组件,单击图片并实现图片的放大呈现 2.template(相当于html)部分的代码如下代码实现逻辑: 在el ...
vue中怎么根据不同的（分屏模式）调整【自定义不同视频布局】？
html: 视频布局部分分屏弹窗部分 js: 根据获取到的第几个视频,用js来调整video_item,meet_left父元素,videos视频盒子元素的宽高以及位置 handleSelect ( ...
vue中怎样实现弹出层动画效果？由上而下渐渐显示---封装成复用组件
子组件: <template><div class="home"><!-- 首先将要过渡的元素用transition包裹,并设置过渡的name --& ...
vue鼠标右键自定义菜单_使用Vue自定义指令实现右键菜单
前言浏览器里右键时会有一个默认的菜单,在我的开源项目中正好有自定义右键菜单的需求,在npm库找了下与之相关的包,发现都是以组件形式实现的,感觉那种做法太过繁琐. 于是,我就想着能不能像vue的内置指 ...
如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表
本文首发:<如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表> 使用 Chart.js 在 Vue 搭建的后台管理工具里添加炫酷的图表,是所有数据展示类后台必备的功 ...
vue鼠标移动上去提示_关于如何处理vue中鼠标悬停事件的详细说明
最后,在查看结果中,发现滑过鼠标事件将触发该事件,但它将闪烁并清除. 当鼠标停留在单元格上时鼠标滑过事件,遮罩层将消失并重复出现. 开关. 为了缓解这种情况,setTimeout也用于延迟显示和隐藏在 ...

在vue中使用tinymce富文本编辑器+tinymce富文本编辑器插入图片+自定义菜单按钮封装+vue-tinymce富文本

1.安装

2.把node_modules\tinymce里面的tinymce文件夹复制到public文件夹下面，并在html中引入tinymce.min.js，如下图

3.在mian.js中引入@packy-tang/vue-tinymce

4.封装组件代码

5.调用代码

在vue中使用tinymce富文本编辑器+tinymce富文本编辑器插入图片+自定义菜单按钮封装+vue-tinymce富文本相关推荐

最新文章

热门文章