免费手工活外发加工网站网站制作过程步骤
手把手教你设置富文本编辑器
参考来源：UEditor Docs
初学者按我的步骤来就可以啦
一、设置ueditor编辑器
1.提取文件[文章最底部有链接提取方式]
2.解压文件并放到自己项目中，在WebContent目录下：
3. 修改jar包位置路径
到-->
注意：此时json还在报错，这个不用管，是因为json注释的原因。
右键，打开Properties：
如果想要使得json中注释不为乱码：修改encoding为utf-8形式并应用。
4.新建一个html页面
复制以下代码：
<!DOCTYPE HTML>
<html lang="en-US"><head><meta charset="UTF-8"><title>ueditor demo</title>
</head><body><!-- 加载编辑器的容器 --><script id="container" name="content" type="text/plain">这里写你的初始化内容</script><!-- 配置文件 --><script type="text/javascript" src="ueditor.config.js"></script><!-- 编辑器源码文件 --><script type="text/javascript" src="ueditor.all.js"></script><!-- 实例化编辑器 --><script type="text/javascript">var ue = UE.getEditor('container');</script>
</body></html>由于我的项目跟解压包里的js未在一个路径内如下图：
所以 根据需要修改src：
<!-- 配置文件 --><script type="text/javascript" src="utf8-jsp/utf8-jsp/ueditor.config.js"></script><!-- 编辑器源码文件 --><script type="text/javascript" src="utf8-jsp/utf8-jsp/ueditor.all.js"></script>最后直接运行就可：
5.注意事项：
发现图片上传上去后无法加载出来，
需要设置一下config.json文件中的在"imageUrlPrefix": ""
填上：/*其中*需要用你设置该编辑器的母文件名代替。比如我的utf8-jsp在qcby2母文件下，则输入：
"imageUrlPrefix": "/qcby2", /* 图片访问路径前缀 */
最后上传图片成功：
使用utf8-jsp.rar包的提取链接：
https://pan.baidu.com/s/1oiYEMfdV9Tnx2sY6dkPHuQ?pwd=rt71 提取码: rt71
二、编辑器原理
1.先在html里设置一个按钮获取我在编辑器里设置文字、图像样式的信息，完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="js/jquery.js"></script>
</head>
<body><!-- 加载编辑器的容器 --><script id="container" name="content" type="text/plain">这里写你的初始化内容</script><input type="button" value='获取信息' class='btn'><div class='aaa'></div><!-- 配置文件 --><script type="text/javascript" src="utf8-jsp/ueditor.config.js"></script><!-- 编辑器源码文件 --><script type="text/javascript" src="utf8-jsp/ueditor.all.js"></script><!-- 实例化编辑器 --><script type="text/javascript">var ue = UE.getEditor('container');$(".btn").click(function(){console.log(ue.getContent())$(".aaa").html(ue.getContent())})</script>
</body>
</html>然后运行，打开检查，其中：
在控制台中的就是左侧信息形式的标签，通过$(".aaa").html(ue.getContent())可以再次展示到html中。
三、使用编辑器
1.编辑器常在文字添加时候使用，以我的项目为例：
可以发现在后台添加内容时，无法实现对文字格式的设置，只能输入纯文本无法添加样式。
2. （1）html：此时只要将以下代码复制到对应的add.html所需位置中
<!-- 加载编辑器的容器 --><script id="container" name="content" type="text/plain"></script><!-- 配置文件 --><script type="text/javascript" src="utf8-jsp/ueditor.config.js"></script><!-- 编辑器源码文件 --><script type="text/javascript" src="utf8-jsp/ueditor.all.js"></script>（2）js：对应js文件中加入以下代码即可
var ue = UE.getEditor('container');加修改content原来接受输入的那一部分
最后就实现啦~
[剩下的就该把对应数据信息存入到后端数据库中就可以了]
3.接入后端[Java]
4.测试
输入添加信息
查看数据库
可知内容上已经设置了。
——end——