富文本编辑器ueditor初探

来源：互联网发布：网络测速软件编辑：程序博客网时间：2024/05/02 04:53

ueditor是百度开源的一款富文本编辑器，官网是：http://ueditor.baidu.com/website/

我们下载最新版本1.4.3.3，解压下来目录结构如下：

lib包在jsp文件夹下、剩余的4个文件夹是需要的js和css。

1：引入资源

5个jar包：

引入需要的js和css(除jsp文件夹外，其他4个文件夹资源都需要引入)

将config.json和controller.jsp引入，二者需放在同一目录下。

2：在页面里使用

<!DOCTYPE html><html>  <head>    <title>testUeEdit.html</title>    <meta name="keywords" content="keyword1,keyword2,keyword3">    <meta name="description" content="this is my page">    <meta name="content-type" content="text/html; charset=UTF-8">    <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <!-- 配置文件 --> <script type="text/javascript" src="../js/ueEdit/ueditor.config.js"></script> <!-- 编辑器源码文件 --> <script type="text/javascript" src="../js/ueEdit/ueditor.all.js"></script>  <script type="text/javascript" charset="utf-8" src="../js/ueEdit/lang/zh-cn/zh-cn.js"></script><script>   //初始化  var ue = UE.getEditor('editor');  </script>  </head>  <body>   <div>    <h1>完整demo</h1>    <script id="editor" type="text/plain" style="width:1024px;height:500px;"></script></div>

此时文字编辑、表情都可以正常使用。

3：后端配置

控件的配置在ueditor.config.js

上传图片、附件、视频等等的配置在config.json里。

此时只需要修改ueditor.config.js里的serverUrl指向controller.jsp文件,controller.jsp会调用config.json里的配置去使用UeEdit自带的上传插件去上传文件。

上传功能需要我们在config.json里配置好文件的访问前缀、上传保存路径及文件命名格式。上传完图片后，图片会自动显示在编辑器里。

如此之后编辑器的基本功能文字编辑、图片上传、表情等等就ok了。

Tips: 在插入html的时候一定要等ueEdit初始化完成才可以：

      varue = UE.getEditor('editor');      ue.addListener("ready",function () {         ue.execCommand('insertHtml',value);      });

1 0