现在的位置: 首页 > 综合 > 正文

CKEditor_3.6.2配置及自定义使用

2017年11月19日 ⁄ 综合 ⁄ 共 6943字 ⁄ 字号 小 中 大 ⁄ 评论关闭

IT程序员开发必备-各类资源下载清单，史上最全IT资源，个人收藏总结！

打开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';
}

這是默認的設置，自己可以在裏面修改。
  • 自定義表情
  1. 把文件下的plugins/smiley/images默認表情刪除，然後添加自己的表情。
  2. images是默認是表情文件夾，當然，自己可以添加一個文件夾，然後再在config.js里配置,如： config.smiley_path
    = '/网站文件名称/ckeditor/plugins/smiley/images/（子文件夹名/）';
  • 以下這個Demo的自定義表情，我是使用默認的文件夾的，即上面1的表述。
 
Demo：
CKEDITOR.editorConfig = function( config )
{
    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'],
       ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
       ['Link', 'Unlink', 'Anchor'],
       ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'],
       '/',
       ['Styles', 'Format', 'Font', 'FontSize'],
       ['TextColor', 'BGColor'],
       ['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{}。结果是，多了后一个样式就不行，这个问题，我不是很了解。
）
  1. <td>

                <textarea style="width:575px; height:200px;"
    ID="txtSource"></textarea> 
         <script type="text/javascript">
             //关键！
             CKEDITOR.replace('txtSource', { skin: 'kama' }); //應用某種主題
         </script>
    <td>
  2. <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);

    而从数据库取出来的时候

    ---我试了一下，发现腾讯就是这样做的

     

    。。。。未完待续，问题不是一般的多。如何控制上传图片的大小，如何一次上传多张图片，如何给上传的图片重新以时间命名，这个我搞不懂。

返回
【上篇】
【下篇】

作者:

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园  保留所有权利.
软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）
必威体育
必威电竞