手机富文本编辑器下载（富文本编辑器内容实现word导出下载，请各位大神们指点，感激不尽）

本文目录

• 富文本编辑器内容实现word导出下载，请各位大神们指点，感激不尽
• PC/移动端的富文本编辑器wangEditor的使用
• 轻量级富文本编辑器quill editor结合iview的使用
• jsp 页面怎么用富文本编辑器
• 如何在mcv中使用富文本编辑器

富文本编辑器内容实现word导出下载，请各位大神们指点，感激不尽

1、环境支持
***隐藏网址***
***隐藏网址***
package com.ray.poi.util;
import java.io.ByteArrayInputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.IOException;
import org.apache.poi.poifs.filesystem.DirectoryEntry;
import org.apache.poi.poifs.filesystem.DocumentEntry;
import org.apache.poi.poifs.filesystem.POIFSFileSystem;
import org.textmining.text.extraction.WordExtractor;
/**
* 读写doc
* @author wangzonghao
*
*/
public class POIWordUtil {
/**
* 读入doc
* @param doc
* @return
* @throws Exception
*/
public static String readDoc(String doc) throws Exception {
// 创建输入流读取DOC文件
FileInputStream in = new FileInputStream(new File(doc));
WordExtractor extractor = null;
String text = null;
// 创建WordExtractor
extractor = new WordExtractor();
// 对DOC文件进行提取
text = extractor.extractText(in);
return text;
}
/**
* 写出doc
* @param path
* @param content
* @return
*/
public static boolean writeDoc(String path, String content) {
boolean w = false;
try {
// byte b = content.getBytes("ISO-8859-1");
byte b = content.getBytes();
ByteArrayInputStream bais = new ByteArrayInputStream(b);
POIFSFileSystem fs = new POIFSFileSystem();
DirectoryEntry directory = fs.getRoot();
DocumentEntry de = directory.createDocument("WordDocument", bais);
FileOutputStream ostream = new FileOutputStream(path);
fs.writeFilesystem(ostream);
bais.close();
ostream.close();
} catch (IOException e) {
e.printStackTrace();
}
return w;
}
}
测试
package com.ray.poi.util;
import junit.framework.TestCase;
public class POIUtilTest extends TestCase {
public void testReadDoc() {
try{
String text = POIWordUtil.readDoc("E:/work_space/poi/com/ray/poi/util/demo.doc");
System.out.println(text);
}catch(Exception e){
e.printStackTrace();
}
}
public void testWriteDoc() {
String wr;
try {
wr = POIWordUtil.readDoc("E:/work_space/poi/com/ray/poi/util/demo.doc");
boolean b = POIWordUtil.writeDoc("c:\\demo.doc",wr);
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}

PC/移动端的富文本编辑器wangEditor的使用

在刚开发的项目之中，在移动端/PC端，需要一个富文本器，要求：简单-轻量-实用。比较了几种器后，选择了wangEditor。
移动端的截图（手机效果好些）：

PC端的截图：

***隐藏网址***
先说配置：在PC端直接引入 wangEditor.js来创建，在移动端用的vue.js模块开发，所以用的： npm install wangeditor 来安装。

移动端：
1 . import wangeditor from ’wangeditor’ 来引入

2 . this.editor = new wangeditor (’#div1’)

4 .配置需要的选项，具体的到官网查看

5.常用的配置：

6 . this.editor.create(); //创建器，到这里创建就完成了。

7 . 但是你去发现在移动端，会不怎么适配，这时候就需要用 rem 来做适配。

如果：想要自己改变样式，那么直接在 node_moudles/wangwditor 下找到 wangEditor.js ，来自行修改。

PC端：在确保引入wangEditor.js之后，在之后的js中，写入：

轻量级富文本编辑器quill editor结合iview的使用

vue-quill-editor是我们在使用vue框架的时候常用的一个富文本器，在进行富文本的时候，我们往往要插入一些图片，vue-quill-editor默认的处理方式是直接将图片转成base64编码，这样的结果是整个富文本的html片段十分冗余，有可能导致提交失败，或者是用户体验很差，数据要传递很久才全部传送到服务器。 因此，在富文本的过程中，对于图片的处理，我们更合理的做法是将图片上传到服务器，再将得到的图片链接插入到富文本中，以达到最优的体验。

首先安装quill editor       npm install vue-quill-editor --save

全局挂载  

在main.js中引用

使用

在需要用到富文本的vue中引用和配置quill editor工具栏
在editorOption中的handlers事件中处理图片上传（配置中的handlers是用来定义自定义程序的）

iview自带的upload上传自带三个函数

在methods里面处理一下图片
如果有错误，欢迎大家多提提意见~

jsp 页面怎么用富文本编辑器

jsp使用富文本器可以参考如下:
对于一些刚入门的程序员来说，在一些实际的开发中可能会用到器，那么如何在JSP页面中嵌入并使用器（本文以百度的UEditor器为例），以下是具体的操作流程：
第一步
首先要到UEditor官网下载不同版本的器，用户可以根据自身的需求进行下载，本文操作所需要的是JSP版本，UEditor下载如图所示：
***隐藏网址***
下载完成后进行解压缩到任意文件夹，包中的内容如下图：
另附上几个器的下载地址：
***隐藏网址***
***隐藏网址***
***隐藏网址***
第二步
在Eclipse中新建Dynamic Wen Project，并在WebContent下新建文件夹，命名为UEditor，把刚解压的文件复制到该文件夹，结构如图所示：
需要注意的是，要把器所需的jar也导入到WEB-INF下的lib中：
第三步
经过以上配置，基本上已经把相应的环境配好了，接下来就是要写一个jsp页面进行展示，为了演示需要，在这里把index.jsp作为演示页面。
打开index.jsp页面，导入对应的js和css样式，代码如下：
view plain copy
《%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%》
***隐藏网址***
《html》
《head》
***隐藏网址***
《title》百度UEditor器《/title》
《script type="text/javascript" src="UEditor/ueditor.config.js"》《/script》
《script type="text/javascript" src="UEditor/ueditor.all.js"》《/script》
《link rel="stylesheet" href="UEditor/themes/default/css/ueditor.css"》
《!--建议手动加在语言，避免在ie下有时因为加载语言失败导致器加载失败--》
《!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文--》
《script type="text/javascript" charset="utf-8"
src="UEditor/lang/zh-cn/zh-cn.js"》《/script》

《style type="text/css"》
div {
width: 100%;
}
《/style》

《/head》
《body》
《textarea id="container" name="container"
style="width: 800px; height: 400px; margin: 0 auto;"》《/textarea》
《script type="text/javascript"》
UE.getEditor("container");
《/script》
《/body》
《/html》
***隐藏网址***
注意：在压缩的包中，有index.html页面，里面有具体的配置信息，本文不做详细介绍。

如何在mcv中使用富文本编辑器

1.下载.NET版本的百度富文本器，前往 下载.NET版本百度富文本框  

2.解压下载的.zip压缩包，将utf8-.net文件夹名称改为：ueditor，复制到MVC根目录下面。结构如下:

App_Code 上的文件是应用程序的源码

Config.cs 负责读取配置文件

Handler.cs 是请求处理器的基类，提供了一些基本对象的访问以及输出控制。如果需要增加处理器，应该从该基类继承

PathFormatter.cs 解析 PathFormat，把信息填充为运行时信息。

*Handler.cs 是各种处理器，处理各种 UEditor 需要的请求。

Bin 里面的是应用程序的依赖库，当前依赖 Newtonsoft 的 Json 库。Bin 目录和 App_Code 目录受应用程序保护，不用担心被用户访问到。

config.json 是 UEditor 后端的配置文件，上一节已经介绍了比较重要的配置项。

controller.ashx 是 UEditor 请求的入口，它把不同的 action 分发到不同的 Handler 来处理。

net.sln 是项目的解决方案文件，安装 Visual Studio 2013 或以上的机器可以打开进行项目的改造。

README.md 是本说明文件。

Web.config 是应用程序的配置文件