文档章节

将百度UEditor集成进SSH2项目中

Harmel
 Harmel
发布于 2015/08/07 15:03
字数 572
阅读 983
收藏 5

1、为了让Struts2不拦截编辑器的文件上传,将filter改为拦截*.action

<filter>
    <filter-name>struts2</filter-name>
    <filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
</filter>

<filter-mapping>
    <filter-name>struts2</filter-name>
    <url-pattern>*.action</url-pattern>
</filter-mapping>

2、当然是到复制UE-jsp版的几个文件夹和JS文件进项目Web根目录下,将UE提供的几个jar包复制进lib目录并删除重复jar包

页面中引入如下几个文件

<script type="text/javascript" src="js/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="js/ueditor/ueditor.all.min.js"> </script>
<script type="text/javascript" src="js/ueditor/lang/zh-cn/zh-cn.js"></script>

3、修改ueditor.config.js文件修改相应配置

必选项

window.UEDITOR_HOME_URL:应用上下文路径

可选项:

autoFloatEnabled:是否浮动顶端工具栏

elementPathEnabled:是否显示底部的元素路径

initialFrameWidth:初始化编辑器宽度

initialFrameHeight:初始化编辑器高度

initialContent:初始化编辑器内容

toolbars:顶部工具栏

也可在实例化编辑器时修改,如

var ue = UE.getEditor("textAreaID",{
    initialFrameWidth : 480,
    initialFrameHeight : 600
})


4、配置上传文件:修改jsp/config.json文件,以上传图片示例其他文件修改方式类似

imageUrlPrefix:应用上下文路径

imagePathFormat:图片保存路径格式

5、解决编辑器上传文件在线管理时图片显示错误问题(编辑器显示的是绝对路径)

A、删除ueditor-1.1.1.jar包中的com.baidu.ueditor.hunter.FileManager.class文件

B、在应用类路径下新建com.baidu.ueditor.hunter.FileManager.java,将删除的class文件反编译后复制进该文件,并修改getPath方法如下

private String getPath(File file) {
    String path = PathFormat.format(file.getAbsolutePath());
    return path.replace(this.rootPath, "/");
}

6、解决前台代码不高亮显示

A、引入CSS文件

<link rel="stylesheet" href="ueditor/third-party/SyntaxHighlighter/shCoreDefault.css">

B、引入JS文件

<script type="text/javascript" src="ueditor/third-party/SyntaxHighlighter/shCore.js"></script>

C、调用JS高亮显示

SyntaxHighlighter.all();

7、解决高亮显示撑破了页面,修改ueditor/third-party/SyntaxHighlighter/shCoreDefault.css文件

.syntaxhighlighter{width:100%!important;margin:.3em 0 .3em 
0!important;position:relative!important;overflow:auto!important;background-color:#f5f5f5!important;border:1px
 solid #ccc!important;

替换成

.syntaxhighlighter{width:100%!important;margin:.3em 0 .3em 
0!important;position:relative!important;overflow:auto!important;background-color:#f5f5f5!important;border:1px
 solid #ccc!important;word-break:break-all;

也就是在.syntaxhighlighter中增加

word-break:break-all;

8、常用API

var ue = UE.getEditor("textAreaID");
// 获得编辑器内容:纯文本
ue.getContextTxt();
// 获得编辑器内容:带格式的纯文本
ue.getPlainTxt();
// 获得编辑器内容:带HTML标签
ue.getContext();
// 判断是否有内容
ue.hasContents();

© 著作权归作者所有

Harmel

Harmel

粉丝 9
博文 33
码字总数 14582
作品 0
武汉
程序员
私信 提问
集成到 Django 的 Ueditor HTML 编辑器--DUEditor

DUEditor 是 Django 的 UEditor 插件。 本项目改造自DjangoUeditor,Ueditor HTML编辑器是百度开源的HTML编辑器。 本模块帮助在Django应用中集成百度Ueditor HTML编辑器,支持Python3,上传...

dhcn
2017/10/02
2.9K
1
如何将ueditor的ueditor-1.1.0.jar加进公司的maven的仓库

最近公司的项目要将百度的富文本编辑器ueditor(ueditor1_4_2-utf8-jsp)集成进去,点开编辑器的页面的时候页面能出来,但是后台总是会报错,就是在ueditor/jsp/controller.jsp文件中在导入com...

林家的人
2015/02/11
16K
4
【军哥谈CI框架】之CI中集成百度UEditor

Hello,各位亲,话说上一回,军哥带大家用 JQuery写了一个全国城市级联菜单的例子 ,不知道亲们学会了多少,是否自己可以独立写出来了呢。 军哥很是期待大家学有所获的,有不明白的地方随时留...

jayjun0805
2012/11/14
1K
6
fedkey/UEditor-KityFormula-for-wordpress

基本信息 UEditor-KityFormula for wordpress基于Ueditor,UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器,轻量,可定制,用户体验好。本插件将wordpress与ueditor编辑...

fedkey
01/04
0
0
网站如何集成百度UEditor编辑器

在平时的网站维护使用过程中,富文本编辑器是网站必不可少的元素之一。现在市面上各种编辑器功能设计参差不齐,自己做了几个网站都是用蝉知建站系统做的,而蝉知默认内置的编辑器是KindEdito...

it1000001001
2017/06/20
488
1

没有更多内容

加载失败,请刷新页面

加载更多

JDBC+C3P0+DBCP 基本使用

1.概述 这篇文章主要说了JDBC的基本使用,包括Statement,PreparedStatement,JDBC的连接,Mysql创建用户创建数据表,C3P0的连接与配置,DBCP的连接与配置. 2.mysql的处理 这里的JDBC使用Mysql作为...

Blueeeeeee
17分钟前
3
0
MVC Linux下开发及部署

linux使用的是 Ubuntu 64 位 18.04.2 LTS 首先复制C:\Program Files (x86)\Embarcadero\Studio\20.0\PAServer 下 LinuxPAServer20.0.tar.gz 到 linux 目录下 运行链接编译程序 delphi环境配置......

苏兴迎
今天
9
0
3.控件及其属性

1.文本 2.按钮

横着走的螃蟹
今天
7
0
安装Genymotion模拟器慢的解决方案

第一步点击下载, C:\Users\Administrator\AppData\Local\Genymobile\genymotion.log 中搜索 ova 会发现这个文件 使用迅雷下载即可. 在 虚拟机中导入这个.ova 文件 即可安装...

chenhongjiang
今天
5
0
4. 彤哥说netty系列之Java NIO实现群聊(自己跟自己聊上瘾了)

你好,我是彤哥,本篇是netty系列的第四篇。 欢迎来我的公从号彤哥读源码系统地学习源码&架构的知识。 简介 上一章我们一起学习了Java中的BIO/NIO/AIO的故事,本章将带着大家一起使用纯纯的N...

彤哥读源码
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部