wangEditor富文本编辑器

这篇博客详细记录了作者在研究wangEditor开发文档的过程,涵盖了编辑器的基础使用和可能遇到的问题,为读者提供了一份实用的wangEditor学习指南。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

今天看了下文档,记录下。。。

wangEditor开发文档

html:
<div id="editorBox"></div>
<button onclick="confirm()">确定</button>
<div id="content"></div>


js内容:

 var E = window.wangEditor
 var editor = new E('#editorBox')     //实例化文本编辑器
//1)上传服务器获取网络链接
 editor.customConfig.uploadFileName = 'myFile'; //设置文件上传的参数名称
editor.customConfig.uploadImgServer='upload.do'; //设置上传文件的服务器路径(替换你的服务器路径)
editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024; // 将图片大小限制为 3M
editor.customConfig.uploadImgHooks = {
	before: function(xhr, editor, files) {},
	success: function(xhr, editor, result) { console.log("上传成功"); },
	fail: function(xhr, editor, result) {  console.log("上传失败,原因是" + result); },
	error: function(xhr, editor) { console.log("上传出错"); },
	timeout: function(xhr, editor) {  console.log("上传超时"); },
	customInsert:function(insertImg, result, editor){
       var url = result.result[0];     //此处需要改成你自己的返回结果字段
	   insertImg(url)
	}
}

//2)上传使用 base64 保存图片
editor.customConfig.uploadImgShowBase64 = true   

//以上方式2选1即可

 editor.create()        //创建文本编辑器

function confirm(){
   let html =  editor.txt.html();
   let text =  editor.txt.text();
   console.log(html)
   console.log(text)
   document.getElementById('content').innerHTML = html;
}


 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值