由于最近在架构一个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. poj 2762 强连通缩点+拓扑排序

    这题搞了好久,先是拓扑排序这里没想到,一开始自己傻乎乎的跑去找每层出度为1的点,然后才想到能用拓扑排序来弄. 拓扑排序的时候也弄了挺久的,拓扑排序用的也不多. 题意:给一个图求是否从对于任意两个点能从 ...

  2. Error:Failed to load project configuration:xxxxxxxxxxxxxxxxxxxx cannot read file .idea/misc.xml

    你这idea不会没有配置默认jdk吧?你看看File--other settings--default project structure,看看project setting的project里面,有没 ...

  3. 团队作业4--第一次项目冲刺（Alpha版本）7

    一.Daily Scrum Meeting照片 二.燃尽图 三.项目进展 1.完成全部基础功能 2.完成一些小改进与优化 四.困难与问题 软件基本是可以运行并且正常使用,但还没有实战过,遇到的问题与困 ...

  4. 【Alpha】第三次Daily Scrum Meeting

    GIT 一.今日站立式会议照片 二.会议内容 1.确定开发人员负责开发模块 开发人员 开发模块 杨嘉成 注册登陆模块 吴文庆 服务模块 程志铭 个人中心 2.测试人员在开发人员完成该模块后紧跟测试 三 ...

  5. Sqli-Labs学习总结一

    题目1-20 github地址 前言 以前对于SQL注入,就是先判断下能不能注入,可以的话先试着联合查询,不行的话再上SQLMap,去年寒假拿了一本<SQL注入攻击与防御>,拿回家,看了几 ...

  6. 团队作业4——第一次项目冲刺（ALpha版本）第三天

    一.Daily Scrum Meeting照片 二.燃尽图 三.项目进展 1.界面 完成了前端的HTML页面设计 2.功能 完成了后端数据处理的全部基本功能: 数据结构设计及数据交互操作 博客页面数据 ...

  7. 201521123047 j第五周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 1.2 可选:使用常规方法总结其他上课内容. 参考资料: 百度脑图 XMind 2. 书面作业 1.代码阅读:Child压缩包 ...

  8. 201521123073《Java程序设计》第3周学习总结

    1. 本周学习总结 2. 书面作业 1.代码阅读 public class Test1 { private int i = 1;//这行不能修改 private static int j = 2; p ...

  9. evak购物车-课程设计（201521123034陈凯欣）

    1.团队课程设计博客链接 https://i.cnblogs.com/EditPosts.aspx?postid=7047127 2.个人负责模块或任务说明 1.Java 编写商品类Goods,商品属 ...

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

    1.本章学习总结 2. 书面作业 本次PTA作业题集异常 1.常用异常 题目5-1 Q1.1 截图你的提交结果(出现学号) Q1.2 自己以前编写的代码中经常出现什么异常.需要捕获吗(为什么)?应如何 ...