网站后台添加富文本编辑器

网站后台需要添加富文本编辑器，偶然的机会发现了百度的UEditor，经过一番配置（我使用的环境是struts2+hibernate+spring），终于是成功了，下面来记录一下配置的过程：

step1:首先去UEditor官网下载UEditor,我下载的1.4.3.3版本的.

step2:解压下载得到的UEditor,里面的目录结构如下图

20160717102403228.png

将这整个目录拷贝进工程里面（我将它改名成为ueditor）：


20160717102512494.png


step3:使用UEditor,新建一个demo.html



<!DOCTYPE html>

<html>

  <head>

    <title>demo.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">

    <meta charset="utf-8">


    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

    <!-- 配置文件 -->

    <script type="text/javascript" src="ueditor.config.js"></script>

    <!-- 编辑器源码文件 -->

    <script type="text/javascript" src="ueditor.all.js"></script>

  </head>


  <body>

    <!-- 加载编辑器的容器 -->

    <script id="container" name="content" type="text/plain">

        这里写你的初始化内容

    </script>


    <!-- 实例化编辑器 -->

    <script type="text/javascript">

        var ue = UE.getEditor('container');

    </script>


  </body>

</html>

在里面引入两个js文件：


 <script type="text/javascript" src="ueditor.config.js"></script>

 <script type="text/javascript" src="ueditor.all.js"></script>

这个是要接入富文本编辑器需要引入的两个文件

<script id="container" name="content" type="text/plain">        这里写你的初始化内容 </script>

这个脚本是加载富文本编辑器，接下来就是创建富文本编辑器的实例了，创建之后就能看到富文本编辑器的页面：

<script type="text/javascript">        var ue = UE.getEditor('container');    </script>

下面就是创建富文本编辑器之后的页面：

20160717102959855.png

版权声明：本文为CSDN博主「伯兰」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/supervictim/article/details/51931160