CKEditor_3.6.2配置及自定義使用

发布时间：2020-12-15 06:35:36 所属栏目：百科来源：网络整理

导读：打开ckeditor下的config.js文件，修改配置，如不修改，將默認顯示所有工具條相關配置如果要上传图片，还有引入CKFinder.dll 然后再页面引入js文件：ckeditor.js和ckfinder.js 当然，以上的至少简单的功能。配置中文解释代码? AutoDetectLanguage=true/fal

打开ckeditor下的config.js文件，修改配置，如不修改，將默認顯示所有工具條

相關配置

如果要上传图片，还有引入CKFinder.dll
然后再页面引入js文件：ckeditor.js和ckfinder.js

当然，以上的至少简单的功能。

配置中文解释代码?

AutoDetectLanguage=true/false 自动检测语言

BaseHref=”” 相对链接的基地址

ContentLangDirection=”ltr/rtl” 默认文字方向

ContextMenu=字符串数组,右键菜单的内容

CustomConfigurationsPath=”” 自定义配置文件路径和名称

Debug=true/false 是否开启调试功能,这样,当调用FCKDebug.Output()时,会在调试窗中输出内容

DefaultLanguage=”” 缺省语言

EditorAreaCss=”” 编辑区的样式表文件

EnableSourceXHTML=true/false 为TRUE时,当由可视化界面切换到代码页时,把HTML处理成XHTML

EnableXHTML=true/false 是否允许使用XHTML取代HTML

FillEmptyBlocks=true/false 使用这个功能,可以将空的块级元素用空格来替代

FontColors=”” 设置显示颜色拾取器时文字颜色列表

FontFormats=”” 设置显示在文字格式列表中的命名

FontNames=”” 字体列表中的字体名

FontSizes=”” 字体大小中的字号列表

ForcePasteAsPlainText=true/false 强制粘贴为纯文本

ForceSimpleAmpersand=true/false 是否不把&符号转换为XML实体

FormatIndentator=”” 当在源码格式下缩进代码使用的字符

FormatOutput=true/false 当输出内容时是否自动格式化代码

FormatSource=true/false 在切换到代码视图时是否自动格式化代码

FullPage=true/false 是否允许编辑整个HTML文件,还是仅允许编辑BODY间的内容

GeckoUseSPAN=true/false 是否允许SPAN标记代替B,I,U标记

IeSpellDownloadUrl=””下载拼写检查器的网址

ImageBrowser=true/false 是否允许浏览服务器功能

ImageBrowserURL=”” 浏览服务器时运行的URL

ImageBrowserWindowHeight=”” 图像浏览器窗口高度

ImageBrowserWindowWidth=”” 图像浏览器窗口宽度

LinkBrowser=true/false 是否允许在插入链接时浏览服务器

LinkBrowserURL=”” 插入链接时浏览服务器的URL

LinkBrowserWindowHeight=””链接目标浏览器窗口高度

LinkBrowserWindowWidth=””链接目标浏览器窗口宽度

Plugins=object 注册插件

PluginsPath=”” 插件文件夹

ShowBorders=true/false 合并边框

SkinPath=”” 皮肤文件夹位置

SmileyColumns=12 图符窗列数

SmileyImages=字符数组图符窗中图片文件名数组

SmileyPath=”” 图符文件夹路径

SmileyWindowHeight 图符窗口高度

SmileyWindowWidth 图符窗口宽度

SpellChecker=”ieSpell/Spellerpages” 设置拼写检查器

StartupFocus=true/false 开启时FOCUS到编辑器

StylesXmlPath=”” 设置定义CSS样式列表的XML文件的位置

TabSpaces=4 TAB键产生的空格字符数

ToolBarCanCollapse=true/false 是否允许展开/折叠工具栏

ToolbarSets=object 允许使用TOOLBAR集合

ToolbarStartExpanded=true/false 开启是TOOLBAR是否展开

UseBROnCarriageReturn=true/false 当回车时是产生BR标记还是P或者DIV标记

這是配置文件的屬性，只是書面上的意思，具體的時候，格式是這樣，如FontNames意思是，字体列表中的字体名，在配置文件里的書寫格式卻是這樣，font_names

自定义工具条代码
Source=”页面源码”

DocProps=”页面属性”

Save＝”保存”

NewPage=”新建”

Preview=”预览”

Templates=”模版”

Cut=”剪切”

Copy=”拷贝”

Paste=”粘贴”

PasteText=”粘贴为无格式的文本”

PasteWord=”粘贴Word格式”

Print=”打印”

SpellCheck=”拼写检查,要装插件”

Undo=”撤消”

Redo=”重做”

Find=”查找”

Replace=”替换”

SelectAll=”全选”

RemoveFormat=”清除格式(清除现在文本的格式)”

Form=”表单域”

Checkbox=”复选”

Radio=”单选”

TextField=”单行文本”

Textarea=”多行文本”

Select=”列表”

Button=”按钮”

ImageButton=”图像区域”

HiddenField=”隐藏域”

Bold=”加粗”

Italic=”倾斜”

Underline=”下划线”

StrikeThrough=”删除线”

Subscript=”下标”

Superscript=”上标”

OrderedList=”删除/插入项目列表”

UnorderedList=”删除/插入项目符号”

Outdent=”减少缩进”

Indent=”增加缩进”

JustifyLeft=”左对齐”

JustifyCenter=”居中对齐”

JustifyRight=”右对齐”

JustifyFull=”分散对齐”

Link=”链接”

Unlink=”删除链接”

Anchor=”插入/删除锚点”

Image=”上传图片”

Flash=”上传动画”

Table=”插入表格”

Rule=”插入水平线”

Smiley=”插入表情”

SpecialChar=”插入特殊字符”

PageBreak=”插入分页符”

Style=”样式”

FontFormat=”格式”

FontName=”字体”

FontSize=”大小”

TextColor=”字体颜色”

BGColor=”背景色”

FitWindow=”全屏编辑”

About=”关于我们”

釋義：

"[]"表示一个工具条,破折号("-")是作为toolbar集合的分隔符，("/")表示这个斜线是用来给它所在的地方强制换行的，这样这个toolbar bands就会在新的一行中出现而不是跟住之前的toolbar bloos 。自己可以根據自己的意願增刪"[]"里的工具條。

自定義配置：

CKEDITOR.editorConfig = function( config )

{

// Define changes to default configuration here. For example:

// config.language = 'fr';

? ? ? ?// config.uiColor = '#AADC6E';

}

這是默認的設置，自己可以在裏面修改。

自定義表情

把文件下的plugins/smiley/images默認表情刪除，然後添加自己的表情。
images是默認是表情文件夾，當然，自己可以添加一個文件夾，然後再在config.js里配置,如：?config.smiley_path = '/网站文件名称/ckeditor/plugins/smiley/images/（子文件夹名/）';

以下這個Demo的自定義表情，我是使用默認的文件夾的，即上面1的表述。

Demo：

?? ?config.language = 'zh-cn';//簡體中文

? ? config.uiColor = '#336699';//界面顏色

? ? config.height = 300; //高度

? ? config.width = 600;//寬度

? ? config.font_names = '宋体/宋体;黑体/黑体;仿宋/仿宋_GB2312;楷体/楷体_GB2312;隶书/隶书;幼圆/幼圆;微软雅黑/微软雅黑;' + config.font_names;//這是基於默認字體的增加

? ?//自定義使用表情

? ? config.smiley_images = ['1.gif','2.gif','3.gif','4.gif','5.gif','6.gif','7.gif','8.gif','9.gif','10.gif','11.gif','12.gif','13.gif','14.gif','15.gif','16.gif','17.gif','18.gif','19.gif','20.gif','21.gif','22.gif','23.gif','24.gif','25.gif','26.gif','27.gif','28.gif','29.gif','30.gif','31.gif','32.gif','33.gif','34.gif','35.gif','36.gif','37.gif','38.gif','39.gif','40.gif','41.gif','42.gif','43.gif','44.gif','45.gif','46.gif','47.gif'];

? ?//以上的圖片格式，并不要根據123這樣的命名，這個Demo的表情是固有的命名。

? ? config.smiley_descriptions = ['发呆','调皮','色','撇嘴','惊讶','害羞','尴尬','睡','大哭','难过','呲牙','大款','流泪','闭嘴','发怒','微笑','慌忙','阴险','偷笑','可爱','流汗','白眼','亲亲','憨笑','委屈','吐','抓狂','酷','冷汗','咒骂','鼓掌','右哼哼','坏笑','奋斗','糗大了','抠鼻','可怜','左哼哼','擦汗','哈欠','晕','疑问','鄙视','再见','怎么可能！','飞吻']//對應數組里圖片的描述 ? ? ?

? ? //工具栏

? ? config.toolbar =

? ? [

? ? ? ?['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],

? ? ? ?['NumberedList','BulletedList','Outdent','Indent','Blockquote'],sans-serif; line-height:1.5; font-size:14px; margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px"> ? ? ? ?['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],sans-serif; line-height:1.5; font-size:14px; margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px"> ? ? ? ?['Link','Unlink','Anchor'],sans-serif; line-height:1.5; font-size:14px; margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px"> ? ? ? ?['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],sans-serif; line-height:1.5; font-size:14px; margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px"> ? ? ? ?'/',sans-serif; line-height:1.5; font-size:14px; margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px"> ? ? ? ?['Styles','Format','Font','FontSize'],sans-serif; line-height:1.5; font-size:14px; margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px"> ? ? ? ?['TextColor','BGColor'],sans-serif; line-height:1.5; font-size:14px; margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px"> ? ? ? ?['Maximize','ShowBlocks','Source','Undo','Redo']

? ? ];? ??

? ? // 在 CKEditor 中集成 CKFinder，注意 ckfinder 的路径选择要正确。 (圖片上傳) （1）

? ? config.filebrowserBrowseUrl = '/ckfinder/ckfinder.html'; //上传文件时浏览服务文件夹

? ? config.filebrowserImageBrowseUrl = '/ckfinder/ckfinder.html?Type=Images'; //上传图片时浏览服务文件夹

? ? config.filebrowserFlashBrowseUrl = '/ckfinder/ckfinder.html?Type=Flash'; ?//上传Flash时浏览服务文件夹

? ? config.filebrowserUploadUrl = '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files'; //上传文件按钮(标签)

? ? config.filebrowserImageUploadUrl = '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images'; //上传图片按钮(标签)

? ? config.filebrowserFlashUploadUrl = '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash'; //上传Flash按钮(标签)

? ?换成（2）比较好，因为可能是（1）的路径前面多加了“/”,以至于在图片路径不对，上传不了图片。但是（1）在MVC里面可以上传，这个我不明白。

? ? config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html'; ? ? ? ? ? ? ? ? （2）
? ? config.filebrowserImageBrowseUrl = 'ckfinder/ckfinder.html?Type=Images';
? ? config.filebrowserFlashBrowseUrl = 'ckfinder/ckfinder.html?Type=Flash';
? ? config.filebrowserUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files';
? ? config.filebrowserImageUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images';
? ? config.filebrowserFlashUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash';

} ?

aspx頁面

注意：要注意頁面的樣式，否則CKEditor會亂七八糟。

（

我遇到的問題是：这是我写的样式，#main{} #main span{}。结果是，多了后一个样式就不行，这个问题，我不是很了解。

）

<td>
? ? ? ? ? ? <textarea style="width:575px; height:200px;" ID="txtSource"></textarea>?

? ? ?<script type="text/javascript">

? ? ? ? ?//关键！

? ? ? ? ?CKEDITOR.replace('txtSource',{ skin: 'kama' }); //應用某種主題

? ? ?</script>

<td>
<td>
? ? ? ? ? ? <textarea style="width:575px; height:200px;" ID="txtSource" class="ckeditor"></textarea>?

<td>

另外也可以用服務器控件：<asp:TextBox ID="TextBox1" runat="server" CssClass="ckeditor" TextMode="MultiLine"></asp:TextBox>

去掉aspx安全验证的方法

在web.config文件里

的<system.web>

段里加上

<!—解除验证-->

??? <httpRuntime requestValidationMode="2.0"/>

??? <pages validateRequest="false"></pages>

要过滤掉javascript的关键字，以避免受到攻击如，把接收内容的conment变量替换掉一些关键字。

conment.Replace("script","******");

上传到数据库的时候，要记得对内容进行编码

Server.HtmlEncode(this.TxtAddress.Text);

而从数据库取出来的时候

---我试了一下，发现腾讯就是这样做的。。。。未完待续，问题不是一般的多。如何控制上传图片的大小，如何一次上传多张图片，如何给上传的图片重新以时间命名，这个我搞不懂。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!