HTML编辑器
终于有时间静下来总结一下最近的工作。
第一个就是html编辑器:
首先是编辑器的选择,之前用的是ewebeditor,功能很强大,出于粘贴word内容得安装插件的原因,暂时放弃。
ewebeditor的配置也很方便,代码如下:
<input name="form.summary" type="hidden" id="summary" value="<c:out value='${form.summary}'/>" />
<%--<iframe id="eWebEditor" src="editor/standard/ewebeditor.htm?id=content&style=coolblue" frameborder="0" scrolling="No" width="90%" height="500"></iframe>--%>
<IFRAME ID="eWebEditor1" SRC="editor/ewebeditor/ewebeditor.htm?id=summary&style=standard650" FRAMEBORDER="0" SCROLLING="no" WIDTH="99%" HEIGHT="500"></IFRAME></td>
默认选择office2003皮肤,因此改默认字体大小可以修改相应的皮肤。
之后选择了kindeditor,功能也足够用。配置如下:
引入包:
<script type="text/javascript" charset="utf-8" src="${ctxPath }/admin/kindeditor/kindeditor.js"></script>
<script type="text/javascript" charset="utf-8" src="${ctxPath }/admin/kindeditor/lang/zh_CN.js"></script>
<script type="text/javascript" charset="utf-8" src="${ctxPath }/admin/kindeditor/plugins/code/prettify.js"></script>
<textarea name="form.summary" id="summary" cols="100" rows="15" style="width:700px;height:350px;"></textarea>
js:
var editor;
KindEditor.options.cssData = 'body { font-size: 14px }';
KindEditor.ready(function(K) {
editor = K.create('#summary', {
cssPath : '${ctxPath}/ydhlw/admin/kindeditor/plugins/code/prettify.css',
uploadJson : '${ctxPath}/admin/kindeditor/jsp/upload_json.jsp',
fileManagerJson : '${ctxPath}/admin/kindeditor/jsp/file_manager_json.jsp',
allowFileManager : true,
//afterCreate : function() {
// var self = this;
// self.sync();
//}
});
prettyPrint();
});
save之前需要将数据同步到textarea里:editor.sync();
之后遇到了这样一个问题:
文本存到数据库,我在后台要取出展现到html编辑器当中,因此考虑到将文本的/n都换成<br />。
问题来了,我编辑文本保存,存到数据库之后,再取出,那么文本的/n又转换成了<br />,这样br的数量就成了原来的两倍。
采用的较简单的解决方式:用一个字段来保存内容值的状态,是第一次取出还是已编辑,如果是已编辑就不在转换/n。
HTML编辑器的更多相关文章
- NiceMark——我的Markdown编辑器
NiceMark--我的Markdown编辑器 闲来无事,写了一个Markdown编辑器.基于electron,完全采用Web前段技术(Html,css,JavaScript)实现.代码已托管在Git ...
- 关于Unity3D自定义编辑器的学习
被人物编辑器折腾了一个月,最终还是交了点成品上去(还要很多优化都还么做). 刚接手这项工作时觉得没概念,没想法,不知道.后来就去看<<Unity5.X从入门到精通>>中有关于 ...
- 在ASP.NET Core中使用百度在线编辑器UEditor
在ASP.NET Core中使用百度在线编辑器UEditor 0x00 起因 最近需要一个在线编辑器,之前听人说过百度的UEditor不错,去官网下了一个.不过服务端只有ASP.NET版的,如果是为了 ...
- 07.LoT.UI 前后台通用框架分解系列之——轻巧的文本编辑器
LoT.UI汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui 上次说的是强大的百度编辑器 http://www.cnblogs.com/d ...
- 富文本编辑器Simditor的简易使用
最近打算自己做一个博客系统,并不打算使用帝国cms或者wordpress之类的做后台管理!自己处于学习阶段也就想把从前台到后台一起谢了.好了,废话不多说了,先来看看富文本编辑器SimDitor,这里是 ...
- 玩转Vim 编辑器
一:VIM快速入门 1.vim模式介绍 以下介绍内容来自维基百科Vim 从vi演生出来的Vim具有多种模式,这种独特的设计容易使初学者产生混淆.几乎所有的编辑器都会有插入和执行命令两种模式,并且大多数 ...
- 个人网站对xss跨站脚本攻击(重点是富文本编辑器情况)和sql注入攻击的防范
昨天本博客受到了xss跨站脚本注入攻击,3分钟攻陷--其实攻击者进攻的手法很简单,没啥技术含量.只能感叹自己之前竟然完全没防范. 这是数据库里留下的一些记录.最后那人弄了一个无限循环弹出框的脚本,估计 ...
- [BootStrap] 富编辑器,基于wysihtml5
在我的周围,已经有很多人在使用BootStrap,但对于任何一个带留言.评论.提问.文章编辑功的网站,编辑器永远是重中之重,显然,早期的编辑器完全没考虑过BootStrap的出现,或皮肤跟网站不匹配, ...
- wordpress优化之结合prism.js为编辑器自定义按钮转化代码
原文链接 http://ymblog.net/2016/07/24/wordpress-prism/ 继昨天花了一天一夜的时间匆匆写了主题Jiameil3.0之后,心中一直在想着优化加速,体验更好,插 ...
- 关于SMARTFORMS文本编辑器出错
最近在做ISH的一个打印功能,SMARTFORM的需求本身很简单,但做起来则一波三折. 使用环境是这样的:Windows 7 64bit + SAP GUI 740 Patch 5 + MS Offi ...
随机推荐
- java打印Jni层log
在eclipse上新建jni工程可以参考:http://www.cnblogs.com/ashitaka/p/5953708.html 要在java层打印c的log必须引入这个头文件的宏定义: #if ...
- Security » Authorization » 基于资源的授权
Resource Based Authorization¶ 基于资源的授权 68 of 73 people found this helpful Often authorization depends ...
- SPSS数据分析—基于最优尺度变换的典型相关分析
传统的典型相关分析只能考虑变量之间的线性相关情况,且必须为连续变量,而我们依然可以使用最优尺度变换来拓展其应用范围,使其可以分析非线性相关.数据为分类数据等情况,并且不再仅限于两个变量间的分析, 虽然 ...
- CSS3支持box-flex弹性布局
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...
- System.Data.Oracleclient需要Oracle客户端软件Version8.1.7或更高版本问题
C#连接ORACLE报System.Data.Oracleclient需要Oracle客户端软件Version8.1.7或更高版本问题: 开始Webservice在32位系统ORACLE10g库中we ...
- oracle常用系统表
转自:http://blog.chinaunix.net/uid-200142-id-3479306.html dba_开头..... dba_users 数据库用户信息 dba_segme ...
- Android中ListView的各种显示效果
在android应用开发中,ListView是使用频率非常高的一个组件,基本上稍微复杂点的布局都会用到它,利用它可以让你的界面美观,有层次 .ListView可以用来作为数据显示的容器,也可以作为界面 ...
- python 中BeautifulSoup入门
什么是BeautifulSoup? Beautiful Soup 是用Python写的一个HTML/XML的解析器,它可以很好的处理不规范标记并生成剖析树(parse tree). 它提供简单又常用的 ...
- spring框架详解: IOC装配Bean
1 Spring框架Bean实例化的方式: 提供了三种方式实例化Bean. 构造方法实例化:(默认无参数) 静态工厂实例化: 实例工厂实例化: 无参数构造方法的实例化: <!-- 默认情况下使用 ...
- JQuery设置时间段下拉选择 时间下拉选择
$(document).ready(function() { var arrT = []; var tt = "{0}:{1}"; for (var i = 0; i < 2 ...