ckedit 文本编辑器

时间:2021-05-17 18:51:14

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

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

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

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

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

ckedit  文本编辑器

整个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>

第四步,执行结果如下:

ckedit  文本编辑器

第五步,上传图片,

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

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

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

id:'Upload',hidden:true

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

ckedit  文本编辑器

至于上传的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,可以留名,发你。