Ckeditor是一个功能非常强大的富文本编辑器，博客园有使用此编辑器，其功能完全可以与MS的Word媲美。

用起来也非常方便。下面是本人总结的安装步骤：

第一步，从http://ckeditor.com/download 下载ckeditor文件包

第二步，新建web项目，然后把下载的ckeditor文件包直接放在下面，

第三步，创建实例，此时如下图

整个sample.html的代码是：(此时笔者已经把它设置为全屏显示了)

<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<TITLE>Editor</TITLE>
<script src="ckeditor/adapters/jquery-1.9.1.min.js"></script>
<script src="ckeditor/ckeditor.js"></script>
<script src="ckeditor/adapters/jquery.js"></script>
</HEAD>
<BODY>

<script type="text/javascript">

function fullping() {
var oCKeditor;
oCKeditor = CKEDITOR.replace('content');
oCKeditor.on('instanceReady', function (event) {
var editor = event.editor;
setTimeout(function () {
// Delay bit more if editor is still not ready.
if (!editor.element) {
setTimeout(arguments.callee, 100);
return;
}
event.removeListener('instanceReady', this.callee);
if (editor.name == 'content') {
var command = editor.getCommand('maximize');
command.exec();
}
}, 0);
}, null, null, 9999);
};
</script>

<script type="text/javascript">
$(document).ready( function() {
//$('#content').ckeditor();

fullping();
});

</script>
<div>
<textarea id="content" name="content" class="ckeditor">
</textarea>

</div>
</BODY>
</HTML>

第四步，执行结果如下：

第五步，上传图片，

可以打开ckeditor/plugins/image/dialogs/image.js文件，搜索“b.config.image_previewText”就能找到这段鸟语了，(b.config.image_previewText||'')单引号中的内容全删了，注意别删多了。

扫除这个障碍，下面来研究图片上传。

首先，还是image.js这个文件，搜索“upload”可以找到这一段

id:'Upload',hidden:true

实际上上传功能被隐藏了，把上面的true改成false，再打开编辑器，就能找到上传功能了。

至于上传的action可以在config.js里配置，

config.filebrowserUploadUrl="actions/ckeditorUpload";

var pathName = window.document.location.pathname;
//获取带"/"的项目名，如：/uimcardprj
var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
config.filebrowserImageUploadUrl = projectName+'/upload.do'; //固定路径

后台的上传要自己写哦。

有同学要demo,可以留名，发你。

ckedit 文本编辑器的更多相关文章

  1. 富文本编辑器Simditor的简易使用

    最近打算自己做一个博客系统,并不打算使用帝国cms或者wordpress之类的做后台管理!自己处于学习阶段也就想把从前台到后台一起谢了.好了,废话不多说了,先来看看富文本编辑器SimDitor,这里是 ...

  2. 个人网站对xss跨站脚本攻击（重点是富文本编辑器情况）和sql注入攻击的防范

    昨天本博客受到了xss跨站脚本注入攻击,3分钟攻陷--其实攻击者进攻的手法很简单,没啥技术含量.只能感叹自己之前竟然完全没防范. 这是数据库里留下的一些记录.最后那人弄了一个无限循环弹出框的脚本,估计 ...

  3. 关于SMARTFORMS文本编辑器出错

    最近在做ISH的一个打印功能,SMARTFORM的需求本身很简单,但做起来则一波三折. 使用环境是这样的:Windows 7 64bit + SAP GUI 740 Patch 5 + MS Offi ...

  4. 基于trie树的具有联想功能的文本编辑器

    之前的软件设计与开发实践课程中,自己构思的大作业题目.做的具有核心功能,但是还欠缺边边角角的小功能和持久化数据结构,先放出来,有机会一点点改.github:https://github.com/chu ...

  5. UEditor百度富文本编辑器--让编辑器自适应宽度的解决方案

    UEditor百度富文本编辑器的initialFrameWidth属性,默认值是1000. 不能够自适应屏幕宽度.如图1: 刚开始的时候,我是直接设置initialFrameWidth=null的.效 ...

  6. [bzoj1269][AHOI2006文本编辑器editor] (splay模版题 or pb_ds [rope]大法)

    Description 这些日子,可可不和卡卡一起玩了,原来可可正废寝忘食的想做一个简单而高效的文本编辑器.你能帮助他吗?为了明确任务目标,可可对“文本编辑器”做了一个抽象的定义:   文本:由0个或 ...

  7. Bzoj1269 [AHOI2006]文本编辑器editor

    Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 3678  Solved: 1380 Description 这些日子,可可不和卡卡一起玩了,原来可可正 ...

  8. PHP Ueditor 富文本编辑器

    2016年12月11日 08:46:59 星期日 百度的简版富文本编辑器umeditor很久没更新了 全功能版本的配置项跟umeditor还是有区别的, 这里说下ueditor怎么对接到项目中去, 主 ...

  9. js中的文本编辑器控件KindEditor---那些打酱油的日子

    使用文本编辑器控件KindEditor渲染文本域页面显示 this.sync()同步KindEditor的值到textarea文本框 editor.isEmpty()判断文本域是否是空 editer. ...

随机推荐

  1. php调用phpqrcode.php生成二维码

    下载phpqrcode.php 下载地址: http://files.cnblogs.com/files/qhorse/phpqrcode.rar qrcode.php文件: <?php inc ...

  2. shell判断文件是否存在

    转自:http://www.cnblogs.com/sunyubo/archive/2011/10/17/2282047.html 1. shell判断文件,目录是否存在或者具有权限 2. #!/bi ...

  3. Linggle: 英语写作学习搜索引擎

    Linggle 搜索引擎是一个可用于英语写作的语法.句子工具,可帮助学习者分析更准确的英文写作建议,能够根据词性来推测短句和句子,可精准的分享出完整英文句子如何撰写. Linggle 是台湾学术团队研 ...

  4. Mesa 3D

    Mesa 3D是一个在MIT许可证下开放源代码的三维计算机图形库,以开源形式实现了OpenGL的应用程序接口. OpenGL的高效实现一般依赖于显示设备厂商提供的硬件,而Mesa 3D是一个纯基于软件 ...

  5. 注解：【有连接表的】Hibernate单向N->1关联

    Person与Address关联:单向N->1,[有连接表的] Person.java package org.crazyit.app.domain; import javax.persiste ...

  6. c语言的字符串操作（比较详细）

    1)字符串操作 strcpy(p, p1) 复制字符串 strncpy(p, p1, n) 复制指定长度字符串 strcat(p, p1) 附加字符串 strncat(p, p1, n) 附加指定长度 ...

  7. LoadRunner 脚本学习 -- 使用动态链接库

    DLL = Dynamic Link Library DLL最重要的一个特点就扩展应用程序的特性. 再强大的工具也有不是万能的,通过调用动态库的方法极大地增强loadrunner的功能.当你在用loa ...

  8. 战斗住的DPS才是DPS，持续的执行力才是执行力

    工作久了,真的发现执行力这个东西太难被贯彻,计划时信心满满,冲劲十足,持续一段时间后就喇叭腔了.

  9. 第二个div+css前端项目

    先展示效果图: 为了看全景,截图有点挫.实际效果比这个好一点. 通过 text-overflow可以隐藏多出的文字,而不会吧把div撑开或者溢出. html代码: <!DOCTYPE html& ...

  10. ember.js:使用笔记1-数组数据统一显示

    ember中数据一般都是以array的形式存储的,控制器使用,如: App.DataController = Em.ArrayController.extend({}); 想要在一个页面中输出所有的数 ...