富文本编辑器
目录
-
-
- wangEditor
-
- 下载引入
- 基本使用
- 说明
- KindEditor
-
- 下载引入
- 基本使用
- 后端处理表单
- ajax
-
富文本编辑器首选 wangEditor，次选 KindEditor。这两者功能都比较齐全，相比KindEditor，wangEditor更轻量、简洁，但偏pc端 ，不支持移动端和 ipad。
wangEditor
官网地址：http://www.wangeditor.com/
下载引入
script方式引入
<script src="https://cdn.bootcdn.net/ajax/libs/wangEditor/3.1.1/wangEditor.min.js">script>
npm方式引入
npm i wangeditor --save
基本使用
<div id="editor">
<p>请输入内容...p>
div>
<script src="https://cdn.bootcdn.net/ajax/libs/wangEditor/3.1.1/wangEditor.min.js">script>
<script type="text/javascript">
const E = window.wangEditor;
const editor = new E("#editor");
editor.create();
script>
说明
1、v4版本的使用和v3略有不同，使用时要注意引入的是v3还是v4版本。
参考：v3版本的使用
2、有时候编辑的内容是在移动端展示的，比如显示在小程序中的页面上。移动端预览思路
- 运营在pc端编辑内容
- 点击“移动端预览”按钮时，前端获取编辑框的带有html标签的文档内容传给后端
- 后端用StringBuilder拼接html文档的、之类的固定标签，在临时目录下创建一个html文件，将StringBuilder转换为String写入html文件中，返回给前端html文件路径
- 前端拼接域名、后端返回的html文件路径，生成二维码显示在页面上
- 运营手机扫描二维码，转到html页面
KindEditor
官网地址：http://kindeditor.net/demo.php
下载引入
下载地址： http://www.kindsoft.net/down.php
- 删掉asp、asp.net、jsp、php
- lang里面只保留zh-CN.js，语言只使用简体中文
- themes里删掉qq、simple，我只使用默认的主题default，qq、simple这2种主题都不用，也可以保留
弄好之后放在reources/plugins下
基本使用
<body>
<form action="/handler" method="post">
<textarea id="editor" name="editor" style="width:700px;height:300px;">请输入内容textarea>
<button type="submit">提交button>
form>
<script charset="utf-8" src="/plugin/kindeditor/kindeditor-all.js">script>
<script charset="utf-8" src="/plugin/kindeditor/lang/zh-CN.js">script>
<script>
// 此变量代表KindEditor富文本编辑器，如果后续不使用此变量，也可以放在函数中
let editor;
// 创建KindEditor富文本编辑器，也可以在js或jq的就绪函数中创建
KindEditor.ready(function () {
editor = KindEditor.create('#editor', {
uploadJson: '/fileHandler', //指定处理KindEditor上传文件的controller
filePostName: 'file' //指定KindEditor上传文件使用的字段名
});
});
script>
body>
常用方法
- editor.focus() 聚焦
- editor.isEmpty() 判断文本域中是否有内容，返回boolean
- editor.html() 获取文本域的内容（转换为html代码） 返回string
如果使用ajx提交，可以用editor.html()获取文本域的内容放在data中；如果使用js或jq的val属性来获取文本域的内容，需要先sync()同步，不然获取到的值是剔除html标签的。
editor.sync();
let str=document.getElementById("editor").value;
// let str = $("#editor").val;
- editor.html(string val) 设置文本域的内容，会自动解析val中的html标签。thymeleaf的
后端处理表单
1、处理文本域内容的提交
前端提交 editor.html()，包含了 html标签（富文本），后端用String来接收；返回数据给前端回显时，会自动解析其中的html标签（富文本效果）。
2、处理KindEditor上传的文件。KindEditor约定后端要返回一个2个参数
- error 结果代码，0表示成功，1表示失败
- 如果成功传递保存路径；如果失败传递失败原因
@PostMapping("/fileHandler")
@ResponseBody
public Map fileUpload(HttpServletRequest request, @RequestParam("file") List<MultipartFile> fileList) {
Map map = new HashMap<String, Object>();
// 检测用户是否上传了文件
if (!fileList.isEmpty() && fileList.size()>0){
// 处理上传文件
for (MultipartFile tempFile:fileList){
// 使用uuid防止文件重名，原文件名中包含扩展名，放最后面
String newFilename= UUID.randomUUID()+"_"+tempFile.getOriginalFilename();
File file = new File("/upload/" + newFilename);
System.out.println(file.getPath());
// 如果要对不同类型的文件做不同处理，可以判断文件类型，也可以根据原文件名来判断
// String fileType = file.getContentType();
try {
// 保存文件
tempFile.transferTo(file);
map.put("error", 0);
map.put("url", file.getPath());
} catch (IOException e) {
e.printStackTrace();
map.put("error", 1);
map.put("message", "上传文件失败！");
}
}
}
else {
map.put("error", 1);
map.put("message", "请先选择要上传的文件！");
}
return map;
}
ajax
请求方式、携带的数据均可选，缺省请求方式时默认为get
K.ajax(
'../xxx/xxx',
data => { //回调函数
//.....
},
'POST',
{ //携带的数据
name : 'chy',
age : 20
}
);