系统小窝欢迎您

电脑公司 深度技术
当前位置:系统小窝 > 系统教程 > Linux教程 >

如何在Linux下使用网页编辑器CKEditor

时间:2021-04-09 来源:来吧老妹 人气:

CKEditor通常所指的就是fCKEDITOR,是优秀的网页编辑器,能够支持多种编程语言,使用的人越来越多,那么Linux下要如何使用网页编辑器CKEditor呢?下面小编就给大家介绍下Linux使用CKEditor的方法。

一、使用方法:

1、在页面《head》中引入ckeditor核心文件ckeditor.js

《script type=;text/javascript; src=;ckeditor/ckeditor.js;》《/script》

2、在使用编辑器的地方插入HTML控件《textarea》

《textarea id=;TextArea1; cols=;20; rows=;2; class=;ckeditor;》《/textarea》

如果是ASP.NET环境,也可用服务器端控件《TextBox》

《asp:TextBox ID=;tbContent; runat=;server; TextMode=;MultiLine; class=;ckeditor;》《/asp:TextBox》

注意在控件中加上 class=;ckeditor; 。

3、将相应的控件替换成编辑器代码

《script type=;text/javascript;》

CKEDITOR.replace(lsquo;TextArea1rsquo;);

//如果是在ASP.NET环境下用的服务器端控件《TextBox》

CKEDITOR.replace(lsquo;tbContentrsquo;);

//如果《TextBox》控件在母版页中,要这样写

CKEDITOR.replace(lsquo;《%=tbContent.ClientID.Replace(;_;,;$;) %》rsquo;);

《/script》

4、配置编辑器

ckeditor的配置都集中在 ckeditor/config.js 文件中,下面是一些常用的配置参数:

// 界面语言,默认为 lsquo;enrsquo;

config.language = lsquo;zh-cnrsquo;;

// 设置宽高

config.width = 400;

config.height = 400;

// 编辑器样式,有三种:lsquo;kamarsquo;(默认)、lsquo;office2003rsquo;、lsquo;v2rsquo;

config.skin = lsquo;v2rsquo;;

// 背景颜色

config.uiColor = lsquo;#FFFrsquo;;

// 工具栏(基础lsquo;Basicrsquo;、全能lsquo;Fullrsquo;、自定义)plugins/toolbar/plugin.js

config.toolbar = lsquo;Basicrsquo;;

config.toolbar = lsquo;Fullrsquo;;

这将配合:

config.toolbar_Full = [

[lsquo;Sourcersquo;,lsquo;-rsquo;,lsquo;Saversquo;,lsquo;NewPagersquo;,lsquo;Previewrsquo;,lsquo;-rsquo;,lsquo;Templatesrsquo;],

[lsquo;Cutrsquo;,lsquo;Copyrsquo;,lsquo;Pastersquo;,lsquo;PasteTextrsquo;,lsquo;PasteFromWordrsquo;,lsquo;-rsquo;,lsquo;Printrsquo;, lsquo;SpellCheckerrsquo;, lsquo;Scaytrsquo;],

[lsquo;Undorsquo;,lsquo;Redorsquo;,lsquo;-rsquo;,lsquo;Findrsquo;,lsquo;Replacersquo;,lsquo;-rsquo;,lsquo;SelectAllrsquo;,lsquo;RemoveFormatrsquo;],

[lsquo;Formrsquo;, lsquo;Checkboxrsquo;, lsquo;Radiorsquo;, lsquo;TextFieldrsquo;, lsquo;Textarearsquo;, lsquo;Selectrsquo;, lsquo;Buttonrsquo;, lsquo;ImageButtonrsquo;, lsquo;HiddenFieldrsquo;],

lsquo;/rsquo;,

[lsquo;Boldrsquo;,lsquo;Italicrsquo;,lsquo;Underlinersquo;,lsquo;Strikersquo;,lsquo;-rsquo;,lsquo;Subscriptrsquo;,lsquo;Superscriptrsquo;],

[lsquo;NumberedListrsquo;,lsquo;BulletedListrsquo;,lsquo;-rsquo;,lsquo;Outdentrsquo;,lsquo;Indentrsquo;,lsquo;Blockquotersquo;],

[lsquo;JustifyLeftrsquo;,lsquo;JustifyCenterrsquo;,lsquo;JustifyRightrsquo;,lsquo;JustifyBlockrsquo;],

[lsquo;Linkrsquo;,lsquo;Unlinkrsquo;,lsquo;Anchorrsquo;],

[lsquo;Imagersquo;,lsquo;Flashrsquo;,lsquo;Tablersquo;,lsquo;HorizontalRulersquo;,lsquo;Smileyrsquo;,lsquo;SpecialCharrsquo;,lsquo;PageBreakrsquo;],

lsquo;/rsquo;,

[lsquo;Stylesrsquo;,lsquo;Formatrsquo;,lsquo;Fontrsquo;,lsquo;FontSizersquo;],

[lsquo;TextColorrsquo;,lsquo;BGColorrsquo;]

];

//工具栏是否可以被收缩

config.toolbarCanCollapse = true;

//工具栏的位置

config.toolbarLocation = lsquo;toprsquo;;//可选:bottom

//工具栏默认是否展开

config.toolbarStartupExpanded = true;

// 取消 ;拖拽以改变尺寸;功能 plugins/resize/plugin.js

config.resize_enabled = false;

//改变大小的最大高度

config.resize_maxHeight = 3000;

//改变大小的最大宽度

config.resize_maxWidth = 3000;

//改变大小的最小高度

config.resize_minHeight = 250;

//改变大小的最小宽度

config.resize_minWidth = 750;

// 当提交包含有此编辑器的表单时,是否自动更新元素内的数据

config.autoUpdateElement = true;

// 设置是使用绝对目录还是相对目录,为空为相对目录

config.baseHref = lsquo;rsquo;

// 编辑器的z-index值

config.baseFloatZIndex = 10000;

//设置快捷键

 

config.keystrokes = [

[ CKEDITOR.ALT + 121 /*F10*/, lsquo;toolbarFocusrsquo; ], //获取焦点

[ CKEDITOR.ALT + 122 /*F11*/, lsquo;elementsPathFocusrsquo; ], //元素焦点

[ CKEDITOR.SHIFT + 121 /*F10*/, lsquo;contextMenursquo; ], //文本菜单

[ CKEDITOR.CTRL + 90 /*Z*/, lsquo;undorsquo; ], //撤销

[ CKEDITOR.CTRL + 89 /*Y*/, lsquo;redorsquo; ], //重做

[ CKEDITOR.CTRL + CKEDITOR.SHIFT + 90 /*Z*/, lsquo;redorsquo; ], //

[ CKEDITOR.CTRL + 76 /*L*/, lsquo;linkrsquo; ], //链接

[ CKEDITOR.CTRL + 66 /*B*/, lsquo;boldrsquo; ], //粗体

[ CKEDITOR.CTRL + 73 /*I*/, lsquo;italicrsquo; ], //斜体

[ CKEDITOR.CTRL + 85 /*U*/, lsquo;underlinersquo; ], //下划线

[ CKEDITOR.ALT + 109 /*-*/, lsquo;toolbarCollapsersquo; ]

//设置快捷键 可能与浏览器快捷键冲突 plugins/keystrokes/plugin.js.

config.blockedKeystrokes = [

CKEDITOR.CTRL + 66 /*B*/,

CKEDITOR.CTRL + 73 /*I*/,

CKEDITOR.CTRL + 85 /*U*/

//设置编辑内元素的背景色的取值 plugins/colorbutton/plugin.js.

config.colorButton_backStyle = {

element : lsquo;spanrsquo;,

styles : { lsquo;background-colorrsquo; : lsquo;#(color)rsquo; }

}

//设置前景色的取值 plugins/colorbutton/plugin.js

config.colorButton_colors = lsquo;000,800000,8B4513,2F4F4F,008080,000080,4B0082,696969,B22222,A52A2A,DAA520,

006400,40E0D0,0000CD,800080,808080,F00,FF8C00,FFD700,008000,0FF,00F,EE82EE,

A9A9A9,FFA07A,FFA500,FFFF00,00FF00,AFEEEE,ADD8E6,DDA0DD,D3D3D3,FFF0F5,

FAEBD7,FFFFE0,F0FFF0,F0FFFF,F0F8FF,E6E6FA,FFFrsquo;

//是否在选择颜色时显示;其它颜色;选项 plugins/colorbutton/plugin.js

config.colorButton_enableMore = false

//区块的前景色默认值设置 plugins/colorbutton/plugin.js

config.colorButton_foreStyle = {

element : rsquo;spanlsquo;,

styles : { rsquo;colorlsquo; : rsquo;#(color)lsquo; }

};

//所需要添加的CSS文件 在此添加 可使用相对路径和网站的绝对路径

config.contentsCss = rsquo;。/contents.csslsquo;;

//文字方向

config.contentsLangDirection = rsquo;rtllsquo;; //从左到右

//CKeditor的配置文件 若不想配置 留空即可

CKEDITOR.replace( rsquo;myfiledlsquo;, { customConfig : rsquo;。/config.jslsquo; } );

//界面编辑框的背景色 plugins/dialog/plugin.js

config.dialog_backgroundCoverColor = rsquo;rgb(255, 254, 253)lsquo;; //可设置参考

config.dialog_backgroundCoverColor = rsquo;whitelsquo; //默认

//背景的不透明度 数值应该在:0.0~1.0 之间 plugins/dialog/plugin.js

config.dialog_backgroundCoverOpacity = 0.5

//移动或者改变元素时 边框的吸附距离 单位:像素 plugins/dialog/plugin.js

config.dialog_magnetDistance = 20;

//是否拒绝本地拼写检查和提示 默认为拒绝 目前仅firefox和safari支持 plugins/wysiwygarea/plugin.js.

config.disableNativeSpellChecker = true

//进行表格编辑功能 如:添加行或列 目前仅firefox支持 plugins/wysiwygarea/plugin.js

config.disableNativeTableHandles = true; //默认为不开启

//是否开启 图片和表格 的改变大小的功能 config.disableObjectResizing = true;

config.disableObjectResizing = false //默认为开启

//设置HTML文档类型

config.docType = rsquo;《!DOCTYPE html PUBLIC ;-//W3C//DTD XHTML 1.0 Transitional//EN; ;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd%22lsquo; ;

//是否对编辑区域进行渲染 plugins/editingblock/plugin.js

config.editingBlock = true;

//编辑器中回车产生的标签

config.enterMode = CKEDITOR.ENTER_P; //可选:CKEDITOR.ENTER_BR或CKEDITOR.ENTER_DIV

//是否使用HTML实体进行输出 plugins/entities/plugin.js

config.entities = true;

//定义更多的实体 plugins/entities/plugin.js

config.entities_additional = rsquo;#39lsquo;; //其中#代替了

//是否转换一些难以显示的字符为相应的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 = rsquo;mypluginlsquo;; //非默认 仅示例

//使用搜索时的高亮色 plugins/find/plugin.js

config.find_highlight = {

element : rsquo;spanlsquo;,

styles : { rsquo;background-colorlsquo; : rsquo;#ff0lsquo;, rsquo;colorlsquo; : rsquo;#00flsquo; }

};

//默认的字体名 plugins/font/plugin.js

config.font_defaultLabel = rsquo;Ariallsquo;;

//字体编辑时的字符集 可以添加常用的中文字符:宋体、楷体、黑体等 plugins/font/plugin.js

config.font_names = rsquo;Arial;Times New Roman;Verdanalsquo;;

//文字的默认式样 plugins/font/plugin.js

config.font_style = {

element : rsquo;spanlsquo;,

styles : { rsquo;font-familylsquo; : rsquo;#(family)lsquo; },

overrides : [ { element : rsquo;fontlsquo;, attributes : { rsquo;facelsquo; : null } } ]

 

};

//字体默认大小 plugins/font/plugin.js

config.fontSize_defaultLabel = rsquo;12pxlsquo;;

//字体编辑时可选的字体大小 plugins/font/plugin.js

config.fontSize_sizes =rsquo;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/48px;72/72pxlsquo;

//设置字体大小时 使用的式样 plugins/font/plugin.js

config.fontSize_style = {

element : rsquo;spanlsquo;,

styles : { rsquo;font-sizelsquo; : rsquo;#(size)lsquo; },

overrides : [ { element : rsquo;fontlsquo;, attributes : { rsquo;sizelsquo; : null } } ]

};

//是否强制复制来的内容去除格式 plugins/pastetext/plugin.js

config.forcePasteAsPlainText =false //不去除

//是否强制用;;来代替;;plugins/htmldataprocessor/plugin.js

config.forceSimpleAmpersand = false;

//对address标签进行格式化 plugins/format/plugin.js

config.format_address = { element : rsquo;addresslsquo;, attributes : { class : rsquo;styledAddresslsquo; } };

//对DIV标签自动进行格式化 plugins/format/plugin.js

config.format_div = { element : rsquo;divlsquo;, attributes : { class : rsquo;normalDivlsquo; } };

//对H1标签自动进行格式化 plugins/format/plugin.js

config.format_h1 = { element : rsquo;h1lsquo;, attributes : { class : rsquo;contentTitle1lsquo; } };

//对H2标签自动进行格式化 plugins/format/plugin.js

config.format_h2 = { element : rsquo;h2lsquo;, attributes : { class : rsquo;contentTitle2lsquo; } };

//对H3标签自动进行格式化 plugins/format/plugin.js

config.format_h1 = { element : rsquo;h3lsquo;, attributes : { class : rsquo;contentTitle3lsquo; } };

//对H4标签自动进行格式化 plugins/format/plugin.js

config.format_h1 = { element : rsquo;h4lsquo;, attributes : { class : rsquo;contentTitle4lsquo; } };

//对H5标签自动进行格式化 plugins/format/plugin.js

config.format_h1 = { element : rsquo;h5lsquo;, attributes : { class : rsquo;contentTitle5lsquo; } };

//对H6标签自动进行格式化 plugins/format/plugin.js

config.format_h1 = { element : rsquo;h6lsquo;, attributes : { class : rsquo;contentTitle6lsquo; } };

//对P标签自动进行格式化 plugins/format/plugin.js

config.format_p = { element : rsquo;plsquo;, attributes : { class : rsquo;normalParalsquo; } };

//对PRE标签自动进行格式化 plugins/format/plugin.js

config.format_pre = { element : rsquo;prelsquo;, attributes : { class : rsquo;codelsquo; } };

//用分号分隔的标签名字 在工具栏上显示 plugins/format/plugin.js

config.format_tags = rsquo;p;h1;h2;h3;h4;h5;h6;pre;address;divlsquo;;

//是否使用完整的html编辑模式 如使用,其源码将包含:《html》《body》《/body》《/html》等标签

config.fullPage = false;

//是否忽略段落中的空字符 若不忽略 则字符将以;;表示 plugins/wysiwygarea/plugin.js

config.ignoreEmptyParagraph = true;

//在清除图片属性框中的链接属性时 是否同时清除两边的《a》标签 plugins/image/plugin.js

config.image_removeLinkByEmptyURL = true;

//一组用逗号分隔的标签名称,显示在左下角的层次嵌套中 plugins/menu/plugin.js.

config.menu_groups =rsquo;clipboard,form,tablecell,tablecellproperties,tablerow,tablecolumn,table,anchor,link,image,flash,checkbox,radio,textfield,hiddenfield,imagebutton,button,select,textarealsquo;;

//显示子菜单时的延迟,单位:ms plugins/menu/plugin.js

config.menu_subMenuDelay = 400;

//当执行;新建;命令时,编辑器中的内容 plugins/newpage/plugin.js

config.newpage_html = rsquo;lsquo;;

//当从word里复制文字进来时,是否进行文字的格式化去除 plugins/pastefromword/plugin.js

config.pasteFromWordIgnoreFontFace = true; //默认为忽略格式

//是否使用《h1》《h2》等标签修饰或者代替从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]*?《/asp:[^》]+》)|(]+/》)/gi ); // ASP.Net Code

//当输入:shift+Enter时插入的标签

config.shiftEnterMode = CKEDITOR.ENTER_P; //可选:CKEDITOR.ENTER_BR或CKEDITOR.ENTER_DIV

//可选的表情替代字符 plugins/smiley/plugin.js.

config.smiley_descriptions = [

rsquo;:)lsquo;, rsquo;:(lsquo;, rsquo;;)lsquo;, rsquo;:Dlsquo;, rsquo;:/lsquo;, rsquo;:Plsquo;,

rsquo;lsquo;, rsquo;lsquo;, rsquo;lsquo;, rsquo;lsquo;, rsquo;lsquo;, rsquo;lsquo;,

rsquo;lsquo;, rsquo;;(lsquo;, rsquo;lsquo;, rsquo;lsquo;, rsquo;lsquo;, rsquo;lsquo;,

rsquo;lsquo;, rsquo;:kisslsquo;, rsquo;lsquo; ];

 

//对应的表情图片 plugins/smiley/plugin.js

config.smiley_images = [

rsquo;regular_smile.giflsquo;,rsquo;sad_smile.giflsquo;,rsquo;wink_smile.giflsquo;,rsquo;teeth_smile.giflsquo;,rsquo;confused_smile.giflsquo;,rsquo;tounge_smile.giflsquo;,

rsquo;embaressed_smile.giflsquo;,rsquo;omg_smile.giflsquo;,rsquo;whatchutalkingabout_smile.giflsquo;,rsquo;angry_smile.giflsquo;,rsquo;angel_smile.giflsquo;,rsquo;shades_smile.giflsquo;,

rsquo;devil_smile.giflsquo;,rsquo;cry_smile.giflsquo;,rsquo;lightbulb.giflsquo;,rsquo;thumbs_down.giflsquo;,rsquo;thumbs_up.giflsquo;,rsquo;heart.giflsquo;,

rsquo;broken_heart.giflsquo;,rsquo;kiss.giflsquo;,rsquo;envelope.giflsquo;];

//表情的地址 plugins/smiley/plugin.js

config.smiley_path = rsquo;plugins/smiley/images/lsquo;;

//页面载入时,编辑框是否立即获得焦点 plugins/editingblock/plugin.js plugins/editingblock/plugin.js.

config.startupFocus = false;

//载入时,以何种方式编辑 源码和所见即所得 ;source;和;wysiwyg; plugins/editingblock/plugin.js.

config.startupMode =rsquo;wysiwyglsquo;;

//载入时,是否显示框体的边框 plugins/showblocks/plugin.js

config.startupOutlineBlocks = false;

//是否载入样式文件 plugins/stylescombo/plugin.js.

config.stylesCombo_stylesSet = rsquo;defaultlsquo;;

//以下为可选

config.stylesCombo_stylesSet = rsquo;mystyleslsquo;;

config.stylesCombo_stylesSet = rsquo;mystyles:/editorstyles/styles.jslsquo;;

config.stylesCombo_stylesSet = rsquo;mystyles:http://www.example.com/editorstyles/styles.jslsquo;;

//起始的索引值

config.tabIndex = 0;

//当用户键入TAB时,编辑器走过的空格数,( ) 当值为0时,焦点将移出编辑框 plugins/tab/plugin.js

config.tabSpaces = 0;

//默认使用的模板 plugins/templates/plugin.js.

config.templates = rsquo;defaultlsquo;;

//用逗号分隔的模板文件plugins/templates/plugin.js.

config.templates_files = [ rsquo;plugins/templates/templates/default.jslsquo; ]

//当使用模板时,;编辑内容将被替换;框是否选中 plugins/templates/plugin.js

config.templates_replaceContent = true;

//主题

config.theme = rsquo;defaultlsquo;;

//撤销的记录步数 plugins/undo/plugin.js

config.undoStackSize =20;

// 在 CKEditor 中集成 CKFinder,注意 ckfinder 的路径选择要正确。

//CKFinder.SetupCKEditor(null, rsquo;/ckfinder/lsquo;);

二、 一些使用技巧

1、在页面中即时设置编辑器

《script type=;text/javascript;》

//示例1:设置工具栏为基本工具栏,高度为70

CKEDITOR.replace(rsquo;《%=tbLink.ClientID.Replace(;_;,;$;) %》lsquo;,

{ toolbar:rsquo;Basiclsquo;, height:70 });

//示例2:工具栏为自定义类型

CKEDITOR.replace( rsquo;editor1lsquo;,

{

toolbar :

//加粗 斜体, 下划线 穿过线 下标字 上标字

[rsquo;Boldlsquo;,rsquo;Italiclsquo;,rsquo;Underlinelsquo;,rsquo;Strikelsquo;,rsquo;Subscriptlsquo;,rsquo;Superscriptlsquo;],

//数字列表 实体列表 减小缩进 增大缩进

[rsquo;NumberedListlsquo;,rsquo;BulletedListlsquo;,rsquo;-lsquo;,rsquo;Outdentlsquo;,rsquo;Indentlsquo;],

//左对齐 居中对齐 右对齐 两端对齐

[rsquo;JustifyLeftlsquo;,rsquo;JustifyCenterlsquo;,rsquo;JustifyRightlsquo;,rsquo;JustifyBlocklsquo;],

//超链接 取消超链接 锚点

[rsquo;Linklsquo;,rsquo;Unlinklsquo;,rsquo;Anchorlsquo;],

//图片 flash 表格 水平线 表情 特殊字符 分页符

[rsquo;Imagelsquo;,rsquo;Flashlsquo;,rsquo;Tablelsquo;,rsquo;HorizontalRulelsquo;,rsquo;Smileylsquo;,rsquo;SpecialCharlsquo;,rsquo;PageBreaklsquo;],

rsquo;/lsquo;,

//样式 格式 字体 字体大小

[rsquo;Styleslsquo;,rsquo;Formatlsquo;,rsquo;Fontlsquo;,rsquo;FontSizelsquo;],

//文本颜色 背景颜色

[rsquo;TextColorlsquo;,rsquo;BGColorlsquo;],

//全屏 显示区块

[rsquo;Maximizelsquo;, rsquo;ShowBlockslsquo;,rsquo;-lsquo;]

}

);

《/script》

三、精简ckeditor

在部署到Web服务器上时,下列文件夹和文件都可以删除:

/_samples :示例文件夹;

/_source :未压缩源程序;

/lang文件夹下除 zh-cn.js、en.js 以外的文件(也可以根据需要保留其他语言文件);

根目录下的 changes.html(更新列表),install.html(安装指向),license.html(使用许可);

/skins 目录下不需要的皮肤,一般用V2(简单,朴素) ,如果只保留V2则必须在config.js中指定皮肤。

上面就是Linux使用CKEditor的方法介绍了,本文除了介绍CKEditor的基本用法外,还介绍了一些CKEditor的使用技巧,让你更好的掌握CKEditor的使用。

相关文章

发表评论

验证码: 看不清?点击更换

注:网友评论仅供其表达个人看法,并不代表本站立场。