ckeditor4.7集成
来源:互联网 发布:许晴 任盈盈 知乎 编辑:程序博客网 时间:2024/06/05 11:41
1、下载ckeditor4.7依赖文件
3、富文本读取展示
入不包含codesnippet插件的引入,此富文本的展示并没有什么坑,直接展示即可。当需要展示code部分的东西时,就出问题了。如下图:
下载地址:http://ckeditor.com/download
如上图所示,一共有四种版本。笔者直接下载的是Full Package的版本,然后根据自己的需要增加其他插件(本以为Full版本包含了所有的plugins,但是也没有包含codesnippet的插件)。插件下载地址:http://ckeditor.com/addons/plugins/all 。下载插件后(如codesnippet),将colorbutton整个文件夹放入ckeditor Full Package的plugins下面,如下所示:
如上所述之外,还需要引入codesnippet的依赖插件clipboard、lineutils、widget、dialog。
2、将上述ckeditor的依赖导入项目后,按如下操作创建编辑页面。
在body中添加textarea标签
<textarea id="TextArea1" class="ckeditor"></textarea>页面中添加js文件
var config = {extraPlugins: 'codesnippet',codeSnippet_theme: 'zenburn',height: 356};var editor = CKEDITOR.replace('TextArea1', config);$(function(){// 提交按钮$('#submit').click(function(){// 获取富文本的html值var content = editor.document.getBody().getHtml();var data = {};data.content = content;$.post("/article/save", data, function(result){var data = eval("(" + result + ")");alert(data.msg);});});});到此为止,ckeditor的编辑页面已经出来了。
3、富文本读取展示
入不包含codesnippet插件的引入,此富文本的展示并没有什么坑,直接展示即可。当需要展示code部分的东西时,就出问题了。如下图:
此时的展示还与codesnippet的依赖有关,还需引入highlight的插件(下载地址:https://highlightjs.org)。而后引入以下文件
<link rel="stylesheet" href="/js/highlight/styles/dark.css"><script src="/js/highlight/highlight.pack.js"></script>和以下js执行代码
<script>hljs.initHighlightingOnLoad();</script>到此为止,笔者以为可以完成了。但是还是出现上图的样式,仔细研究了一下发现。codesnippet在展示的时候会有一些问题,然后有调整了一下响应的css文件如下:
<style type="text/css"> .cke_widget_drag_handler_container{display: none !important;background-repeat: no-repeat !important;position: absolute;width: 15px;height: 15px;} .cke_widget_wrapper{position: relative;}</style>到这为止才完成了所有的展示工作。如下所示:
4、ckeditor富文本编辑器增加文件上传功能
当点击富文本编辑框上面的图片按钮时,此时会出现文件上传的弹出框。此时如需要上传图片,后台需要提供上传图片的接口。
首先更改/ckeditor/config.js 增加上传路径
CKEDITOR.editorConfig = function( config ) {config.filebrowserUploadUrl="/upload/file";};ckeditor上传的参数如下:upload(图片文件/POST),另外还会以GET方式带三个参数到后台:CKEditor=TextArea1&CKEditorFuncNum=1&langCode=zh-cn。在此笔者只用到了一个参数CKEditorFuncNum,用以构造返回参数。返回参数需固定格式如下(响应头中contentType='text/html'):
<script type="text/javascript"> // 第一个参数为:ckeditor传到后台的CKEditorFuncNum // 第二个参数为图片的URL地址 window.parent.CKEDITOR.tools.callFunction(1,'/images/5C1C0091-C756-4EC5-9269-2746A85EF809.png','')</script>如此图片便可以上传,而且可以预览出来。加入下面返回的script代码中是为了预览上传的图片。
链接:http://moguhu.com/article/detail?articleId=15
阅读全文
1 0
- ckeditor4.7集成
- ckeditor4集成ckfinder2
- CKEditor4.3.1+CKFinder2.4+JW Player6.7整合
- build ckeditor4.0.x
- ckeditor4配置使用
- ckeditor4.2.1常用配置
- ckeditor4.2.2插件应用
- ExtJS4整合CKEditor4.3
- ckeditor4.1配置和使用
- ckeditor4.1配置和使用
- CKEditor4.x部署和配置
- CKEditor4.3实现图片上传
- ckeditor4.3工具栏自定义配置
- ckeditor4.1配置和使用
- CKEditor4.x实现图片上传
- ckeditor4.5.1版本编辑器+ckfinder
- jFinal+ ckeditor4.8 图片上传
- ckeditor4.5.11+ckfinder_java2.6.2配置
- phpStorm使用技巧总结
- 博弈论(阶梯博弈)POJ 1704
- Chrome浏览器中使用 iframe 嵌入网页导致视频不能全屏的问题解决方法
- JQuery 中阻止事件冒泡小案例
- L1-015. 跟奥巴马一起画方块
- ckeditor4.7集成
- 最小生成树:Kruskal算法
- 进程间通信——管道
- Python中的Number(数字)
- Android安装系统App(adb push实现)
- MySQL的MMM主主互备一从+KEEPALIVED实现高可用
- bootstrap学习使用——快速入门
- C语言开发面试题
- 集合类