富文本编辑器wangEdittor使用入门

ch_s_t

已于 2024-09-17 16:55:53 修改

阅读量749

点赞数 3

分类专栏：前端开发 # 新峰商城读书笔记文章标签： spring boot 后端 java

于 2024-09-17 16:06:31 首次发布

本文链接：https://blog.csdn.net/ch_s_t/article/details/142211806

版权

新峰商城读书笔记同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

前端开发

11 篇文章 0 订阅

订阅专栏

一、wangEdittor介绍

富文本编辑器为开源产品wangEditor。wangEditor是一款轻量级Web富文本编辑器，配置方便，使用简单。读者可在其官网和GitHub仓库进行更多了解。主要有以下功能：

1）图文混排
wangEditor可以编辑的内容比较丰富，使用wangEditor进行图文混排。

2）字体调整
wangEditor可以很方便的进行文本内容格式的调整，包括字体、字号大小、字体颜色、背景颜色等内容。
（3）全屏编辑
wangEditor在初始化时有默认宽度，通常在页面中只占有部分版面。读者如果觉得不方便编辑，也可以点击全屏编辑的按钮让编辑器最大化。

（4）多图上传
wangEditor支持图片上传功能。它不仅支持单图上传，也支持多图上传，非常人性化。
（5）图片处理
wangEditor支持调整图片位置、图片大小等内容。点击需要调整的图片，图片调整的工具栏就会出现，
wangEditor还有许多其他非常有意思的功能，比如插入表格、插入表情、插入代码等。这里就不再逐一演示了，读者可以点击工具栏中的各个按钮自行体验。

二、整合编码案例

1、新建HTML测试页面

在resources/static目录下新建wangEditor-test.html文件，并引入wangEditor的JS文件，代码如下所示：

 <script 
    type=“text/javascript”
    src=“https://unpkg.com/wangeditor/dist/wangEditor.min.js”>
</script>

（2）创建富文本编辑框DOM

在wangEditor-test.html页面中创建id为wangEditor的div标签。对它进行定义主要是为了后续编辑器的初始化。将它的id命名为wangEditor，该值可以自行修改，代码如下所示：

<div id=“wangEditor”></div>

编辑区域高度默认为300px。这里也可以在wangEditor对象初始化时通过height属性进行设置。

（3）初始化wangEditor对象

初始化wangEditor对象并对一些配置项进行设置。在wangEditor-test.html文件中新增代码如下所示：

<script type=“text/script”>
//初始化富文本编辑器
 const  E=window.wangEditor;
 const editorD=new  E(“#wangEditor”);
//设置编辑区域高度o640px
 editorD.config.height=640;
//配置服务端图目上传地址
editorD.config.uploadImgServer=“/uploadFiles”;
editorD.config.uploadFileName=“files”;
//限制图片大小2mb
editorD.config.uploadImgMaxSize=2*1024*1024;
//限制一次最多能传5张图片
editorD.config.uploadImgMaxLength=5;
//隐藏插入网络图片白的功能
editorD.config.showLinkImg=false;
editorD.create();
</script>

相关的配置项和注释都在以上代码中了。在配置项设置完成后，下一步就可以调用create()创建wangEditor对象了。

（4）获取文档内容

在整理好富文本内容并写入编辑器后，还需要获取在wangEdito中输入的内容，并通过请求传给后端进行逻辑处理。wangEditor提供了对应的方法来获取其中的内容，比如获取输入的商品详情内容，就可以用如下代码实现：

var content=editorD.txt.html();

在获取成功后，将商品详情内容字段进行封装，并与后端接口进行交互。这部分内容会在后文讲解。wangEditor-test.html文件的完整代码如下所示：

<!Doctype html>
<html lang=“en”>
<head>
<meta charset=“utf-8”>
<title>wangEditor富文本编辑器测试</title>
</head>
<body>
<br>
WangEditor富文本编辑器
<br>
<div id=“wangEditor”></div>
<br>
<input type=“button” onclick=“getContent()” value=“获取文棣内容”/>

</body>
 <script 
    type=“text/javascript”
    src=“https://unpkg.com/wangeditor/dist/wangEditor.min.js”>
</script> 
<script type=“text/script”>
//初始化富文本编辑器
 const  E=window.wangEditor;
 const editorD=new  E(“#wangEditor”);
//设置编辑区域高度o640px
 editorD.config.height=640;
//配置服务端图目上传地址
editorD.config.uploadImgServer=“/uploadFiles”;
editorD.config.uploadFileName=“files”;
//限制图片大小2mb
editorD.config.uploadImgMaxSize=2*1024*1024;
//限制一次最多能传5张图片
editorD.config.uploadImgMaxLength=5;
//隐藏插入网络图片白的功能
editorD.config.showLinkImg=false;
editorD.create();

function getContent(){
  var content=editorD.txt.html();
  alert(content);
}
</script> 
</html>

在编辑器中输入内容，点击“获取文档内容”按钮，可以获取数据。