富文本编辑器的使用
程序员文章站
2022-07-02 22:32:37
...
官网:http://fex.baidu.com/ueditor/
加载富文本编辑器:
- 导入配置文件(ueditor1_4_3_3-utf-8-jsp)和jar包到WebContent目录下并更改文件夹名为ueditor,将配置文件下的jsp/lib下的jar包拷到/WEB-INF/lib包下
- 修改配置文件:
1 . jsp目录下的config.json文件 , 富文本编辑器中图片上传的相关配置
“imageUrlPrefix”: “/站点名”, /* 图片访问路径前缀 /
“imagePathFormat”: “/statics/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}”, / 上传保存路径,可以自定义保存路径和文件名格式 */
`"imageUrlPrefix": "/ShangYun", /* 图片访问路径前缀 */ /*就是虚拟项目名*/ "imagePathFormat": "/statics/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */ /*就是上传文件的真实路径*/
2 . ueditor目录下的ueditor.config.js文件
/站点名 + ueditor的目录
window.UEDITOR_HOME_URL = “/shsxtnote/statics/ueditor/”;
/**
* 编辑器资源文件根路径。它所表示的含义是：以编辑器实例化页面为当前路径，指向编辑器资源文件（即dialog等文件夹）的路径。
* 鉴于很多同学在使用编辑器的时候出现的种种路径问题，此处强烈建议大家使用"相对于网站根目录的相对路径"进行配置。
* "相对于网站根目录的相对路径"也就是以斜杠开头的形如"/myProject/ueditor/"这样的路径。
* 如果站点中有多个不在同一层级的页面需要实例化编辑器，且引用了同一UEditor的时候，此处的URL可能不适用于每个页面的编辑器。
* 因此，UEditor提供了针对不同页面的编辑器可单独配置的根路径，具体来说，在需要实例化编辑器的页面最顶部写上如下代码即可。当然，需要令此处的URL等于对应的配置。
* window.UEDITOR_HOME_URL = "/xxxx/xxxx/";
*/
/**
* /站点名 + ueditor的目录
*/
window.UEDITOR_HOME_URL = "/ShangYun/statics/ueditor/"; //资源文件的根路径, /虚拟项目名/.../
使用富文本编辑器
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>ueditor demo</title>
</head>
<body>
<!-- 加载编辑器的容器,textarea,div都可 -->
<!--<script id="container" name="content" type="text/plain">
这里写你的初始化内容
</script> -->
<textare id="noteUeditor"></textare>
<!-- 配置文件,改成自己配置文件的路径 -->
<script type="text/javascript" src="static/ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件,改成自己配置文件的路径 -->
<script type="text/javascript" src="static/ueditor/ueditor.all.js"></script>
<!-- 实例化编辑器,渲染,通过UE对象实例化容器,修改自己容器的id -->
<script type="text/javascript">
//var ue = UE.getEditor('container');
var ue = UE.getEditor('noteUeditor');
</script>
</body>
</html>
上一篇： 解除电脑网速限制
下一篇： 富文本编辑器 KindEditor的使用