由于最近在架构一个pc端b/s结构的项目,项目中有个论坛模块,当用户发帖时,需要用到富文本编辑器,考虑了一下,决定使用CKEditor富文本编辑器,虽然现在问世的富文本编辑器很丰富,比如还有百度的UEditor等等,但是我选择使用CKEditor的原因是它能快速引入到我的项目中去。马上附上详细步骤:

(1).工具准备,下载CKEditor:http://ckeditor.com/download(我的项目下载使用的是标准版本:ckeditor_4.7.1_standard)
(2).部署到自己项目的详细步骤:
在WebContent目录下新建用来存放解压后的所有文件的目录,目录名就叫 "ckeditor",

复制解压的所有文件到新建的ckeditor目录下,


引入ckeditor.js和config.js文件到jsp页面头部,


在要转换成富文本的textarea下方编写js代码如下:
<script type="text/javascript">CKEDITOR.replace('textarea的name');</script>


另外可以在config.js文件中进行自定义属性设置:

最后,刷新页面,一个好看的富文本编辑器就呈现出来了,大功告成!!!

富文本编辑器CKEditor的使用的更多相关文章

  1. MVC5富文本编辑器CKEditor配置CKFinder

    富文本编辑器CKEditor的使用 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: ...

  2. 富文本编辑器 CKeditor 配置使用+上传图片

    参考文献: 富文本编辑器 CKeditor 配置使用 CKEditor与CKFinder的配置(ASP.NET环境),老版本可以参考 CKEditor+CKFinder ASP版在本地电脑中的配置  ...

  3. 富文本编辑器CKEDITOR的使用配置(问题注解)

    CKEDITOR是一款非常轻便的富文本编辑器,如上图:参考网上的使用方法,我以.net为例,在aspx页面使用, 准备工作:首先要下载控件包,将解压后的整个文件夹添加到项目根目录. 第一步:引用js, ...

  4. 富文本编辑器 CKeditor 配置使用 (带附件)

    Ckeditor下载地址:http://ckeditor.com/download 1.CKeditor的基本配置 var textval=CKEDITOR.instances.TextArea1.g ...

  5. 富文本编辑器CKeditor的配置和图片上传,看完不后悔

    CKeditor是一款富文本编辑器,本文将用极为简单的方式介绍一下它的使用和困扰大家很久的图片上传问题,要有耐心. 第一步:如何使用 1.官网下载https://ckeditor.com/ckedit ...

  6. 富文本编辑器ckeditor继承

    新建一个web项目ckfinder,导入lib包 加入java包,编码格式UTF-8 在WebRoot下添加ckedtior以及ckfinder两个文件夹,将config.xml拷入WEB-INF中 ...

  7. 富文本编辑器 CKeditor 配置使用

    作者:Tyler Ning出处:http://www.cnblogs.com/tylerdonet/本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连 ...

  8. CKEditor富文本编辑器

    CKEditor 富文本即具备丰富样式格式的文本.在运营后台,运营人员需要录入课程的相关描述,可以是包含了HTML语法格式的字符串.为了快速简单的让用户能够在页面中编辑带格式的文本,我们引入富文本编辑 ...

  9. django中ckeditor富文本编辑器使用

    1.安装模块 (pillow是python的一个图像处理库) pip install django-ckeditor pip install pillow 2.编辑seetings.py配置文件 IN ...

随机推荐

  1. 南昌招聘.net开发大牛

    职位诱惑: 12年名企5险1金齐全+WEB&移动研发=丰厚回报 职位描述: 聘精通web开发成员共同成就事业! 中国领先的WEB内核 研发机构.华中地区唯一自主CMS研发厂商.江西最大的网站服 ...

  2. CGI + FastCGI(PHP-FPM)联系和区别的图解 + 注释

    一.背景 参考了几篇文章,总结成图解 + 注释方便以后查阅. 参考资料: 1.https://www.zhihu.com/question/19582041 2.https://segmentfaul ...

  3. poj 3694双联通缩点+LCA

    题意:给你一个无向连通图,每次加一条边后,问图中桥的数目. 思路:先将图进行双联通缩点,则缩点后图的边就是桥,然后dfs记录节点深度,给出(u,v)使其节点深度先降到同一等级,然后同时降等级直到汇合到 ...

  4. 【★】Web精彩实战之<智能迷宫>

    JS精彩实战之<智能迷宫>      ---宝贵编程经验分享会--- hello大家好,这里是Web云课堂,之前的一年里我们经历了Html和CSS的系统攻城,此时的你们已经是做静态(动静结 ...

  5. KVM虚拟化主机安装

    KVM虚拟化主机安装 最小化安装CentOS6.X或者CentOS7.X,RHEL6.X以上系列建议建议选择安装最小虚拟化主机 如果要安装桌面可以先选择最小化虚拟主机,再选择Gnome桌面包 安装过程 ...

  6. 【1414软工助教】团队作业2——需求分析&原型设计 得分榜

    题目 团队作业2--需求分析&原型设计 作业提交情况情况 本次作业所有团队都按时提交作业. 往期成绩 个人作业1:四则运算控制台 结对项目1:GUI 个人作业2:案例分析 结对项目2:单元测试 ...

  7. 2nd_SE-结对编程1-基于flask框架的四则运算生成器

    0x00 Coding https://coding.net/u/nikochan/p/2nd_SE/git 0x01 写在前面 因为在上一个作业中,是基于python完成的Command程序.那么再 ...

  8. java中null的类型匹配

    null作为一个特殊的参数匹配为String对象

  9. 201521123099 《Java程序设计》第4周学习总结

    1. 本周学习总结 2. 书面作业 注释的应用 使用类的注释与方法的注释为前面编写的类与方法进行注释,并在Eclipse中查看.(截图) 面向对象设计(大作业1,非常重要) 2.1 将在网上商城购物或 ...

  10. 201521123099 《Java程序设计》 第10周学习总结

    1. 本周学习总结 2. 书面作业 本次PTA作业题集异常.多线程 finally 题目4-2 1.1 截图你的提交结果(出现学号) 1.2 4-2中finally中捕获异常需要注意什么? final ...