视频1
视频21
视频41
视频61
视频文章1
视频文章21
视频文章41
视频文章61
推荐1
推荐3
推荐5
推荐7
推荐9
推荐11
推荐13
推荐15
推荐17
推荐19
推荐21
推荐23
推荐25
推荐27
推荐29
推荐31
推荐33
推荐35
推荐37
推荐39
推荐41
推荐43
推荐45
推荐47
推荐49
关键词1
关键词101
关键词201
关键词301
关键词401
关键词501
关键词601
关键词701
关键词801
关键词901
关键词1001
关键词1101
关键词1201
关键词1301
关键词1401
关键词1501
关键词1601
关键词1701
关键词1801
关键词1901
视频扩展1
视频扩展6
视频扩展11
视频扩展16
文章1
文章201
文章401
文章601
文章801
文章1001
资讯1
资讯501
资讯1001
资讯1501
标签1
标签501
标签1001
关键词1
关键词501
关键词1001
关键词1501
专题2001
全部频道
首页
科技
教育
生活
旅游
时尚
美容
美食
健康
体育
游戏
汽车
元宇宙
家电
财经
综合
宠物
网页编辑器ckeditor和ckfinder配置步骤分享_基础知识
2020-11-27 21:03:20
责编:小采
点击下载本文
文档为doc格式
一、使用方法:
1、在页面中引入ckeditor核心文件ckeditor.js
script>
2、在使用编辑器的地方插入HTML控件
如果是ASP.NET环境,也可用服务器端控件
注意在控件中加上 class="ckeditor" 。
3、将相应的控件替换成编辑器代码
输出 plugins/entities/plugin.js
config.entities = true;
//定义更多的实体 plugins/entities/plugin.js
config.entities_additional = '#39'; //其中#代替了&
//是否转换一些难以显示的字符为相应的HTML字符 plugins/entities/plugin.js
config.entities_greek = true;
//是否转换一些拉丁字符为HTML plugins/entities/plugin.js
config.entities_latin = true;
//是否转换一些特殊字符为ASCII字符 如"This is Chinese: 汉语."转换为"This is Chinese: 汉语."
plugins/entities/plugin.js
config.entities_processNumerical = false;
//添加新组件
config.extraPlugins = 'myplugin'; //非默认 仅示例
//使用搜索时的高亮色 plugins/find/plugin.js
config.find_highlight = {
element : 'span',
styles : { 'background-color' : '#ff0', 'color' : '#00f' }
};
//默认的字体名 plugins/font/plugin.js
config.font_defaultLabel = 'Arial';
//字体编辑时的字符集 可以添加常用的中文字符:宋体、楷体、黑体等 plugins/font/plugin.js
config.font_names = 'Arial;Times New Roman;Verdana';
//文字的默认式样 plugins/font/plugin.js
config.font_style = {
element : 'span',
styles : { 'font-family' : '#(family)' },
overrides : [ { element : 'font', attributes : { 'face' : null } } ]
};
//字体默认大小 plugins/font/plugin.js
config.fontSize_defaultLabel = '12px';
//字体编辑时可选的字体大小 plugins/font/plugin.js
config.fontSize_sizes
='8/8px;9/9px;10/10px;11/11px;12/12px;14/14px;16/16px;18/18px;20/20px;22/22px;24/24px;26/26px;28/28px;36/36px;48/48
px;72/72px'
//设置字体大小时 使用的式样 plugins/font/plugin.js
config.fontSize_style = {
element : 'span',
styles : { 'font-size' : '#(size)' },
overrides : [ { element : 'font', attributes : { 'size' : null } } ]
};
//是否强制复制来的内容去除格式 plugins/pastetext/plugin.js
config.forcePasteAsPlainText =false //不去除
//是否强制用“&”来代替“&”plugins/htmldataprocessor/plugin.js
config.forceSimpleAmpersand = false;
//对address标签进行格式化 plugins/format/plugin.js
config.format_address = { element : 'address', attributes : { class : 'styledAddress' } };
//对DIV标签自动进行格式化 plugins/format/plugin.js
config.format_div = { element : 'div', attributes : { class : 'normalDiv' } };
//对H1标签自动进行格式化 plugins/format/plugin.js
config.format_h1 = { element : 'h1', attributes : { class : 'contentTitle1' } };
//对H2标签自动进行格式化 plugins/format/plugin.js
config.format_h2 = { element : 'h2', attributes : { class : 'contentTitle2' } };
//对H3标签自动进行格式化 plugins/format/plugin.js
config.format_h1 = { element : 'h3', attributes : { class : 'contentTitle3' } };
//对H4标签自动进行格式化 plugins/format/plugin.js
config.format_h1 = { element : 'h4', attributes : { class : 'contentTitle4' } };
//对H5标签自动进行格式化 plugins/format/plugin.js
config.format_h1 = { element : 'h5', attributes : { class : 'contentTitle5' } };
//对H6标签自动进行格式化 plugins/format/plugin.js
config.format_h1 = { element : 'h6', attributes : { class : 'contentTitle6' } };
//对P标签自动进行格式化 plugins/format/plugin.js
config.format_p = { element : 'p', attributes : { class : 'normalPara' } };
//对PRE标签自动进行格式化 plugins/format/plugin.js
config.format_pre = { element : 'pre', attributes : { class : 'code' } };
//用分号分隔的标签名字 在工具栏上显示 plugins/format/plugin.js
config.format_tags = 'p;h1;h2;h3;h4;h5;h6;pre;address;div';
//是否使用完整的html编辑模式 如使用,其源码将包含:
等标签
config.fullPage = false;
//是否忽略段落中的空字符 若不忽略 则字符将以“”表示 plugins/wysiwygarea/plugin.js
config.ignoreEmptyParagraph = true;
//在清除图片属性框中的链接属性时 是否同时清除两边的标签 plugins/image/plugin.js
config.image_removeLinkByEmptyURL = true;
//一组用逗号分隔的标签名称,显示在左下角的层次嵌套中 plugins/menu/plugin.js.
config.menu_groups
='clipboard,form,tablecell,tablecellproperties,tablerow,tablecolumn,table,anchor,link,image,flash,checkbox,radio,te
xtfield,hiddenfield,imagebutton,button,select,textarea';
//显示子菜单时的延迟,单位:ms plugins/menu/plugin.js
config.menu_subMenuDelay = 400;
//当执行“新建”命令时,编辑器中的内容 plugins/newpage/plugin.js
config.newpage_html = '';
//当从word里复制文字进来时,是否进行文字的格式化去除 plugins/pastefromword/plugin.js
config.pasteFromWordIgnoreFontFace = true; //默认为忽略格式
//是否使用
等标签修饰或者代替从word文档中粘贴过来的内容 plugins/pastefromword/plugin.js
config.pasteFromWordKeepsStructure = false;
//从word中粘贴内容时是否移除格式 plugins/pastefromword/plugin.js
config.pasteFromWordRemoveStyle = false;
//对应后台语言的类型来对输出的HTML内容进行格式化,默认为空
config.protectedSource.push( /[sS]*??>/g ); // PHP Code
config.protectedSource.push( //g ); // ASP Code
config.protectedSource.push( /(]+>[s|S]*?]+>)|(]+/>)/gi ); // ASP.Net Code
//当输入:shift+Enter时插入的标签
config.shiftEnterMode = CKEDITOR.ENTER_P; //可选:CKEDITOR.ENTER_BR或CKEDITOR.ENTER_DIV
//可选的表情替代字符 plugins/smiley/plugin.js.
config.smiley_descriptions = [
':)', ':(', ';)', ':D', ':/', ':P',
'', '', '', '', '', '',
'', ';(', '', '', '', '',
'', ':kiss', '' ];
//对应的表情图片 plugins/smiley/plugin.js
config.smiley_images = [
'regular_smile.gif','sad_smile.gif','wink_smile.gif','teeth_smile.gif','confused_smile.gif','tounge_smile.gif',
'embaressed_smile.gif','omg_smile.gif','whatchutalkingabout_smile.gif','angry_smile.gif','angel_smile.gif','shades_
smile.gif',
'devil_smile.gif','cry_smile.gif','lightbulb.gif','thumbs_down.gif','thumbs_up.gif','heart.gif',
'broken_heart.gif','kiss.gif','envelope.gif'];
//表情的地址 plugins/smiley/plugin.js
config.smiley_path = 'plugins/smiley/images/';
//页面载入时,编辑框是否立即获得焦点 plugins/editingblock/plugin.js plugins/editingblock/plugin.js.
config.startupFocus = false;
//载入时,以何种方式编辑 源码和所见即所得 "source"和"wysiwyg" plugins/editingblock/plugin.js.
config.startupMode ='wysiwyg';
//载入时,是否显示框体的边框 plugins/showblocks/plugin.js
config.startupOutlineBlocks = false;
//是否载入样式文件 plugins/stylescombo/plugin.js.
config.stylesCombo_stylesSet = 'default';
//以下为可选
config.stylesCombo_stylesSet = 'mystyles';
config.stylesCombo_stylesSet = 'mystyles:/editorstyles/styles.js';
config.stylesCombo_stylesSet = 'mystyles:http://www.example.com/editorstyles/styles.js';
//起始的索引值
config.tabIndex = 0;
//当用户键入TAB时,编辑器走过的空格数,( ) 当值为0时,焦点将移出编辑框 plugins/tab/plugin.js
config.tabSpaces = 0;
//默认使用的模板 plugins/templates/plugin.js.
config.templates = 'default';
//用逗号分隔的模板文件plugins/templates/plugin.js.
config.templates_files = [ 'plugins/templates/templates/default.js' ]
//当使用模板时,“编辑内容将被替换”框是否选中 plugins/templates/plugin.js
config.templates_replaceContent = true;
//主题
config.theme = 'default';
//撤销的记录步数 plugins/undo/plugin.js
config.undoStackSize =20;
// 在 CKEditor 中集成 CKFinder,注意 ckfinder 的路径选择要正确。
//CKFinder.SetupCKEditor(null, '/ckfinder/');
二、 一些使用技巧
1、在页面中即时设置编辑器
//示例1:设置工具栏为基本工具栏,高度为70
CKEDITOR.replace('<%=tbLink.ClientID.Replace("_","$") %>',
{ toolbar:'Basic', height:70 });
//示例2:工具栏为自定义类型
CKEDITOR.replace( 'editor1',
{
toolbar :
[
//加粗 斜体, 下划线 穿过线 下标字 上标字
['Bold','Italic','Underline','Strike','Subscript','Superscript'],
//数字列表 实体列表 减小缩进 增大缩进
['NumberedList','BulletedList','-','Outdent','Indent'],
//左对齐 居中对齐 右对齐 两端对齐
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
//超链接 取消超链接 锚点
['Link','Unlink','Anchor'],
//图片 flash 表格 水平线 表情 特殊字符 分页符
['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
'/',
//样式 格式 字体 字体大小
['Styles','Format','Font','FontSize'],
//文本颜色 背景颜色
['TextColor','BGColor'],
//全屏 显示区块
['Maximize', 'ShowBlocks','-']
]
}
);
script>
三、精简ckeditor
在部署到Web服务器上时,下列文件夹和文件都可以删除:
/_samples :示例文件夹;
/_source :未压缩源程序;
/lang文件夹下除 zh-cn.js、en.js 以外的文件(也可以根据需要保留其他语言文件);
根目录下的 changes.html(更新列表),install.html(安装指向),license.html(使用许可);
/skins 目录下不需要的皮肤,一般用V2(简单,朴素) ,如果只保留V2则必须在config.js中指定皮肤。
这些东西是免费的,使用相对fckeditor来说,省了类库fckdetior.dll的引用,直接在页面使用js!。。。。但是这个时候
发现上传功能使用不了!原来fckefitor把他以前的功能整合拆分了,ckeditor、ckfinder,两部分,后者是上传功能要钱的!!再
在网上找找,有破解方法,下了个ckfinder放进工程根目录!!在页面添加了
//如果是在ASP.NET环境下用的服务器端控件
var editor = CKEDITOR.replace('tbContent');
CKFinder.SetupCKEditor(editor, '/ckfinder/');(这个是在ckeditor基础上加的ckfinder)
script>
发现还是不行,上传出来错误页面!接着费了好多周折:
ckfinder/config:
public override bool CheckAuthentication()
{
return true;
}
ckeditror/config.js加入:
CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
config.filebrowserBrowseUrl = location.hash + '../ckfinder/ckfinder.html';
config.filebrowserImageBrowseUrl = location.hash + '../ckfinder/ckfinder.html?Type=Images';
config.filebrowserFlashBrowseUrl = location.hash+'../ckfinder/ckfinder.html?Type=Flash';
config.filebrowserUploadUrl = location.hash + '../ckfinder/core/connector/aspx/connector.aspx?
command=QuickUpload&type=Files';
config.filebrowserImageUploadUrl = location.hash + '../ckfinder/core/connector/aspx/connector.aspx?
command=QuickUpload&type=Images';
config.filebrowserFlashUploadUrl = location.hash + '../ckfinder/core/connector/aspx/connector.aspx?
command=QuickUpload&type=Flash';
// config.filebrowserWindowWidth = '800';
// config.filebrowserWindowHeight = '500';
};
带颜色的部分是容易出错的地方,开始我没有放..(根目录)
登录后,您就出现在这里。 一直出错后来加了..在前面表示从工程根目录开始。错误解决!! 最后
就是破解了:
下面简单说一下我的破解步骤:(摘自别人)
1、使用FF浏览器中的firebug插件;
2、打开安装好的文件浏览器,发现是调用的ckfinder.html文件;
3、在ckfinder.html中发现
这个单元格中写入了一个iframe,src是core/pages/ckffiles.html;
4、继续打开iframe节点在
和
两个标签之间有一个
没有id,那个叫你给钱的话就在这里面了~;
5、打开 core/pages/ckffiles.html源文件,发现
和
之间没有东西,说明这个
是代码生成的;
6、接下来就可以在CKfinder的js里面去找答案了,幸好以前FCKeditor还是比较熟悉,直接到ckfindercorejs文件夹下面找;
7、这个文件夹下面两个js一个是给IE用的,另一个是给其他浏览器的,这个和FCKeditor一样;
8、打开ckfinder_gecko.js搜索"qu",很快就发现了eF=B.getElementById('qu');这句;
9、再往后面看
if ((1==(dK.indexOf(ab.bW.substr(1,1)) % 5)&&window.top[qC+'143141x74x69157x6E'][qF+'163x74'].toLowerCase
().replace(s4,"")!=ab.eo.replace(s4,""))||ab.bW.substr(3,1)!=dK.substr(((dK.indexOf(ab.bW.substr(0,1))+dK.indexOf
(ab.bW.substr(2,1)))*9) % (dK.length-1),1)){en.call(window,qo);};eF.appendChild(D);
这段最后的 appendChild~,差不多就在这里了;
10、前面一大堆条件,执行的就只有 en.call(window,qo);,不是它还是什么~;
11、删除 en.call(window,qo);或者* en.call(window,qo); *,再刷新看看果然没了~;
12、完了再修改ckfinder_ie.js,一样的。
整个CKfinder就简单破解完成了~,如果你觉得这个好用最好还是给点钱买个序列号吧,官方可以给你技术帮助可以节约很多时间的
下载本文
显示全文
专题
动视 51dongshi.net 版权所有
Copyright © 2019-2025