富文本插件Ckeditor的使用方法——效果很好

标签: 富文本 插件 ckeditor | 发表时间:2013-08-24 19:57 | 作者:java_myheart
出处:http://blog.csdn.net

 

       Ckeditor插件的下载首页: http://ckeditor.com/download,您可以根据自己的实际需要选择是Basic Package、Standard Package、Full Package。这三个版本实际上就是插件包含的js数量不同,也就是插件功能的差别。建议选择Full Package,因为ckeditor可以自定义插件的工具栏。下载ckeditor之后,将ckeditor存放至项目的WebRoot根目录下面即可。在页面引入js文件即可,如: <script type="text/javascript" src="<%=basePath %>ckeditor/ckeditor.js"></script>。这样,我们就将该插件配置好了。

       以该插件和textarea标签的使用为例,<textarea name="editor"/>,在该标签后面接着加载该插件     

     <script type="text/javascript">
      CKEDITOR.replace( 'editor',{toolbar:'mybar'});
      </script>

    其中绿色字体的是textarea的name属性的值,红色字体的是自定义的工具栏。自定义工具栏在配置文件config.js中,目录结构如下: 打开该配置文件,进行相关的配置:

CKEDITOR.editorConfig = function( config ) {
  config.language = 'zh-cn';
  config.uiColor = '#9AB8F3';
  config.toolbar = 'Basic';
  //自定义工具栏1

  config.toolbar_Basic =
  [
   ['Bold','Italic','Underline','Strike','-','Font','FontSize','TextColor','Print']

  ];
 //自定义工具栏2

  config.toolbar_mybar =
  [
   ['Font','FontSize']

  ];
 config.skin='kama';
 //去掉编辑面板下方的元素提示
 config.removePlugins='elementspath';
};

红色阴影部分表示配置默认加载自定义工具栏1,当然在页面也可以动态加载如上面的mybar就是在加载的时候动态加载自定义工具栏2.比较方便的是ckeditor还可以自定义皮肤,官网现在提供了三种皮肤。直接将下载的皮肤包放到skins文件夹下即可,插件默认的是moono,以kama皮肤为例如下图:

config.removePlugins='elementspath';这句话很有用啊,默认的编辑框左下角会显示使用的效果标签如:font、p等,十分不美观,加上这句话就可以将该麻烦去除。

        在后台获取前台form提交的内容时使用 String content=request.getParameter("editor")。在前台获取显示时,如果不想使用该插件而想使用普通的div显示时,可以这样取数据<div><s:property  value="entity.editor"  escape="false"/></div>,其中 escape该属性的配置十分重要。一定不要把s:property 标签写在textarea标签之间,如<textarea><s:property  value="entity.editor"  escape="false"/></textarea>  这种写法是无效的,建议放在div标签内。

      设置ckeditor编辑器只读,可以使用如下js代码:

<script>

    //设置富文本编辑器内容只读

    var editor;

    CKEDITOR.on( 'instanceReady', function( ev ) {

       editor = ev.editor;

       editor.setReadOnly( true );

    });

</script>

富实际上在编辑框内所有的操作都是产生相应的html标签,按下回车键时默认的是翻译成p标签,按下shift+Enter时默认翻译成br标签。我们可以根据自己的需要修改相应的配置,修改如下目录的文件:

只需要修改ckeditor.js文件中的配置即可,ctr+F查找并修改enterMode:CKEDITOR.ENTER_P,只要修改为enterMode:CKEDITOR.ENTER_BR这样按下回车键,默认的行距就没有那么大了。

   好了,今天还有工作要做,未完待续讨论ckfinder和ckeditor的其他使用.................................................

作者:java_myheart 发表于2013-8-24 19:57:52 原文链接
阅读:0 评论:0 查看评论

相关 [富文本 插件 ckeditor] 推荐:

富文本插件Ckeditor的使用方法——效果很好

- - CSDN博客推荐文章
       Ckeditor插件的下载首页: http://ckeditor.com/download,您可以根据自己的实际需要选择是Basic Package、Standard Package、Full Package. 这三个版本实际上就是插件包含的js数量不同,也就是插件功能的差别. 建议选择Full Package,因为ckeditor可以自定义插件的工具栏.

富文本编辑器杂谈

- - 标点符
在开发内容型网站的时候,少不了要接触富文本编辑器. 对开发人员来说,全新开发一个富文本编辑器会耗费大量的时间在细节的调整和坑的处理上. 在针对内部用户使用的系统中,普遍采用的方式是接入现成的开源编辑器,做简单的功能配置. 而针对面向普通用户的系统,富文本编辑器往往是单独进行设计和开发的. 在把一些功能较多,且可以配置功能项的编辑器称为传统编辑器,这类编辑器是最早出现的我们身边的,典型的代表有:百度的 ueditor、 ckeditor 4和 tinymce.

Essay:脱颖而出的富文本编辑器

- Jarod - 爱范儿 · Beats of Bits
iPhone 上的文字处理软件非常多,为什么要推荐这款 Essay. 因为它的简洁高效,因为它的云端同步,因为它顺手的控制功能,Essay 完全有实力成为沙砾中的宝石. 在 iPhone 上处理纯文本,用自带的备忘录就足够了,在什么情况下需要处理富文本呢. 例如想用 iPhone 完成一篇博客. 你当然可以用 WordPress for iPhone ,但它粗糙的功能和简陋的编辑器会让你失去愉快的感觉.

百度开源富文本编辑器UEditor v1.1.6 新版发布

- 小熊TONY - cnBeta.COM
UEditor是由百度 Web前端研发部开发的所见即所得的富文本在线编辑器,具有轻量,可定制,注重用户体验等特点,开源基于BSD协议,允许互联网开发者自由传播和使用代码. 百度UEditor的推出,可以帮助不少网站开者在开发富文本编辑器所遇到的难题,节约开发者因开发富文本编辑器所需要的大量时间,有效降低了企业的开发成本.

Google 搜索富文本摘要支持应用信息

- SotongDJ - 谷奥——探寻谷歌的奥秘
Google继续丰富搜索引擎的富文本摘要内容,随着移动应用的火热,现在他们推出了符合移动应用显示的富文本摘要. 如上图,目前支持Android Market和App Store里的应用,在富文本摘要里可显示出移动应用的图标(仅Android Market支持)、评价星级、用户评价数量、介绍和更新日期.

Flask项目集成富文本编辑器XHEditor

- - SegmentFault 最新的文章
本文介绍如何在Flask项目中集成富文本编辑器xhEditor,并实现图片上传、文件上传、视频上传、远程抓图等(包括拖拽上传)功能. xhEditor是一个基于jQuery开发的简单迷你并且高效的可视化HTML编辑器,基于网络访问并且兼容IE 6.0+, Firefox 3.0+, Opera 9.6+, Chrome 1.0+, Safari 3.22+.

5 款免费实用的富文本编辑器

- - ITeye资讯频道
Web 应用经常会用到富文本编辑器功能,当然如果是 JavaScript 大牛,重复造轮子也是可以的,如果想省时省力,可以关注下下面 5 款免费的文本编辑器框架. widgEditor 体积小,只有 33.4 KB,简洁实用,支持 HTML 编码. 主要优点:朴素,代码小,易用;. 缺点:功能不足,不易扩展,缺乏第三方支持.

百度推富文本开源编辑器 向第三方开放源代码

- Will - ITeye资讯频道
    百度正式发布Ueditor富文本Web编辑器,并向第三方开发者和团队开放编辑器源代码.     据了解,这款所见即所得的编辑器由百度web前端研发部开发,具有轻量,可定制,注重用户体验等特点. 业内人士认为,Ueditor开源编辑器能降低网站的开发成本,尤其在代码部署和定制化开发方面提供解决方案.

Google 搜索结果开始为音乐显示富文本摘要

- Zoe - 谷奥——探寻谷歌的奥秘
现在Google搜索结果将可识别出页面里的音乐,并可按照富文本摘要的形式显示出音乐的歌名、时长、是音乐还是音乐视频、来自哪张专辑,直接点击歌名可直达那首歌的页面. 目前已经有一些网站支持音乐的富文本摘要了,包括MySpace, Rhapsody 和 ReverbNation. 如果你也想让自己的音乐网站的搜索结果也提供音乐的富文本摘要,可以查看这篇文章,其实很简单,就是安装schema.org制定的音乐标记规则来加一些代码即可.

Evernote iPhone, iPad App 關鍵更新,中文介面與支援富文本編輯

- Amo - 電腦玩物
開場白還是那句老話:Evernote是我個人慣用的數位筆記本. 接著,繼之前「Evernote Android 關鍵更新,支援富文本編輯與桌面預覽便利貼」後,今天Evernote的iOS App也進行了一番大改造,其中最關鍵的新功能,就是繼Android版本後,現在iPhone、iPad上的Evernote也可以擁有富文本編輯工具列,並且擁有中文介面了.