在线编辑器(WangEditor)

  自己之前写了一篇关于POI 相关的博客, 想了想在公司中一般常用的不就是上传下载,poi,分页,定时等。好像还有个在线编辑器, 于是自己就花了两个多小时把编辑器相关的代码撸了遍,当然了是先百度找了找资料,看了看实现的逻辑,然后自己撸的。 编辑器自己使用的是WangEditor,网上也有很多关于Editor,kindEitor 的文章, 不过貌似好像没用。业务方面:在编辑器中编辑, 然后保存为word,或者将word中的内容加载进在线编辑器中再次编辑。

http://www.wangeditor.com/   这是WangEditor的相关网址,其中api,文档,实例都有。 WangEditor使用,配置还是相对来说比较简单的,引入相关js,创建editor对象,初始化对象。

  

editor.txt.html() 会将在编辑器中编辑的内容获取,然后你直接将其传入后台便可以获取到编辑器中编辑的内容。

当你使用编辑器编辑并保存后,会在指定的保存位置生成一个word,txt文件夹和一天个htm文件。txt文件夹中是txt文件。txt文件和htm文件都是自动生成的。其中txt文件里是HTML中的标签语言,当你要将word中的内容加载进编辑器再次编辑时,获取的内容是相对应的txt文件中的内容。htm文件只有一个,是刚使用用WangEditor创建word成功后生成的,其就是个HTML文件,其中的标签,属性对应的都是编辑器中展示的模样。当你保存生成word时,是先读取htm中的内容,将${content}替换成你编辑的内容,样式什么的htm文件中模板原先就有。然后利用流将HTML中的内容写入到word中并生成word。

package com.cn.platform.utils;

import java.io.*;

import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class EditorUtils {

// 获取项目文件路径
public static String getUploadPath(HttpServletRequest request,String name){
StringBuilder sb = new StringBuilder();
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;
String uploadPath = sb.append(basePath).append("/ui/CAndTFiles/").append(name).append(".doc").toString();
return uploadPath;
}

//获取服务器,本地文件路径
public static String getWindowsPath(HttpServletRequest request,String name){
StringBuilder sb = new StringBuilder();
String windowPath = sb.append("I:/yishangxincheng/ysdFiles/").append(name).append(".doc").toString();
return windowPath;
}

//获取服务器,本地文件路径
public static String getWindowsTxtPath(HttpServletRequest request,String name){
StringBuilder sb = new StringBuilder();
String windowPath = sb.append("I:/yishangxincheng/ysdFiles/txt/").append(name).append(".txt").toString();
return windowPath;
}

/*public static void saveWord(String editTemplate,String windowPath,HttpServletRequest request,HttpServletResponse response) throws IOException{
EditorUtils.setCode(request, response);
if (editTemplate != null) {
List<String> array = new ArrayList<>();
array.add(editTemplate);
XWPFDocument doc = new XWPFDocument();
XWPFParagraph para = doc.createParagraph();
XWPFRun run = para.createRun();
OutputStream os = new FileOutputStream(windowPath);
for (String s : array) {
//把doc输出到输出流
run.setText(s);
doc.write(os);
}
os.close();
doc.close();
}
}*/

//设置编码
public static void setCode(HttpServletRequest request,HttpServletResponse response) throws IOException {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
}

//导出
public static void export(HttpServletRequest request,HttpServletResponse response,String url) throws IOException {
EditorUtils.setCode(request, response);
//获取文件下载路径
String filename = url.substring(url.length()-4, url.length());
if (filename.equals("docx")) {
filename = url.substring(url.length()-6, url.length());
}else{
filename = url.substring(url.length()-5, url.length());
}
File file = new File(url);
if(file.exists()){
//设置相应类型让浏览器知道用什么打开 用application/octet-stream也可以,看是什么浏览器
response.setContentType("application/x-msdownload");
//设置头信息
StringBuilder sb = new StringBuilder();
response.setHeader("Content-Disposition", sb.append("attachment;filename=\"").append(filename).append("\"").toString());
InputStream inputStream = new FileInputStream(file);
ServletOutputStream ouputStream = response.getOutputStream();
byte b[] = new byte[1024];
int n ;
while((n = inputStream.read(b)) != -1){
ouputStream.write(b,0,n);
}
//关闭流
ouputStream.close();
inputStream.close();
}
}

// 读取.mht网页中的信息
private static String readFile(String filePath) throws Exception{
StringBuilder sb = new StringBuilder();
BufferedReader br = null;
try {
br = new BufferedReader(new InputStreamReader(new FileInputStream(filePath),"utf-8"));
while (br.ready()) {
sb.append((char) br.read());
}
}catch(Exception e){
e.printStackTrace();
}finally {
if (br!=null) {
br.close();
}
}
return sb.toString();
}

//将HTML转word
private static boolean writeWordFile(String content ,String path,String fileName) throws Exception{
boolean flag = false;
FileOutputStream fos = null;
StringBuilder sb = new StringBuilder();
try {
if(!"".equals(path)){
byte[]b = content.getBytes("utf-8");
fos = new FileOutputStream(sb.append(path).append(fileName).append(".doc").toString());
fos.write(b);
fos.close();
flag = true;
}
}catch (IOException e)
{
e.printStackTrace();
}finally {
if (fos !=null) {
fos.close();
}
}
return flag;
}

public static void htmlToWord(String editorContent,String htmlPath,HttpServletRequest request,String wordPath,String wordName) throws Exception{
//读取网页中的内容
String htmlFile = EditorUtils.readFile(htmlPath);
// 替换后的内容
String endContent = htmlFile.replace("${content}", editorContent);
//转word
EditorUtils.writeWordFile(endContent, wordPath, wordName);
}

// 将editorContent存入txt中用于载入时直接使用
public static void saveEditorContent(String editorContent,String targetPath,String fileName) throws IOException{
FileOutputStream fos = null;
StringBuilder sb = new StringBuilder();
try {
if(!"".equals(targetPath)){
byte[]b = editorContent.getBytes("utf-8");
fos = new FileOutputStream(targetPath);
fos.write(b);
fos.close();
}
}catch (IOException e)
{
e.printStackTrace();
}finally {
if (fos !=null) {
fos.close();
}
}

}

//载入
public static String load(String name,HttpServletRequest request,HttpServletResponse response) throws IOException{
EditorUtils.setCode(request, response);
String path = EditorUtils.getWindowsTxtPath(request, name);
StringBuilder sb= new StringBuilder();
BufferedReader br = null;
try {
br = new BufferedReader(new InputStreamReader(new FileInputStream(path),"utf-8"));
while (br.ready()) {
sb.append((char) br.read());
}
}catch(Exception e){
e.printStackTrace();
}finally {
if (br!=null) {
br.close();
}
}

return sb.toString();
}

}

   其中主要的代码就是工具类,代码都是能直接使用的。当然了,代码我还有10%没弄上来,不过我相信有了这些代码,看到此篇博客的人应该没问题。

  在此,希望此篇博客能帮助到一些人。

原文地址:https://www.cnblogs.com/jingjiren/p/10042606.html

时间: 2024-11-10 15:52:17

在线编辑器(WangEditor)的相关文章

CKedit在线编辑器

在线编辑器???? ????在实现所见即得的编辑效果. FCK????????????是开发者的名字的缩写 CKEditor????????功能很完善的,具有,在线编辑与图片上传JS插件 UEdit????????????百度自己开发的一款在线编辑器 ? CKeditor安装 http://resource.ckeditor.com/ basic package????????基本安装包????????只包含了基本的功能 standard package????标准安装包????????包含更多

Angularjs在线编辑器

1.TextAngular: https://github.com/fraywing/textAngular textAngular是一个强大的Text-Editor/Wysiwyg 编辑器,用于Angular.js应用中.安装使用方便,可以创建多个编辑器实例,双向绑定HTML内容,可以查看编辑内容的变化.不足之处是不支持上传文件到服务器,只能进行简单的文字编辑,可用于网站的用户评论模块 2.angular.xheditor: https://github.com/cipchk/angular.

jsp解决kindeditor在线编辑器struts图片上传问题

1.下载 官网下载ckeditor,解压后去掉不需要的部分,仅需保留plugin,lang,theme文件夹,这三个文件夹中用不到的东西可以删除, 比如lang文件下存放所有语言文件js,仅仅 保留en.js和zh_CN.js即可,保留jsp文件夹下的json_upload.jsp文件和 kindeditor.js文件即可,把jsp下面的jar导入 在线编辑器:http://kindeditor.net/ 2.修改json_upload.jsp 修改json_upload.jsp文件保存路径即可

用Javascript 编写 HTML在线编辑器

在线编辑器主要有3大类:1.直接用textarea 标签 优点:速度快,提交方便,可以用UBB标签来弥补不能所见所得 缺点:不直观,功能非常少 2.用 DIV或者TABLE的CONTENTEDITABLE 标签,属性来让一个区域可以编辑 优点:可以很直观,可以做各种效果 缺点:此标签在mozilla下不可用,只适合IE浏览器,且对js要求高 3.用iframe或者frame的中的document的document.designMode ="On" 来实现可编辑 优点:具有上面第二条的全

PHP.25-TP框架商城应用实例-后台1-添加商品功能、钩子函数、在线编辑器、过滤XSS、上传图片并生成缩略图

添加商品功能 1.创建商品控制器[C] /www.test.com/shop/Admin/Controller/GoodsController.class.php <?php namespace Admin\Controller; use Think\Controller; //后台添加商品功能控制器 class GoodsController extends Controller { //显示和处理表单 public function add() { //判断用户是否提交了表单(如果提交了,就

thinkphp使用在线编辑器存入html标签被转义解决

thinkphp中的create 方法收集的post表单数据中的html标签如:<p>之类存入数据库时会被转义成< p > ,导致前台显示都是代码,这个问题困扰了我几天,从fckeditor换到Ueditor还是同样的结果,最后终于搞定了 解决办法:单独收集在线编辑器的数据:$xxx -> yy = $_POST['字段名']  希望能帮助遇到同样问题的朋友!

在线编辑器Ckeditor (1) - php (30)

在线编辑器 在线编辑器也称之为所见即所得编辑器,是一种常见的html源码编辑器. 所见即所得:用户在输入的时候,不论是格式和是样式都能被系统原封不动的保存,最后在查看的时候,可以按照用户输入的原来的结构进行输出. 在线编辑器分类 市面上比较常见的在线编辑器有很多,FCKeditor(在线编辑器+Ajax浏览器端服务器文件管理器,免费的),Ckeditor(Content and Knowledge,在线编辑器与服务器端文件管理器分离,在线编辑器免费,服务器端文件管理器收费(CKfinder)),

Html、CSS、JavaScript 实时效果在线编辑器 - 学习的好工具,算不算?!

关于 二维码 与 NFC 之间的出身贫贱说 太阳火神的美丽人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协议 转载请保留此句:太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究:iOS.Android.Html5.Arduino.pcDuino,否则,出自本博客的文章拒绝转载或再转载,谢谢合作. http://jsfiddle.net/vnkuZ/ 总共四个工作区:左上是 Html 界面组件:左下

超简单的标记语言Markdown-写博客-语法-在线编辑器

几个不错的网站:免费图床  在线编辑器 语法: