由于最近在架构一个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. vue2+swiper(用户操作swiper后，不能autoplay了)

    将autoplayDisableOnInteraction设置为false

  2. mac 终端常用目录跳转命令

    以前一直都是使用Windows系统,连命令行都没怎么用过.来到了Mac,在某位大神的诱导下,我开始尝试使用Mac Terminal,下面总结的是一些简单的目录跳转命令  (菜鸟级) .  文件目录 首 ...

  3. oracle数据块核心剖析

    详见: http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp57 数据块(Oracle Data Blocks),本文简称为" ...

  4. c# 读取excel数据的两种方法（转）

    转载自:http://developer.51cto.com/art/201302/380622.htm, 方法一:OleDb: 用这种方法读取Excel速度还是非常的快的,但这种方式读取数据的时候不 ...

  5. [自制操作系统] BMP格式文件读取&图形界面系统框架/应用接口设计

    本文将介绍在本人JOS中实现的简单图形界面应用程序接口,应用程序启动器,以及一些利用了图形界面的示例应用程序. 本文主要涉及以下部分: 内核/用户RW/RW调色板framebuffer共享区域 8bi ...

  6. Swiper 滑动

    1.http://www.swiper.com.cn/download/  下载Swiper.JS  Swiper.CSS 2.引入项目,添加html <div class="cont ...

  7. 关于javascript原型链的个人理解

    首先js是一种面对对象的语言,虽然大多数时候是以面对过程的形式展现出来.先来看一段代码: function Base() { this.name = 'tarol'; } function Sub() ...

  8. 【★】IT界8大恐怖预言

    IT界的8大恐怖预言 本文字数:3276 建议阅读时间:你开心就好 第三次科技革命已经进入白热化阶段---信息技术革命作为其中最主要的一环已经奠定了其基本格局和趋势.OK大势已定,根据目前的形势,小编 ...

  9. Java课程设计—学生成绩管理系统

    一. 团队名称.团队成员介绍(需要有照片) 团队名称:进击的712 团队成员 杨雪莹[组长] 201521123005 网络1511 林楚虹 201521123002 网络1511 董美凤 20152 ...

  10. 再起航，我的学习笔记之JavaScript设计模式22(访问者模式)

    访问者模式 概念介绍 访问者模式(Visitor): 针对于对象结构中的元素,定义在不改变该对象的前提下访问结构中元素的新方法 解决低版本IE兼容性 我们来看下面这段代码,这段代码,我们封装了一个绑定 ...