vue中使用富文本编辑器wangEditor及踩坑

因为上传图片的问题使用过了各种富文本，最后发现还是这个比较好用。分享记录一下。

安装

npm install wangeditor --save

新建一个wangeditor.vue（组件），代码内容如下

<template lang="html"><div class="editor"><div ref="toolbar" class="toolbar"></div><div ref="editor" class="text"></div></div>
</template><script>import E from 'wangeditor'let editor = nullexport default {name: 'Editorbar',data () {return {info_: null,isChange:false,}},model: {prop: 'value',event: 'change'},props: {value: {type: String,default: ''},isClear: {type: Boolean,default: false}},watch: {// isClear (val) {//   // 触发清除文本域内容//   if (val) {//     editor.txt.clear()//     this.info_ = null//   }// },// value (val) {//   // 使用 v-model 时,设置初始值//   editor.txt.html(val)// },value: function(value) {// if (value !== this.editor.txt.html()) {//   this.editor.txt.html(this.value)// }if(!this.isChange){editor.txt.html(this.value);}this.isChange= false;}},mounted () {this.seteditor()editor.txt.html(this.value)},methods: {seteditor () {var that = thiseditor = new E(this.$refs.toolbar, this.$refs.editor)editor.customConfig.uploadImgShowBase64 = true // base 64 存储图片editor.customConfig.uploadImgServer = 'http://106.15.186.177:8090/DrugRehabilitationSystem/api/file/uploadFile'// 配置服务器端地址editor.customConfig.uploadImgHeaders = {     }// 自定义 headereditor.customConfig.uploadFileName = 'image' // 后端接受上传文件的参数名editor.customConfig.uploadImgMaxSize = 2 * 1024 * 1024 // 将图片大小限制为 2Meditor.customConfig.uploadImgMaxLength = 1 // 限制一次最多上传 3 张图片editor.customConfig.uploadImgTimeout = 3 * 60 * 1000 // 设置超时时间editor.customConfig.customUploadImg = function (files, insert) {// files 是 input 中选中的文件列表const formData = new FormData()formData.append('file', files[0])that.axios({//上传图片到后台method:'post',url:that.common.getApi() + '/sys/api/message/uploadFile',data:formData,}).then(res=>{if(res.data.success){console.log(res.data.obj);var imgUrl  = res.data.obj.savePath //后台返回的文件路径insert(imgUrl)//生成img标签并插入文章中}else{that.$message.error(res.data.msg)}})// insert 是获取图片 url 后，插入到编辑器的方法// 上传代码返回结果之后，将图片插入到编辑器中}// this.editor.customConfig.uploadParams = {formFile:'2'};// 配置菜单editor.customConfig.menus = ['head',  // 标题'bold',  // 粗体'fontSize',  // 字号'fontName',  // 字体'italic',  // 斜体'underline',  // 下划线'strikeThrough',  // 删除线'foreColor',  // 文字颜色'backColor',  // 背景颜色'link',  // 插入链接'list',  // 列表'justify',  // 对齐方式'quote',  // 引用'emoticon',  // 表情'image',  // 插入图片'table',  // 表格// 'video',  // 插入视频// 'code',  // 插入代码// 'undo',  // 撤销// 'redo'  // 重复]// 颜色editor.customConfig.colors = ['#000000','#FF0000','#eeece0','#1c487f','#009999','#606266','#8baa4a','#7b5ba1','#46acc8','#f9963b','#ffffff']editor.customConfig.uploadImgHooks = {fail: (xhr, editor, result) => {// 插入图片失败回调},success: (xhr, editor, result) => {// 图片上传成功回调//// let imgUrl = result.data;// insertImg(imgUrl)},timeout: (xhr, editor) => {// 网络超时的回调},error: (xhr, editor) => {console.log(editor)// 图片上传错误的回调},customInsert: (insertImg, result, editor) => {// 图片上传成功,插入图片的回调console.log(result);// if(result.code == 200){var url = result.data;insertImg(url)//将内容插入到富文本中// console.log(insertImg(url)+"DFDF")// console.log(data+"dsfd")// }}};editor.customConfig.onchange = (html) => {this.isChange = true;this.info_ = html // 绑定当前逐渐地值this.$emit('change', this.info_) // 将内容同步到父组件中console.log(this.info_ )};// 创建富文本编辑器editor.create()//初始化内容debuggereditor.txt.html(this.value)}}}
</script><style lang="css">.editor {width: 100%;}.toolbar {flex-wrap: wrap;border: 1px solid #ccc;}.w-e-menu{z-index:1 !important;}.text {width:100%;border: 1px solid #ccc;height: 300px;}.w-e-menu{z-index: 2 !important;}.w-e-text-container{z-index: 1 !important;}
</style>

在父组件中引入，并使用

import wangeditor  from '../wangeditor  .vue'
//注册
components: {wangeditor },
// html中使用
<wangeditor  v-model="addform.content"></wangeditor  >

官网：http://www.wangeditor.com/index.html

vue中使用富文本编辑器wangEditor及踩坑相关推荐

在vue3中使用富文本编辑器WangEditor
yarn add @wangeditor/editor # 或者 npm install @wangeditor/editor --saveyarn add @wangeditor/editor-fo ...
vue获取编辑器纯文字_vue中使用富文本编辑器
前端使用富文本编辑器的插件有很多,今天献上wangeditor的使用教程,教你如何在vue中使用富文本编辑器 wangeditor是一个萌新富文本编辑器,基于js和css,重点在于它轻量,如果你需要的 ...
Django中使用富文本编辑器Uedit
Uedit是百度一款非常好用的富文本编辑器一.安装及基本配置官方GitHub(有详细的安装使用教程):https://github.com/zhangfisher/DjangoUeditor 1. ...
使用富文本编辑器wangEditor完成图片文件的上传
项目中一些特定的功能可能需要在页面中用到富文本编辑器来实现文件的输入上传等等,在这里用wangEditor来实现使用富文本编辑器进行文件图面的输入和上传保存,这里wangEditor也可以参考wang ...
Django实现的博客系统中使用富文本编辑器ckeditor
操作系统为OS X 10.9.2,Django为1.6.5. 1.下载和安装 1.1 安装 ckeditor 下载地址 https://github.com/shaunsephton/django-c ...
Vue cli项目，使用富文本编辑器WangEditor，8小时摸爬滚打后，弃坑Tinymce、UEditor、Quill
一共尝试了 Tinymce.UEditor.Quill等好几种编辑器,最终觉得最满意的是 WangEditor. 1.Tinymce 开源项目ElementAdmin自带的例子,图片上传竟然存的是 ...
前端使用富文本编辑器wangEditor
一.npm下载终端输入 npm i wangeditor --save 二.代码此处已经把富文本编辑器抽出为组件: 组件内容: <template lang="html" ...
THINKPHP5.1使用富文本编辑器wangEditor
首先,本文中的代码在不使用AJAX的场景中. 我们需要知道几点: 0.wangEditor v3 默认只支持div方式显示出编辑器. 1.wangEditor 从v3版本开始不支持 textarea ...
react中使用富文本编辑器，发布文章
初心-杨瑞超个人博客诚邀您加入qq群(IT-程序猿-技术交流群): 757345416丨(IT-程序猿-技术交流2群): 936929828 富文本编辑器,在开发中是常用的,下面直接进入正题了: 1. ...

vue中使用富文本编辑器wangEditor及踩坑

新建一个wangeditor.vue（组件），代码内容如下

在父组件中引入，并使用

vue中使用富文本编辑器wangEditor及踩坑相关推荐

最新文章

热门文章