• 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="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。

  • 相关阅读:
    1、SASS / SCSS 总结简介
    Chrome 中的 JavaScript 断点设置和调试技巧
    《Javascript 设计模式》-读书笔记
    CSS基线之道
    高性能 CSS3 动画
    《编写高质量代码》web前端开发修炼之道-读书笔记
    《Effective JavaScript》编写高质量的Javascript代码的68个有效方法-读书笔记
    Sea.js-模块化开发框架
    JSLine和JSHint代码质量检查工具和uglifyjs压缩JS的
    在Windows平台上安装Node.js及NPM模块管理
  • 原文地址:https://www.cnblogs.com/niuniutry/p/3698545.html
Copyright © 2020-2023  润新知