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,可以留名，发你。

转载于:https://www.cnblogs.com/xiexy/p/3891731.html

ckedit 文本编辑器相关推荐

  1. 步步为营-91-富文本编辑器

    需要的文件包已经上传到对应的百度网盘中了 一:CkEdit富文本编辑器 1:富文本编辑器 需要注意的是:禁止对页面的安全监测主要是"<>" a:配置webConfig文 ...

  2. Django 第三方引用富文本编辑器6.1

    借助富文本编辑器,管理员能够编辑出来一个包含html的页面,从而页面的显示效果,可以由管理员定义,而不用完全依赖于前期开发人员 此处以tinymce为例,其它富文本编辑器的使用可以自行学习 使用编辑器 ...

  3. .net下的富文本编辑器FCKeditor的配置方法（图）原创

    .net下的富文本编辑器FCKeditor的配置方法(图)原创 FCKeditor是一款开源的富文本编辑器,几乎支持所有流行的Web开发语言,版本稳定,用户多,可配置性好. 以前做Java和php的时 ...

  4. ASP.NET2.0 文本编辑器FCKeditor的冰冷之心 【月儿原创】

    ASP.NET2.0 文本编辑器FCKeditor的冰冷之心 作者:清清月儿 主页:http://blog.csdn.net/21aspnet/           时间:2007.4.9 FCKed ...

  5. sql文本编辑器_专业文本编辑工具

    Mac上好用的文本编辑器是哪个?TextMate for Mac是一款多功能的纯文本编辑器,支持所有主要的编程语言,是一款操作简单又实用的编辑工具,macdown提供TextMate Mac版软件下载 ...

  6. c# html文本编辑器,C#实现简单文本编辑器

    本文实例为大家分享了C#实现简单文本编辑器的具体代码,供大家参考,具体内容如下 建立一个窗体文件,实现对文件的编辑保存和对txt文件的打开 界面设计: 程序源代码: //form1.cs using ...

  7. linux如何编译tex,Linux下优秀的文本编辑器（Markdown、LaTeX、MathJax）

    这样一个标题可能不太准确,因为确实无法准确地解释什么叫"Linux下优秀的文本编辑器".其实我这篇随笔主要是想探讨Markdown.LaTeX.MathJax,有兴趣的朋友可以继续 ...

  8. jeecg富文本编辑器增加字体(仿宋)

    jeecg富文本编辑器增加字体(仿宋) 温馨提示:jeecg 提供了 uedit 富文本的实现,如下针对的是 uedit 增加仿宋字体示例. 主要修改三个文件:plug-in\ueditor\uedi ...

  9. “笨方法”学习Python笔记（2）-VS Code作为文本编辑器以及配置Python调试环境

    Visual Studio Code 免费跨平台文本编辑器,插件资源丰富,我把其作为Debug的首选. 下载地址:https://code.visualstudio.com/Download 安装之后 ...

最新文章

  1. 一篇SSM框架整合友好的文章（二）
  2. 鸿蒙之下5怎么跳城池,鸿蒙之空间道尊
  3. java中public private_java中public、private、protected区别
  4. 太多产品人死于汇报！
  5. pythongoogle.probuf.timestamp_gRPC快速入门（一）——Protobuf简介
  6. 【BZOJ1901】Zju2112 Dynamic Rankings
  7. 《精通Android 5 多媒体开发》——第6章，第6.1节视频系统结构
  8. python免费全套教程-2020全网 最详细的Python入门教程完整版，无偿分享，收藏
  9. WCF 基础 契约 和 绑定
  10. ASP.NET Core--授权过滤器
  11. Java汉字md5值不一致问题
  12. 由外而内看敏捷软件开发（上）——从业务视角看敏捷
  13. jquery.筛选文档处理
  14. vivo9.0以上系统如何无需Root激活XPOSED框架的流程
  15. 计算机自带输入法在哪里设置方法,电脑输入法设置在哪里_电脑输入法在哪里删除...
  16. 小米手机修改imei教程_小米手机imei码和s/n码以及测试调试界面唤起代码
  17. 医学院交换去计算机学院,2017年北京协和医学院阜外心血管病医院823计算机原理考研强化模拟题...
  18. Navicat连接腾讯云服务器的MySQL
  19. 软件绿化之实践一--绿化搜狗输入法
  20. 《高考前夕时间旅行的可行性研究报告》

热门文章

  1. sendmail服务器案例配置
  2. liunx 下dhcp中继及服务器配置
  3. 关于软件产业的两个契机
  4. 控制语句 for while if switch
  5. MFC里ON_COMMAND_RANGE消息映射的ID问题
  6. CQRS实践(3): Command执行结果的返回
  7. PHP上传文件函数move_upload,如何使用php中move_uploaded_file函数
  8. 以太坊去中心化_开发以太坊去中心化投票应用程序的指南
  9. 西北工业大学21计算机考研,西北工业大学2018年计算机考研879专业综合考试大纲...
  10. Python os库的使用