wangEditor富文本编辑器

最新推荐文章于 2024-03-20 13:52:48 发布

qq_夏阳

最新推荐文章于 2024-03-20 13:52:48 发布

阅读量300

点赞数

CC 4.0 BY-SA版权

分类专栏：前端知识点

本文链接：https://blog.youkuaiyun.com/qq_41806475/article/details/107319022

前端知识点专栏收录该内容

26 篇文章

订阅专栏

这篇博客详细记录了作者在研究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;
}