一、ckeditor
1）
下载ckeditor_3.6.2.zip和ckeditor-java-core-3.5.3.zip两个压缩文件
下载地址:http://ckeditor.com
2）
解压缩文件ckeditor_3.6.2.zip和ckeditor-java-core-3.5.3.zip两个文件，
在ckeditor_3.6.2文件中有ckeditor文件夹；
ckeditor-java-core-3.5.3中有ckeditor-java-core-3.5.3.jar、 ckeditor-java-core-3.5.3-javadoc.jar和ckeditor-java-core-3.5.3-sources.jar三个jar包
3）
把ckeditor_3.6.2文件夹下的ckeditor整个复制到工程WebRoot下；
把ckeditor-java-core-3.5.3文件夹下的三个jar包复制到WebRoot—>WEB-INF—>lib文件夹下
4）
要使用就必须在jsp文件中先引入ckeditor.js文件
<scripttype="text/javascript"src="ckeditor/ckeditor.js"></script>
5）
新建一个textarea html对象
<textarea id="editor1" name="editor1">初始化文字</textarea>
用ckeditor替换html area
<script type="text/javascript"> CKEDITOR.replace( 'editor1' ); </script>
或者
<ckeditor:replace replace="editor1" basePath="/ckeditor/" />
6）
效果图



二、ueditor
1）
下载ueditor
下载地址：http://ueditor.baidu.com/website/download.html
2）
解压缩文件，并把文件夹名改为ueditor
ueditor\jsp\lib路径下有commons-codec-1.9.jar、commons-fileupload-1.3.1.jar、commons-io-2.4.jar、json.jar、ueditor-1.1.2.jar五个jar包
3）
把整个ueditor文件夹复制到工程WebRoot下；
把ueditor\jsp\lib文件夹下的五个jar包复制到WebRoot—>WEB-INF—>lib文件夹下
4）
在jsp文件中先引入ueditor.config.js、ueditor.all.js文件
 </script>
 <!-- 配置文件 -->
 <script type="text/javascript" src="ueditor.config.js"></script>
 <!-- 编辑器源码文件 -->
 <script type="text/javascript" src="ueditor.all.js"></script>
5）
页面中这么使用
<!-- 加载编辑器的容器 -->
<script id="container" name="content" type="text/plain">
这里写你的初始化内容
<!-- 实例化编辑器 -->
<script type="text/javascript">
var ue = UE.getEditor('container');
</script>
6)
效果图


7）
设置和读取编辑器的内容
var ue = UE.getContent();
//对编辑器的操作最好在编辑器ready之后再做
ue.ready(function() {
    //设置编辑器的内容
    ue.setContent('hello');
    //获取html内容，返回: <p>hello</p>
    var html = ue.getContent();
    //获取纯文本内容，返回: hello
    var txt = ue.getContentTxt();
});

1、写成txt文件
 
/*html富文本写成txt*/
public static String WriterTxt(String content) throws IOException{
   String real_path = "E:\\txtPath.txt";
   String txtPath="";
   if (null != content && !"".equals(content)) {
      content = content.trim();
      //查看默认地址是否存在
      File file = new File(real_path);
      if (!file.getParentFile().exists()) {
         file.getParentFile().mkdirs();
      }
      OutputStreamWriter osw =new OutputStreamWriter(new FileOutputStream(file), "UTF-8");
      osw.write(content);
      osw.close();
      //文件上传
      String fileName =  Tools.get32UUID();
       txtPath=FileUpload.txtUpload(real_path);
   }
   return  txtPath;
}
 
2、上传文件
 
public  static String txtUpload(String path) throws IOException {
   String ossImgPath="";
   try {
      File outputfile = new File(path);
      if (!outputfile.getParentFile().exists()) {
         outputfile.getParentFile().mkdirs();
      }
      FileInputStream inputStream = new FileInputStream(outputfile);
      MultipartFile mf = new MockMultipartFile(outputfile.getName(), outputfile.getName(), ContentType.APPLICATION_OCTET_STREAM.toString(), inputStream);
      String imgPath=uploadLocal(mf, "File");
      ossImgPath=imgPath;
   } catch (IOException e) {
      e.printStackTrace();
   }
   return ossImgPath;
}
 
3、本地读取阿里云txt文件内容
 
public static String ReadUrl(String FilePath) throws IOException{
		String read;
		String readStr ="";
		try{
			URL url =new URL(FilePath);
			HttpURLConnection urlCon = (HttpURLConnection)url.openConnection();
			urlCon.setConnectTimeout(5000);
			urlCon.setReadTimeout(5000);
			BufferedReader br =new BufferedReader(new InputStreamReader( urlCon.getInputStream(),"utf-8"));
			while ((read = br.readLine()) !=null) {
				readStr = readStr + read;
			}
			br.close();
		}
		catch (IOException e) {
			// TODO Auto-generated catch block
			readStr ="f";
		}
		return readStr;
	}
 
4、使用实例
 
@AutoLog(value = "文章管理-编辑")
@ApiOperation(value="文章管理-编辑", notes="文章管理-编辑")
@PutMapping(value = "/edit")
public Result<?> edit(@RequestBody NsArticle nsArticle) {
   nsArticle.setUpdateTime(new Date());
   try {
      nsArticle.setContent(Tools.WriterTxt(nsArticle.getContent()));
   } catch (Exception e) {
      return Result.error(e.getMessage());
   }
   nsArticleService.updateById(nsArticle);
   return Result.OK("编辑成功!");
}
 

 
 
数据库里字段用text等其他的
 
实例类是string

如何做到 ueditor批量上传word图片？
 
1、前端引用代码
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
 
    <meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
 
 
 
   <title>编辑器完整版实例-1.2.6.0</title>
 
    <script type="text/javascript"src="ueditor.config.js"charset="utf-8"></script>
 
    <script type="text/javascript"src="ueditor.all.js"charset="utf-8"></script>
 
    <link type="text/css"rel="Stylesheet"href="WordPaster/css/WordPaster.css"/>
 
    <link type="text/css"rel="Stylesheet"href="WordPaster/js/skygqbox.css"/>
 
    <scrip ttype="text/javascript"src="WordPaster/js/json2.min.js"charset="utf-8"></script>
 
    <scrip ttype="text/javascript"src="WordPaster/js/jquery-1.4.min.js"charset="utf-8"></script>
 
    <scrip ttype="text/javascript"src="WordPaster/js/WordPaster.js"charset="utf-8"></script>
 
    <scrip ttype="text/javascript"src="WordPaster/js/skygqbox.js"charset="utf-8"></script>
 
</head>
 
<body>
 
    <textarea name="后台取值的key"id="myEditor">这里写你的初始化内容</textarea>
 
    <script type="text/javascript">
 
        var pasterMgr = new WordPasterManager();
 
    pasterMgr.Config["PostUrl"] = "http://localhost:81/WordPaster2/WordPasterUEditor1x/php/upload.php"
 
    pasterMgr.Load();//加载控件
 
 
 
          UE.getEditor('myEditor',{onready:function(){//创建一个编辑器实例
 
              pasterMgr.SetEditor(this);
 
          }});
 
    </script>
 
</body>
 
</html>
 
请求
 
文件上传的默认请求是一个文件，作为具有“upload”字段的表单数据。
 
响应：文件已成功上传
 
当文件成功上传时的JSON响应：
 
uploaded- 设置为1。
 
fileName - 上传文件的名称。
 
url - 上传文件的URL。
 
响应：文件无法上传
 
uploaded- 设置为0。
 
error.message - 要显示给用户的错误消息。
 
2、粘贴word里面的图片路径是fill://D 这种格式 我理解这种是非浏览器安全的 许多浏览器也不支持
 
目前项目是用了一种变通的方式：
 
先把word上传到后台 、poi解析、存储图片 、转换html、替换图片、放到富文本框里显示
 
（富文本显示有个坑：没找到直接给富文本赋值的方法 要先销毁 记录下
 
success : function(data) {
 
     $('#content').attr('value',data.imagePath);
 
     var editor = CKEDITOR.instances["content"]; //你的编辑器的"name"属性的值
 
     if (editor) {
 
       editor.destroy(true);//销毁编辑器
 
      }    
 
     CKEDITOR.replace('content'); //替换编辑器，editorID为ckeditor的"id"属性的值
 
     $("#content").val(result);    //对editor赋值
 
     //CKEDITOR.instances.contentCkeditor.setData($("#content").text());
 
 }
 
3.接收上传的图片并保存在服务端
 
<?php
 
ob_start();
 
//201201/10
 
$timeDir =date("Ym")."/".date("d");
 
$uploadDir =dirname(__FILE__).'/upload/'.$timeDir;
 
$curDomain = "http://".$_SERVER["HTTP_HOST"]."/";
 
//相对路径 http://www.ncmem.com/upload/2012-1-10/
 
$relatPath = $curDomain ."WordPaster2/WordPasterUEditor1x/php/upload/" . $timeDir . "/";
 
 
 
//自动创建目录。upload/2012-1-10
 
if(!is_dir($uploadDir))
 
{
 
mkdir($uploadDir,0777,true);
 
}
 
 
 
//如果PHP页面为UTF-8编码，请使用urldecode解码文件名称
 
//$fileName = urldecode($_FILES['postedFile']['name']);
 
//如果PHP页面为GB2312编码，则可直接读取文件名称
 
$fileName = $_FILES['file']['name'];
 
$tmpName = $_FILES['file']['tmp_name'];
 
 
 
//取文件扩展名jpg,gif,bmp,png
 
$path_parts =pathinfo($fileName);
 
$ext = $path_parts["extension"];
 
$ext =strtolower($ext);//jpg,png,gif,bmp
 
 
 
//只允许上传图片类型的文件
 
if($ext == "jpg"
 
    || $ext == "jpeg"
 
    || $ext == "png"
 
    || $ext == "gif"
 
    || $ext == "bmp")
 
{
 
    //年_月_日_时分秒毫秒.jpg
 
    $saveFileName = $fileName;
 
 
 
    //xxx/2011_05_05_091250000.jpg
 
    $savePath = $uploadDir . "/" . $saveFileName;
 
 
 
    //另存为新文件名称
 
    if (!move_uploaded_file($tmpName,$savePath))
 
    {
 
exit('upload error!' . "文件名称：" .$fileName . "保存路径：" . $savePath);
 
    }
 
}
 
 
 
//输出图片路径
 
//$_SERVER['HTTP_HOST']   localhost:81
 
//$_SERVER['REQUEST_URI'] /FCKEditor2.4.6.1/php/test.php
 
$reqPath =str_replace("upload.php","",$_SERVER['REQUEST_URI']);
 
echo $relatPath .  $saveFileName;
 
header('Content-type: text/html; charset=utf-8');
 
header('Content-Length: ' .ob_get_length());
 
?>
 
效果展示：
 
 
 
 
在使用前需要配置一下，可以参考我写的这篇文章：http://blog.ncmem.com/wordpress/2019/08/07/umeditor%E7%B2%98%E8%B4%B4word%E5%9B%BE%E7%89%87/
 
讨论群：223813913