CKeditor配置大全
文章分类:Web前端
第一步:基本配置
CKEditor + CKFinder 配置流水账:
CKEditor:
1.解压CKEditor到webRoot目录,在应用页面加载其ckeditor.js ;
2.页面textarea:
[html]<textarea cols=”80″; name=”editor1″ rows=”10″></textarea>;[/html]
CKFinder:
3.解压CKFinder到webRoot目录(最好与CKEditor同级),在应用页面加载其ckfinder.js ;
4.页面script:(最好textarea之后)
[javascript]
if (typeof CKEDITOR == ‘undefined’) {
document.write(’加载CKEditor失败’);
}
else {
var editor = CKEDITOR.replace(’editor1′);
CKFinder.SetupCKEditor(editor, ‘../ckeditor/ckfinder/’); //ckfinder总目录的相对路径.
}
[/javascript]
整合:
(把俩js加载到同一文件其实就已经基本整合好了,还需要修改的配置如下)
5.打开/ckfinder/config.php,修改$baseUrl = ‘(上传附件的存放路径)’; //以webRoot为起始的绝对路径,其目录下会自动生成images、flash等子目录;默认是在webRoot的根目录下,注意修改。
至此配置完毕,如果需要自定义界面,可进行以下的高级修改:
6.在ckeditor/config.js中的CKEDITOR.editorConfig里加入以下需要自定义的配置代码:
[css]
//字体.
config.font_names = ‘宋体;楷体_GB2312;新宋体;黑体;隶书;幼圆;微软雅黑;Arial;
Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana;’ ;
//工具按钮.
config.toolbar=
[
['Source','-','Save','NewPage','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print','SpellChecker','Scayt'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Form','Checkbox','Radio','TextField','Textarea','Select','Button',
'ImageButton','HiddenField'],
‘/’,
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar',
'PageBreak'],
‘/’,
['Styles','Format','Font','FontSize'],
['TextColor','BGColor'],
['Maximize','ShowBlocks','-','About']
];
//宽度
config.width = 500;
//高度
config.height = 400;
//皮肤
config.skin=’v2′;
//等等… …
[/css]
安装CKFinder后才能有上传功能:
第二步:设置CKFinder的上传功能
由于本次CKEditor全新改版,没有提供文件上传功能,所以选择整合CKFinder是个不错的选择
需要修改一下CKEditor插件文件夹下的JS源码,以image插件为例(Flash及Files同理):
Code
//将下边的代码做一些修改
//{type:'button',id:'browse',align:'center',label:m.lang.common.browseServer,hidden:false,filebrowser:'info:txtUrl'}]}]},
//2009-07-13 将浏览服务器按钮置为显示状态 (hidden: false),增加onClick函数,用于打开ckfinder页面,紧接着上面的代码添加
{ type: 'button', id: 'browse', align: 'center', label: m.lang.common.browseServer, hidden: false, filebrowser: 'info:txtUrl', onClick: function() { var finder = new CKFinder(); finder.BasePath = '../ckfinder20090716/'; finder.SelectFunction = SetFileField; finder.Popup(); } }]}]},
在方法体外增加下边的函数
//用于取回 ckfinder 返回的图片地址并对路径文本框和预览图片进行赋值
function SetFileField(fileUrl)
{
//获取主Div下的所有文本框控件
var inputStr = document.getElementById("cke_txtContent_dialog").getElementsByTagName("Input");
for(var i=0; i<inputStr.length; i++)
{
if(inputStr[i].type=="text")
{
//第一个输入框控件是图像路径,得到ID,设置新的图片路径
CKEDITOR.document.getById(inputStr[i].id).setValue(fileUrl);
break ;
}
}
CKEDITOR.document.getById('previewImage').setAttribute('src', decodeURI(fileUrl));
}
第三步:CKFINDER上传问题:出现“因为安全原因,文件不可浏览. 请联系系统管理员并检查CKFinder配置文件“
整合后会出现“因为安全原因,文件不可浏览. 请联系系统管理员并检查CKFinder配置文件“
The Solution:
1. There is no write access for the default upload folder $baseUrl = '/userfiles/'; in ckfinder/config.php.
对于目标文件夹$baseUrl = '/userfiles/';没有写入权限
2. This is maybe because the Return value of Funcation CheckAuthentication() is always FALSE by default in ckfinder/config.php. Change the Validation Condition according to your condition, not recommend to set the return value to true directly.
因为出于安全考虑ckfinder/config.php文件中的CheckAuthentication()函数默认返回值是false, 需要手动修改验证条件, 不建议直接返回true
该文章出自《壁虎漫步网》,原文链接:http://www.hitsns.com/read.php?282
-----------------------------------------------------------------------------------------------------------------
<script type="text/javascript">
CKEDITOR.replace( 'editor_office2003',
{
skin : 'office2003' //そのほかv2もあります。
});
</script>
<script type="text/javascript">
<!--
CKEDITOR.config.toolbar =
[
['Source','-','Cut','Copy','Paste','PasteText','-','Undo','Redo','-','Find','Replace','-','RemoveFormat']
,'/'
,['Format','-','Bold','Italic','Underline','Strike','-','TextColor','BGColor','-','NumberedList','BulletedList','-','Outdent','Indent','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','Link','Unlink','-','Table','HorizontalRule','SpecialChar']
];
//-->
</script>
<script type="text/javascript">
//<![CDATA[
// Replace the <textarea id="editor"> with an CKEditor
// instance, using default configurations.
CKEDITOR.replace( 'editor2',
{
extraPlugins : 'uicolor',
uiColor: '#14B8C4',
toolbar :
[
[ 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink' ],
[ 'UIColor' ]
]
} );
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
// Replace the <textarea id="editor"> with an CKEditor
// instance, using default configurations.
CKEDITOR.replace( 'editor3',
{
extraPlugins : 'uicolor',
uiColor: '#14B8C4',
toolbar :
[
['Source','ShowBlocks','-','Save','NewPage','Preview','-','Templates'],['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print','SpellChecker'],['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField']
,'/'
,['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],['Link','Unlink','Anchor'],['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak']
,'/'
,['Styles','Format','Font','FontSize'],['TextColor','BGColor'],['ShowBlocks']
]
} );
//]]>
</script>
CKeditor配置大全相关推荐
- ASA LAB-ASA NAT配置大全
ASA LAB-ASA NAT配置大全 两种NAT配置方式 : 1- Auto(object)NAT 2- Twice NAT NAT分类 : Static nat Dynamic nat Stati ...
- CKeditor 配置使用
CKeditor 配置使用 一.使用方法: 1.在页面<head>中引入ckeditor核心文件ckeditor.js <script type="text/javascr ...
- redis配置_Redis配置大全(三)
" 点击关注Coding小暮,获取更多优质内容哦" Redis配置文件的讲解,今天将会全部讲完.先来个前文回顾: 吐血整理Redis配置大全(一) Redis配置大全(二) 本篇内 ...
- 富文本编辑器CKEditor配置及使用 - 转载篇
文章目录 配置教程 配置教程 原文地址:富文本编辑器CKEditor配置及使用
- 智能会议系统(16)---Linphone配置大全
Linphone配置大全 1. 自动接听电话: non_localizable_custom.xml <bool name="auto_answer_calls">fa ...
- Spark性能调优系列:Spark参数配置大全(官网资料)
Spark参数配置大全 Spark提供了三个位置来配置系统 Spark属性控制大多数应用程序参数,可以使用SparkConf对象或Java系统属性来设置. 通过conf/spark-env.sh每个节 ...
- Jackson配置大全
jackson支持以下格式 Avro, BSON, CBOR, CSV, Smile, (Java) Properties, Protobuf, TOML, XML or YAML; 基础注解 注解 ...
- WdatePicker日历控件参数配置大全
WdatePicker日历控件参数配置大全 官方下载地址: http://www.my97.net/dp/down.asp 详细配置见: http://www.cnblogs.com/huangw/a ...
- 第一章:pycharm、anaconda、opencv、pytorch、tensorflow、paddlex等环境配置大全总结【图像处理py版本】
第一章:pycharm.anaconda.opencv.pytorch.tensorflow.百度飞桨 等环境配置大全总结 0 引言 一 .环境搭建 1.pycharm+anaconda安装 1.1 ...
最新文章
- docker 分布式 lnmp 镜像制作
- because it is not a variable 编译错误解决方案
- 亿佰特物联网通信-智慧城市的未来城市愿景
- C++多重继承师生类复盘
- python 打印皮卡丘_来简单聊聊python的装饰器呀~
- 学python需要什么基础-0基础学Python 需要些什么?
- ios 怎么判断字符串的字节数_如何用IOS判断字符串是不是纯数字
- JSONObject对象和JSONArray对象的使用
- 000-Opencv各版本汇总下载
- NBNS 数据包 和 NetBIOS 协议
- 智能柜子锁方案开发,蓝牙智能防盗。
- b站会员转正自动答题
- ikbc键盘win键失灵原因
- 已写完的二十本最经典原创小说巨作!你都看过吗?
- 五年级计算机课主要学哪些内容,五年级下册信息技术课程纲要
- 难受难受,真它吗的难受... ...
- Python学习之道-串口Modbus开发
- 智能养殖管理系统科学调控蛋鸡养殖环境
- 企业CDN缓存加速原理
- 【Python】Parser 用法-通俗易懂!
热门文章
- 基于SSM框架便利店管理系统(进销存管理系统)(java+spring+springmvc+mybatis+maven+mysql+html)
- FPGA+海思Hi3559
- HDMI协议介绍(四)--Video
- 【安卓笔记】图片特效之底片效果
- DIY点读笔(O-pen)
- dedecms友情链接plus/flink.php页面出错,DedeCMS友情链接flink_add Getshell漏洞管理员CSRF漏洞...
- 切绳子(二分,c语言)
- 一整只烧鹅价格=烧鹅上庄价格+烧鹅下庄价格这个关系不因货币变掉而变
- CodeM资格赛A 音乐研究 题解
- C++贪心——纪念品分组