ckedit 文本编辑器
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 文本编辑器的更多相关文章
- 富文本编辑器Simditor的简易使用
最近打算自己做一个博客系统,并不打算使用帝国cms或者wordpress之类的做后台管理!自己处于学习阶段也就想把从前台到后台一起谢了.好了,废话不多说了,先来看看富文本编辑器SimDitor,这里是 ...
- 个人网站对xss跨站脚本攻击（重点是富文本编辑器情况）和sql注入攻击的防范
昨天本博客受到了xss跨站脚本注入攻击,3分钟攻陷--其实攻击者进攻的手法很简单,没啥技术含量.只能感叹自己之前竟然完全没防范. 这是数据库里留下的一些记录.最后那人弄了一个无限循环弹出框的脚本,估计 ...
- 关于SMARTFORMS文本编辑器出错
最近在做ISH的一个打印功能,SMARTFORM的需求本身很简单,但做起来则一波三折. 使用环境是这样的:Windows 7 64bit + SAP GUI 740 Patch 5 + MS Offi ...
- 基于trie树的具有联想功能的文本编辑器
之前的软件设计与开发实践课程中,自己构思的大作业题目.做的具有核心功能,但是还欠缺边边角角的小功能和持久化数据结构,先放出来,有机会一点点改.github:https://github.com/chu ...
- UEditor百度富文本编辑器--让编辑器自适应宽度的解决方案
UEditor百度富文本编辑器的initialFrameWidth属性,默认值是1000. 不能够自适应屏幕宽度.如图1: 刚开始的时候,我是直接设置initialFrameWidth=null的.效 ...
- [bzoj1269][AHOI2006文本编辑器editor] (splay模版题 or pb_ds [rope]大法)
Description 这些日子,可可不和卡卡一起玩了,原来可可正废寝忘食的想做一个简单而高效的文本编辑器.你能帮助他吗?为了明确任务目标,可可对“文本编辑器”做了一个抽象的定义: 文本:由0个或 ...
- Bzoj1269 [AHOI2006]文本编辑器editor
Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 3678 Solved: 1380 Description 这些日子,可可不和卡卡一起玩了,原来可可正 ...
- PHP Ueditor 富文本编辑器
2016年12月11日 08:46:59 星期日 百度的简版富文本编辑器umeditor很久没更新了 全功能版本的配置项跟umeditor还是有区别的, 这里说下ueditor怎么对接到项目中去, 主 ...
- js中的文本编辑器控件KindEditor---那些打酱油的日子
使用文本编辑器控件KindEditor渲染文本域页面显示 this.sync()同步KindEditor的值到textarea文本框 editor.isEmpty()判断文本域是否是空 editer. ...
随机推荐
- WebStorm中将Project分享到GitHub时报“Error Running Git”错误的解决办法
错误信息 Cannot run program "git.exe":CreateProcess error=2,系统找不到指定的文件. 解决办法 从错误信息就可以知道,WebSto ...
- Codeforces Round #370 (Div. 2) D. Memory and Scores DP
D. Memory and Scores Memory and his friend Lexa are competing to get higher score in one popular c ...
- 【SSH】 之 Struts2
(一)Struts2是什么? Struts2是一个基于MVC设计模式的Web应用框架,它本质上相当于一个servlet,在MVC设计模式中,Struts2作为控制器(Controller)来建立模型与 ...
- CodeForces 19D Points（线段树+map）
开始想不通,后来看网上说是set,就有一个想法是对每个x建一个set...然后又想直接建立两重的set就好,最后发现不行,自己想多了... 题意是给你三种操作:add (x y) 平面添加(x y) ...
- 简单记录在Visual Studio 2013中创建ASP.NET Web API 2
在很多跨平台的应用中就需要Web API ,比如android与数据库的交互. Create a Web API Project 选择新建项目下的模板下的Visual C#节点下的Web节点,在模板列 ...
- DOM--3 DOM核心和DOM2 HTML(1)
网页是一种结构化的文档,使用一组预定义的XML和HTML标签进行标记:当浏览器接受到网页文档时,会根据文档类型和关联的样式表对其进行解析,然后以可视化形式显示在屏幕上. DOM是一组用来描述脚本怎样与 ...
- 分享Kali Linux 2016.2第43周镜像
分享Kali Linux 2016.2第43周镜像Kali Linux官方于10月23日如约发布了2016.2第43周镜像.和以往一样,此次镜像包含了11个镜像文件,包含PC端的32和64位镜像,还有 ...
- 使用Genymotion安装APK出现错误INSTALL_FAILED_CPU_ABI_INCOMPATIBLE的解决办法
当我们安装好Genymotion后,把Android运用部署到上面调试时,console控制台会报错:Installation error: INSTALL_FAILED_CPU_ABI_INCOMP ...
- [bzoj3813]奇数园
仿佛现在已经完成了做题之前先开个坑的习惯,也许是为了逼迫自己去刷一些神题吧...然并卵,该剩的好多坑还是剩着呢. [bzoj3813]一道线段树好题.已经把数论忘光光了. 欧几里德算法 扩展欧几里德算 ...
- React组件
React组件 组件是React中的基本单位,在每个组件里面又封装了程序逻辑,通过reader标出界面片段或者回传一段描述,组件再通过React.renderComponent将组件展示在浏览器中.每 ...