富文本编辑器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>

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

相关推荐
齐 飞10 分钟前
MongoDB笔记01-概念与安装
前端·数据库·笔记·后端·mongodb
狂放不羁霸18 分钟前
idea | 搭建 SpringBoot 项目之配置 Maven
spring boot·maven·intellij-idea
九圣残炎19 分钟前
【从零开始的LeetCode-算法】1456. 定长子串中元音的最大数目
java·算法·leetcode
wclass-zhengge21 分钟前
Netty篇(入门编程)
java·linux·服务器
LunarCod27 分钟前
WorkFlow源码剖析——Communicator之TCPServer(中)
后端·workflow·c/c++·网络框架·源码剖析·高性能高并发
计算机学长felix1 小时前
基于SpringBoot的“校园交友网站”的设计与实现(源码+数据库+文档+PPT)
数据库·spring boot·毕业设计·交友
Re.不晚1 小时前
Java入门15——抽象类
java·开发语言·学习·算法·intellij-idea
雷神乐乐1 小时前
Maven学习——创建Maven的Java和Web工程,并运行在Tomcat上
java·maven
码农派大星。1 小时前
Spring Boot 配置文件
java·spring boot·后端
顾北川_野1 小时前
Android 手机设备的OEM-unlock解锁 和 adb push文件
android·java