利用wangEditor富文本上传图片及文本并回显

话不多说直接上代码！！！
html中得先引用wangEditor插件

vue中使用：
1.npm install wangeditor （注意 wangeditor 所有是小写字母）html
2.引入import E from “wangeditor”; //引入富文本插件
或者
直接引用wangEditor的js

//html中<div id="editor" v-model="Form.showContent"><!-- <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p> --></div>

js中先创建富文本

 init() {const E = window.wangEditor;this.editor = new E(document.getElementById('editor'));this.editor.customConfig.uploadImgMaxSize = 10 * 1024 * 1024; // 将图片大小限制为 10Mthis.editor.customConfig.uploadImgMaxLength = 1; // 限制一次最多上传 1 张图片this.editor.customConfig.showLinkImg = false; //隐藏网络图片上传this.editor.customConfig.uploadImgHooks = {fail: function(xhr, editor, result) {//上传错误时触发alert("上传图片失败");}};// 自定义上传图片事件this.editor.customConfig.customUploadImg = function(files, insert) {// file是是input中选中的文件列表 //  insert是获取图片url后，插入到编辑器中的方法var formData = new FormData();var obj = {};for (var i = 0; i < files.length; i++) {obj = files[i]}//后端所需的参数formData.append('file', obj);console.log(obj);formData.append('merchantId', '');$.ajax({url: url + '调用服务器的接口',type: "POST",data: formData,async: false,dataType: "json",xhrFields: {withCredentials: true},crossDomain: true,cache: false,contentType: false,processData: false,success: function(da) {console.log(da);// insert(da.avatarUrl);if (da.code == 1 || da.code == "1") {// 上传代码返回结果之后，将图片插入到编辑器中insert(da.data.avatarUrl);} else {alert(da.message);return;}}});};this.editor.customConfig.customAlert = function(info) {// info 是需要提示的内容alert('自定义提示：' + info)}this.editor.customConfig.withCredentials = true;this.editor.create();}

要想让富文本只查看不编辑
①只需在富文本编辑器中使用v-html，此处展示的是页面形式

//detail接收返回来的值<editor-bar id="editor" v-model="detail" v-html="detail"></editor-bar>

②让wangEditor设置不可编辑，在创建富文本编辑器之后

  this.editor.customConfig.onchange = (html) => {this.detail = html;
};
this.editor.$textElem.attr('contenteditable', false)

//获取后端返回的富文本值this.editor.txt.text(detail)

最终提交给后端

           //判断是否为空//如果每次输入数据都多<p></p>,则用this.editor.txt.html().replace(/<p><\/p>/g, '');let content1 = this.editor.txt.html();if (content1 === '<p><br></p>') {this.detailContext = '';} else {this.detailContext = content1;}

利用wangEditor富文本上传图片及文本并回显相关推荐

微信小程序开发——实现修改文章富文本（hf_editor）输入框回显文章功能
文章发布界面就是一个类型选择.标题输入(input).内容输入(hf_editor) 代码就不详细说明了当我们需要修改博客的时候一般的界面显示就是显示一个和发布类似的输入框,只是里面存有之前填写的 ...
QML工作笔记-文本输入设置长度以及回显方式（TextInput与TextField通用）
目录基本概念代码及演示基本概念这是一个很常用到的功能,特意记录下: 一般输入框会用到2个,一个是TextInput一个是TextField. 因为TextInput加Rectangle如果太长 ...
文本域多行文本回显换行问题
文本域回显换行问题先具体描述下问题: 管理后台文本域添加内容中带有换行,但未处理数据,传入后台保存到数据库,在展示页面需要回显,如果直接用此字段的话,并没有原先的换行样式 (1)下图为存数据时 (2 ...
Vue+element ui上传图片和视频并回显，点击放大查看和播放
1.上传图片 html代码: <el-uploadaction="#":auto-upload="false":on-change="handl ...
使用富文本时修改时怎么回显数据_数据分析步骤繁琐？选对好工具，几步带你玩转数据分析...
还在对着一堆表格数据发呆?想分析数据却不知道从何下手?专业数据分析师教你几步实现数据分析. 分分钟教你使用豌豆BI快速开始进行数据分析! Step 1:准备数据,建立数据源点开如下界面,在[主题集] ...
el-upload 上传图片、编辑时图片回显以及后续提交问题
功能描述: 添加图片上传成功在表格内显示该图片点击编辑,打开上传图片对话框,图片回显(与添加共用同一个对话框) html代码:(具体添加.编辑按钮以及表格内显示上传成功的图片html代码就不放了, ...
wangeditor富文本编辑器上传图片以及跨域问题解决
一.简介 wangeditor富文本编辑器是由js和css开发的富文本编辑器,轻量.简洁.高效详细信息可以查看官网:http://www.wangeditor.com/ 二.上传图片本章内容主要讲 ...
java 富文本框_java-富文本（wangEditor框架）的使用教程
富文本的使用教程(wangEditor框架) 一,相信很多人用过很多富文本的框架,现在我向大家推荐一个很实用的一个富文本框架,具有丰富的功能项,容易使用. 所以本博客介绍这个富文本编辑器的使用哈!觉得 ...
wangeditor富文本编辑器集成配置
wangeditor富文本编辑器集成 <!DOCTYPE html> <html><head><meta charset="utf-8"& ...

利用wangEditor富文本上传图片及文本并回显

利用wangEditor富文本上传图片及文本并回显相关推荐

最新文章

热门文章