富文本编辑器wangEdittor使用入门

一、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文件,代码如下所示:

html 复制代码
 <script 
    type="text/javascript"
    src="https://unpkg.com/wangeditor/dist/wangEditor.min.js">
</script>

(2)创建富文本编辑框DOM

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

html 复制代码
<div id="wangEditor"></div>

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

(3)初始化wangEditor对象

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

javascript 复制代码
<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提供了对应的方法来获取其中的内容,比如获取输入的商品详情内容,就可以用如下代码实现:

javascript 复制代码
var content=editorD.txt.html();

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

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>

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

相关推荐
陈王卜1 分钟前
django+boostrap实现发布博客权限控制
java·前端·django
小码的头发丝、2 分钟前
Spring Boot 注解
java·spring boot
午觉千万别睡过4 分钟前
RuoYI分页不准确问题解决
spring boot
java亮小白19976 分钟前
Spring循环依赖如何解决的?
java·后端·spring
飞滕人生TYF13 分钟前
java Queue 详解
java·队列
2301_8112743123 分钟前
大数据基于Spring Boot的化妆品推荐系统的设计与实现
大数据·spring boot·后端
武子康34 分钟前
大数据-230 离线数仓 - ODS层的构建 Hive处理 UDF 与 SerDe 处理 与 当前总结
java·大数据·数据仓库·hive·hadoop·sql·hdfs
武子康36 分钟前
大数据-231 离线数仓 - DWS 层、ADS 层的创建 Hive 执行脚本
java·大数据·数据仓库·hive·hadoop·mysql
苏-言43 分钟前
Spring IOC实战指南:从零到一的构建过程
java·数据库·spring
界面开发小八哥1 小时前
更高效的Java 23开发,IntelliJ IDEA助力全面升级
java·开发语言·ide·intellij-idea·开发工具