当前位置：文档之家 › 。net下的富文本编辑器FCKeditor的配置方法(图)原创

。net下的富文本编辑器FCKeditor的配置方法(图)原创

  • 格式：doc
  • 大小：312.50 KB
  • 文档页数：6

下载文档原格式

  / 6

合集下载

富文本编辑器CKeditor配置使用+上传图片

富文本编辑器CKeditor配置使用+上传图片

富⽂本编辑器CKeditor配置使⽤+上传图⽚参考⽂献：，⽼版本可以参考有点问题发现可⾏有⼀定参考价值富⽂本编辑器 CKeditor 配置使⽤+上传图⽚下载后默认放在⽹站根⽬录下 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>如果是环境，也可⽤服务器端控件<TextBox><asp:TextBox ID="tbContent" runat="server" TextMode="MultiLine" class="ckeditor"></asp:TextBox>注意在控件中加上 class="ckeditor" 。

3、将相应的控件替换成编辑器代码<script type="text/javascript">CKEDITOR.replace('TextArea1');//如果是在环境下⽤的服务器端控件<TextBox>CKEDITOR.replace('tbContent');//如果<TextBox>控件在母版页中，要这样写CKEDITOR.replace('<%=tbContent.ClientID.Replace("_","$") %>');</script>4、配置编辑器ckeditor的配置都集中在 ckeditor/config.js ⽂件中，下⾯是⼀些常⽤的配置参数：// 界⾯语⾔，默认为 'en'nguage = 'zh-cn';// 设置宽⾼config.width = 400;config.height = 400;// 编辑器样式，有三种：'kama'（默认）、'office2003'、'v2'config.skin = 'v2';// 背景颜⾊config.uiColor = '#FFF';// ⼯具栏（基础'Basic'、全能'Full'、⾃定义）plugins/toolbar/plugin.jsconfig.toolbar = 'Basic';config.toolbar = 'Full';这将配合：config.toolbar_Full = [['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']];//⼯具栏是否可以被收缩config.toolbarCanCollapse = true;//⼯具栏的位置config.toolbarLocation = 'top';//可选：bottom//⼯具栏默认是否展开config.toolbarStartupExpanded = true;// 取消 “拖拽以改变尺⼨”功能 plugins/resize/plugin.jsconfig.resize_enabled = false;//改变⼤⼩的最⼤⾼度config.resize_maxHeight = 3000;//改变⼤⼩的最⼤宽度config.resize_maxWidth = 3000;//改变⼤⼩的最⼩⾼度config.resize_minHeight = 250;//改变⼤⼩的最⼩宽度config.resize_minWidth = 750;// 当提交包含有此编辑器的表单时，是否⾃动更新元素内的数据config.autoUpdateElement = true;// 设置是使⽤绝对⽬录还是相对⽬录，为空为相对⽬录config.baseHref = ''// 编辑器的z-index值config.baseFloatZIndex = 10000;//设置快捷键config.keystrokes = [[ CKEDITOR.ALT + 121 /*F10*/, 'toolbarFocus' ], //获取焦点[ CKEDITOR.ALT + 122 /*F11*/, 'elementsPathFocus' ], //元素焦点[ CKEDITOR.SHIFT + 121 /*F10*/, 'contextMenu' ], //⽂本菜单[ CKEDITOR.CTRL + 90 /*Z*/, 'undo' ], //撤销[ CKEDITOR.CTRL + 89 /*Y*/, 'redo' ], //重做[ CKEDITOR.CTRL + CKEDITOR.SHIFT + 90 /*Z*/, 'redo' ], //[ CKEDITOR.CTRL + 76 /*L*/, 'link' ], //链接[ CKEDITOR.CTRL + 66 /*B*/, 'bold' ], //粗体[ CKEDITOR.CTRL + 73 /*I*/, 'italic' ], //斜体[ CKEDITOR.CTRL + 85 /*U*/, 'underline' ], //下划线[ CKEDITOR.ALT + 109 /*-*/, 'toolbarCollapse' ]]//设置快捷键可能与浏览器快捷键冲突 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 : 'span',styles : { 'background-color' : '#(color)' }}//设置前景⾊的取值 plugins/colorbutton/plugin.jsconfig.colorButton_colors = '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,0 //是否在选择颜⾊时显⽰“其它颜⾊”选项 plugins/colorbutton/plugin.jsconfig.colorButton_enableMore = false//区块的前景⾊默认值设置 plugins/colorbutton/plugin.jsconfig.colorButton_foreStyle = {element : 'span',styles : { 'color' : '#(color)' }};//所需要添加的CSS⽂件在此添加可使⽤相对路径和⽹站的绝对路径config.contentsCss = './contents.css';//⽂字⽅向config.contentsLangDirection = 'rtl'; //从左到右//CKeditor的配置⽂件若不想配置留空即可CKEDITOR.replace( 'myfiled', { customConfig : './config.js' } );//界⾯编辑框的背景⾊ plugins/dialog/plugin.jsconfig.dialog_backgroundCoverColor = '#fffefd'; //可设置参考config.dialog_backgroundCoverColor = 'white' //默认//背景的不透明度数值应该在：0.0～1.0 之间 plugins/dialog/plugin.jsconfig.dialog_backgroundCoverOpacity = 0.5//移动或者改变元素时边框的吸附距离单位：像素 plugins/dialog/plugin.jsconfig.dialog_magnetDistance = 20;//是否拒绝本地拼写检查和提⽰默认为拒绝⽬前仅firefox和safari⽀持 plugins/wysiwygarea/plugin.js.config.disableNativeSpellChecker = true//进⾏表格编辑功能如：添加⾏或列⽬前仅firefox⽀持 plugins/wysiwygarea/plugin.jsconfig.disableNativeTableHandles = true; //默认为不开启//是否开启图⽚和表格的改变⼤⼩的功能 config.disableObjectResizing = true;config.disableObjectResizing = false//默认为开启//设置HTML⽂档类型config.docType = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd%22' ;//是否对编辑区域进⾏渲染 plugins/editingblock/plugin.jsconfig.editingBlock = true;//编辑器中回车产⽣的标签config.enterMode = CKEDITOR.ENTER_P; //可选：CKEDITOR.ENTER_BR或CKEDITOR.ENTER_DIV//是否使⽤HTML实体进⾏输出 plugins/entities/plugin.jsconfig.entities = true;//定义更多的实体 plugins/entities/plugin.jsconfig.entities_additional = '#39'; //其中#代替了&//是否转换⼀些难以显⽰的字符为相应的HTML字符 plugins/entities/plugin.jsconfig.entities_greek = true;//是否转换⼀些拉丁字符为HTML plugins/entities/plugin.jsconfig.entities_latin = true;//是否转换⼀些特殊字符为ASCII字符如"This is Chinese: 汉语."转换为"This is Chinese: 汉语." plugins/entities/plugin.jsconfig.entities_processNumerical = false;//添加新组件config.extraPlugins = 'myplugin'; //⾮默认仅⽰例//使⽤搜索时的⾼亮⾊ plugins/find/plugin.jsconfig.find_highlight = {element : 'span',styles : { 'background-color' : '#ff0', 'color' : '#00f' }};//默认的字体名 plugins/font/plugin.jsconfig.font_defaultLabel = 'Arial';//字体编辑时的字符集可以添加常⽤的中⽂字符：宋体、楷体、⿊体等 plugins/font/plugin.jsconfig.font_names = 'Arial;Times New Roman;Verdana';//⽂字的默认式样 plugins/font/plugin.jsconfig.font_style = {element : 'span',styles : { 'font-family' : '#(family)' },overrides : [ { element : 'font', attributes : { 'face' : null } } ]};//字体默认⼤⼩ plugins/font/plugin.jsconfig.fontSize_defaultLabel = '12px';//字体编辑时可选的字体⼤⼩ plugins/font/plugin.jsconfig.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/48px;72/72px'//设置字体⼤⼩时使⽤的式样 plugins/font/plugin.jsconfig.fontSize_style = {element : 'span',styles : { 'font-size' : '#(size)' },overrides : [ { element : 'font', attributes : { 'size' : null } } ]};//是否强制复制来的内容去除格式 plugins/pastetext/plugin.jsconfig.forcePasteAsPlainText =false//不去除//是否强制⽤“&”来代替“&amp;”plugins/htmldataprocessor/plugin.jsconfig.forceSimpleAmpersand = false;//对address标签进⾏格式化 plugins/format/plugin.jsconfig.format_address = { element : 'address', attributes : { class : 'styledAddress' } };//对DIV标签⾃动进⾏格式化 plugins/format/plugin.jsconfig.format_div = { element : 'div', attributes : { class : 'normalDiv' } };//对H1标签⾃动进⾏格式化 plugins/format/plugin.jsconfig.format_h1 = { element : 'h1', attributes : { class : 'contentTitle1' } };//对H2标签⾃动进⾏格式化 plugins/format/plugin.jsconfig.format_h2 = { element : 'h2', attributes : { class : 'contentTitle2' } };//对H3标签⾃动进⾏格式化 plugins/format/plugin.jsconfig.format_h1 = { element : 'h3', attributes : { class : 'contentTitle3' } };//对H4标签⾃动进⾏格式化 plugins/format/plugin.jsconfig.format_h1 = { element : 'h4', attributes : { class : 'contentTitle4' } };//对H5标签⾃动进⾏格式化 plugins/format/plugin.jsconfig.format_h1 = { element : 'h5', attributes : { class : 'contentTitle5' } };//对H6标签⾃动进⾏格式化 plugins/format/plugin.jsconfig.format_h1 = { element : 'h6', attributes : { class : 'contentTitle6' } };//对P标签⾃动进⾏格式化 plugins/format/plugin.jsconfig.format_p = { element : 'p', attributes : { class : 'normalPara' } };//对PRE标签⾃动进⾏格式化 plugins/format/plugin.jsconfig.format_pre = { element : 'pre', attributes : { class : 'code' } };//⽤分号分隔的标签名字在⼯具栏上显⽰ plugins/format/plugin.jsconfig.format_tags = 'p;h1;h2;h3;h4;h5;h6;pre;address;div';//是否使⽤完整的html编辑模式如使⽤，其源码将包含：<html><body></body></html>等标签config.fullPage = false;//是否忽略段落中的空字符若不忽略则字符将以“”表⽰ plugins/wysiwygarea/plugin.jsconfig.ignoreEmptyParagraph = true;//在清除图⽚属性框中的链接属性时是否同时清除两边的<a>标签 plugins/image/plugin.jsconfig.image_removeLinkByEmptyURL = true;//⼀组⽤逗号分隔的标签名称，显⽰在左下⾓的层次嵌套中 plugins/menu/plugin.js.config.menu_groups ='clipboard,form,tablecell,tablecellproperties,tablerow,tablecolumn,table,anchor,link,image,flash,checkbox,radio,textfield,hiddenfield,imagebutton,button,select,textarea';//显⽰⼦菜单时的延迟，单位：ms plugins/menu/plugin.jsconfig.menu_subMenuDelay = 400;//当执⾏“新建”命令时，编辑器中的内容 plugins/newpage/plugin.jsconfig.newpage_html = '';//当从word⾥复制⽂字进来时，是否进⾏⽂字的格式化去除 plugins/pastefromword/plugin.jsconfig.pasteFromWordIgnoreFontFace = true; //默认为忽略格式//是否使⽤<h1><h2>等标签修饰或者代替从word⽂档中粘贴过来的内容 plugins/pastefromword/plugin.jsconfig.pasteFromWordKeepsStructure = false;//从word中粘贴内容时是否移除格式 plugins/pastefromword/plugin.jsconfig.pasteFromWordRemoveStyle = false;//对应后台语⾔的类型来对输出的HTML内容进⾏格式化，默认为空config.protectedSource.push( /<"?["s"S]*?"?>/g ); // PHP Codeconfig.protectedSource.push( //g ); // ASP Codeconfig.protectedSource.push( /(]+>["s|"S]*?<"/asp:[^">]+>)|(]+"/>)/gi ); // 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.jsconfig.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.jsconfig.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.jsconfig.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:/editorstyles/styles.js';//起始的索引值config.tabIndex = 0;//当⽤户键⼊TAB时，编辑器⾛过的空格数，(&nbsp;) 当值为0时，焦点将移出编辑框 plugins/tab/plugin.jsconfig.tabSpaces = 0;//默认使⽤的模板 plugins/templates/plugin.js.config.templates = 'default';//⽤逗号分隔的模板⽂件plugins/templates/plugin.js.config.templates_files = [ 'plugins/templates/templates/default.js' ]//当使⽤模板时，“编辑内容将被替换”框是否选中 plugins/templates/plugin.jsconfig.templates_replaceContent = true;//主题config.theme = 'default';//撤销的记录步数 plugins/undo/plugin.jsconfig.undoStackSize =20;// 在 CKEditor 中集成 CKFinder，注意 ckfinder 的路径选择要正确。

FCKEDIT 配置

FCKEDIT 配置

FCKEDIT 配置（一）一:首先删除不必要的文件节省空间。

凡是以_开头的文件如_samples，_testcases和一些用不到的.asp、.jsp、.cfm文件统统干掉。

二:修改fckconfig.jsFCKConfig.AutoDetectLanguage = true ;//是否自动检测语言FCKConfig.DefaultLanguage = 'zh-cn' ;//设置语言FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/default/' ;//设置皮肤FCKConfig.TabSpaces = 1 ;//tab是否有效FCKConfig.ToolbarStartExpanded = true ;//编辑工具条是否出现，等点“展开工具栏”时才出现FCKConfig.FontNames = '宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;//添加中文字体修改FCKeditor\editor\css\fck_editorarea.css设置默认字体及大小body, td{font-family: Arial, Verdana, Sans-Serif;font-size: 14px;}三:关于文件上传的设置修改fckconfig.jsvar _FileBrowserLanguage = 'php' ; // asp | aspx | cfm | lasso | perl | phpvar _QuickUploadLanguage = 'php' ; // asp | aspx | cfm | lasso | php修改fckeditor\editor\filemanager\browser\connectors\php\config.php$Config['Enabled'] = true ;$Config['UserFilesPath'] = '/UserFiles/' ;//设置上传的文件夹，可自己指定修改fckeditor\editor\filemanager\connectors\upload.php //这个没有找到$Config['Enabled'] = true ;$Config['UseFileType'] = true ;$Config['UserFilesPath'] = '/UserFiles/' ;//同上要一样四:引入在线编辑器时只需<?phpinclude("fckeditor/fckeditor.php") ;$oFCKeditor = new FCKeditor('FCKeditor1') ;//实例化$oFCKeditor->BasePath = 'fckeditor/';//这个路径一定要和上面那个引入路径一致，否则会报错:找不到fckeditor.html页面//$oFCKeditor->Value = '' ;$oFCKeditor->Width = '100%' ;$oFCKeditor->Height = '300' ;$oFCKeditor->ToolbarSet = 'Default' ; //可以自己精简toolbar$oFCKeditor->Create() ;//可以用$oFCKeditor->CreateHtml()?>JS用alert( FCKeditorAPI.GetInstance('FCKeditor1').GetXHTML( true ))得到FCKeditor1的值；PHP用$_POST['FCKeditor1']得到FCKeditor1的值。

FCKedit的使用

FCKedit的使用

/xiaoyao2011/archiv e/2011/10/27/Textarea.html富文本编辑很多地方需要用到，其中比较有名的是CKEditor，以前叫FCKEditor，虽然百度出的UEditor也比较火，但还是老牌子好用。

首先，去官网下载最新版3.6.5的。

然后删除_samples和_source文件夹，在项目根目录下新建个文件夹，名字自己估摸着起，叫ckeditor吧，然后把剩余的全部拷贝进去。

初步的配置就这样。

下面是使用方法。

首先页面中需要引用ckeditor.js这个文件，按上述路径，就是<script type="text/javascript" src="~/ckeditor/ckeditor.js"></script>然后在使用的位置如下代码所示：<textarea name="content" id="content"></textarea><script type="text/javascript">var editorContent;$(document).ready(function () {editorContent = CKEDITOR.replace("content");});</script>然后就是一些常用接口获得值：getData()设置值：setData("******")追加插入值：insertHTML("*******")上述代码中，editorContent获得了实例，就可以通过editorContent.getData()获得编辑框里的html内容了获得的值和设置的值以及插入的都是html格式的字符串（如果你用的MVC的话，因为有特殊字符默认是不允许提交的，需要在HttpPost的action 上加[AcceptVerbs(HttpVerbs.Post)]和[ValidateInput(false)]属性标记如下图：[HttpPost][AcceptVerbs(HttpVerbs.Post)][ValidateInput(false)]public ActionResult Create(string title, string content, string id){//todo}还有个就是编辑框的自定义配置，打开ckeditor文件夹下的config.js文件，如下图所示：/*Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.For licensing, see LICENSE.html or /license*/CKEDITOR.editorConfig = function( config ){// Define changes to default configuration here. For example:// nguage = 'fr';// config.uiColor = '#AADC6E';};可以自己配置一些东西，例如，要设置编辑框的宽度为500px，就添加一句config.width=500;即可，其他的自己试试还有就是toolbar的配置，有两个Full和Basic，默认是Full，可以通过上面的config.toobar="Basic";设置成简单模式。

使用FCKeditor配置的方法

使用FCKeditor配置的方法

FCKConfig.FontNames = ‘宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana’ ;//添加中文字体 修改 FCKeditor\editor\CSS\fck_editorarea.css 设置默认字体及大小 body, td { font-family: Arial, Verdana, Sans-Serif; font-size: 14px; } 3 关于文件上传的设置 修改 fckconfig.js var _FileBrowserLanguage = ‘php’ ; // asp | aspx | cfm | lasso | perl | php var _QuickUploadLanguage = ‘php’ ; // asp | aspx | cfm | lasso | php
使用 FCKeditor 配置的方法
大家知道使用 FCKeditor 配置吗?下面我们就给大家详细介绍一下吧! 1 首先删除不必要的文件节省空间。凡是以_开头的文件如_samples， _testcases 和一些用不到的.asp、.jsp、.cfm 文件统统干掉。 2 修改 fckconfig.js FCKConfig.AutoDetectLanguage = true ;//是否自动检测语言 FCKConfig.DefaultLanguage = ‘zh-cn’ ;//设置语言 FCKConfig.SkinPath = FCKConfig.BasePath + ‘skins/default/’ = 1 ;//tab 是否有效 FCKConfig.ToolbarStartExpanded = true ;//编辑工具条是否出现，等点展开 工具栏&rdquo;时才出现

FCKeditor使用方法详解

FCKeditor使用方法详解

FCKeditor使用方法详解目录一、FCKeditor简介 (2)1.1 FCKeditor是什么 (2)1.2 FCKeditor的特点 (3)二、安装与配置FCKeditor (5)三、基本功能使用方法 (6)3.1 文本格式化 (7)3.2 段落和列表操作 (9)3.3 图片和表格插入 (10)3.4 表单字段 (11)3.5 样式和脚本 (12)四、高级功能使用方法 (13)4.1 可视编辑器 (14)4.2 自动排版 (16)4.3 批量导入/导出 (17)4.4 国际化支持 (18)4.5 客户端存储 (20)五、自定义插件与扩展 (21)5.1 如何安装插件 (22)5.2 插件的使用方法 (24)5.3 开发自定义插件 (25)六、常见问题与解决方案 (27)6.1 常见问题列表 (28)6.2 问题解决步骤 (29)七、实例演示 (30)7.1 创建一个简单的HTML页面 (31)7.2 在页面中添加FCKeditor (32)7.3 配置和使用FCKeditor的各种功能 (34)八、FCKeditor在主流开发框架中的应用 (35)8.1 PHP+MySQL环境下的应用 (36)8.2 环境下的应用 (37)8.3 Java/Spring环境下的应用 (39)九、总结与展望 (39)9.1 FCKeditor的优点 (40)9.2 FCKeditor的局限性与未来发展趋势 (41)一、FCKeditor简介FCKeditor是一款由德国Maxthon公司开发的强大的网页文本编辑器，它具有丰富的功能、高度的可定制性和易用性，被广泛应用于各种Web应用中，如论坛、博客、新闻发布等。

FCKeditor不仅提供了基本的文本编辑功能，还支持图像、表格、超链接等元素的插入和编辑，以及自定义插件和宏，可以满足用户的各种编辑需求。

FCKeditor采用了基于JavaScript的富文本编辑技术，具有高效的性能和较小的体积，可以轻松地集成到各种Web应用中。

FCKeditor (jsp在线编辑器)配置总结

FCKeditor (jsp在线编辑器)配置总结

FCKeditor （jsp在线编辑器）配置总结折腾了两天，从eWebEditor到CKeditor再到FCKeditor真是费足了劲了！本人比较喜欢开源的，在网上狂搜一通最后被CKeditor强大的功能和华丽的界面吸引的五体投地~~，高高兴兴的下载了CKeditor，花费了半天的时间终于把CKeditor配置好了，结果一点图片发现连个上传图片的按钮都没有（~~~~(>_<)~~~~ ），原来还需要一个CKfinder插件。

于是又兴冲冲的跑到官网上找CKfinder，找到最后却发现就是没有java版的！！！而且这个插件好像是要收费的，哎~真是郁闷死了。

不能用CKeditor那就用FCKeditor吧，呵呵，下面牢骚归正传：一、首先到官网下载最新版本的FCKeditor 2.6.5下载地址：/project/downloading.php?group_id=75348&filename=FCKeditor_2.6.5.zip FCKeditor.Java 2.6 要下的有fckeditor-java-demo-2.6.war (示例，我觉得下载这一个就够了)fckeditor-java-2.6-src.zip (源文件，如果你想看就下吧)fckeditor-java-2.6-bin.zip (我下了，但没有上)二、(1)、把FCKeditor 2.6.5解压到WebRoot下(2)、解压fckeditor-java-2.6-bin.zip，把文件夹中的fckeditor-java-core-2.6.jar以及lib中的所有jar包拷贝到你的web程序的lib中，fckeditor-java-demo-2.6.war中的slf4j-simple-1.5.8.jar也要拷进去（注意：slf4j-api和slf4j-simple的版本一定要一致）。

如果你觉得麻烦，那么就从fckeditor-java-demo-2.5.war 中直接将lib文件夹下的所有jar包复制到项目的lib中，我就是这么做的。

文字编辑器FCKeditor简介以及基本配置和使用方法

文字编辑器FCKeditor简介以及基本配置和使用方法什么是FCKeditorFCKeditor是一个专门使用在网页上属于开放源代码的所见即所得文字编辑器。

它志于轻量化，不需要太复杂的安装步骤即可使用。

它可和PHP、JavaScript、ASP、、ColdFusion、Java、以及ABAP等不同的编程语言相结合。

“FCKeditor”名称中的“FCK”是这个编辑器的作者的名字Frederico Caldeira Knabben的缩写。

FCKeditor 相容于绝大部分的网页浏览器，像是 : Internet Explorer 5.5+ (Windows)、Mozilla Firefox 1.0+、Mozilla 1.3+ 和 Netscape 7+。

在未来的版本也将会加入对 Opera 的支援。

如何安装以及如何在中配置FCKeditor一、相关资料官方网站官方文档下载地址download/default.html官方演示demo/default.html二、拷贝核心文件并添加组件解压FCKeditor_2.6.4.zip文件，将fckeditor文件夹拷贝到项目中；解压_2.6.3.zip文件，将bin/Debug/2.0下的FredCK.FCKeditorV2.dll添加到项目引用中，并在.net中的工具箱中添加(具体方法不再细述)三、删除不必要的文件从官方下载下来的FCKEditor2.6大小有3.61M左右(解压后)，其实有很多文件对于只用的来讲是不需要的，我们可以删除不必要的文件：1.根目录下除editor目录、fckconfig.js、fckeditor.js fckstyles.xml fcktemplates.xml 这几个保留，其余的全部删除2.editorfilemanagerconnectors目录中除aspx目录外全部删除3.editorlang目录中除en.js、zh.js 、zh-cn.js外全部删除4.删除_samples目录，当然如果你想看示例，就不要删除这个目录了。

Fckeditor使用

Fckeditor 使用要点:1. fckeditor 使用及配置2. 分析并解决fckeditor 的乱码问题3. 修改fckeditor 以符合自己的要求介绍FCKeditor 的官方网站：FCKeditor 是一个开源的HTML文本编辑器，可以让web 程序拥有如MS Word 这样强大的编辑功能，还可以上传图片，flash等，支持多国语言。

准备环境1. 下载FCKeditor从官方网站可以下载. 下载的压缩包为FCKeditor_2.4.3.zip (本文中使用的版本).因为我们要使用在JavaWeb 项目中，所以还需要再下载压缩包FCKeditor-2.3.zip (本文中使用的版本)2. 加入到JavaWeb 工程中.解压缩FCKeditor 2.4.3.zip 得到文件夹fckeditor. 里面有editor 文件夹, _samples 文件夹和一些文件. 把文件夹fckeditor 拷贝到工程的WebRoot 目录下.如果要在jsp 中使用定义标签调用FCKeditor需要拷贝FCKeditor-2.3/src 下的FCKeditor.tld 文件到项目的WebContent/WEB-INF 目录或其子目录下, 但不能放在WEB-INF/classes 或WEB-INF/lib 下. 并且拷贝FCKeditor-2.3.jar 到工程的WEB-INF/lib 目录中.如果要使用文件上传相关功能需要拷贝FCKeditor-2.3/web/WEB-INF/lib下的commons-fileupload.jar和FCKedito-2.3.jar 到工程WEB-INF/lib 目录中.在工程的web.xml 中增加FCKeditor-2.3/web/WEB-INF/web.xml 中的内容, 然后做以下修改:<servlet><servlet-name>SimpleUploader</servlet-name>……<init-param><!--修改此参数设置为true，开启上传功能--><param-name>enabled</param-name><param-value>true</param-value></init-param></servlet>修改web.xml 中Connector 和SimpleUploader 为正确的路径.例如SimpleUploader的映射默认为/editor/filemanager/upload/simpleuploader.应改为/fckeditor/editor/filemanager/upload/simpleuploader. 其中fckeditor 为编辑器所在目录.使用(摘自官方文档)方法一: 使用javascript, 建立并输出编辑器1. 引入fckeditor.js<SCRIPT type="text/javascript" src="fckeditor/fckeditor.js"></SCRIPT>2.<script type="text/javascript">var oFCKeditor = new FCKeditor('FCKeditor1');oFCKeditor.BasePath = "fckeditor/";oFCKeditor.Create();</script>方法二: 使用javascript, 用编辑器来替换对应的文本域1. In <HEAD> add the "onload" method:<script type="text/javascript">window.onload = function(){var oFCKeditor = new FCKeditor( 'MyTextarea' ) ;oFCKeditor.BasePath = "/fckeditor/" ;oFCKeditor.ReplaceTextarea() ;}</script>2. In <BODY> add the below code to replace an existing TEXTAREA in the page:<textarea id="MyTextarea" name="MyTextarea">This is <b>the</b> initial value.</textarea>方法三: 在jsp 中使用自定义标签(摘自官方的demo)1. 导入标签: <%@ taglib prefix="fck" uri="/tags-fckeditor" %>2. 调用FCKeditor<fck:editor id="content" basePath="${pageContext.request.contextPath}/fckeditor/"></fck:editor>还有其它方法, 请参见官方文档: /FCKeditor_2.x/Developers_Guide配置以上就可以在我们的页面中使用fckeditor 了. 还可以对其进行配置(Y ou can either edit the main configuration file or just override the settings you want to change in a separate file)1. 可以直接修改配置文件fckconfig.js2. 或是指定一个配置文件, 只写需要更改的设置项.使用:var oFCKeditor = new FCKeditor( "FCKeditor1" ) ;// 指定自定义配置文件oFCKeditor.Config["CustomConfigurationsPath"] = "/myconfig.js" ;oFCKeditor.Create() ;即设置CustomConfigurationsPath 属性为配置文件的路径提示:♦在使用时,系统会自动侦测并运用适当的界面语言.♦修改配置后, 要先清除缓存, 以免影响结果♦BasePath 属性是编辑器的基路径,默认为/Fckeditor/文件夹, 要以/ 结尾自定义工具栏：可修改或增加ToolbarSets，例如：FCKConfig.ToolbarSets["myToolbar"] = [['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink','-','TextColor' ,'-','Image','Fl ash','Table']] ;可以尝试去掉一些按钮在页面中要指定使用这个自定义的ToolbarSetsvar oFCKeditor = new FCKeditor( "FCKeditor1" ) ;oFCKeditor.ToolbarSet="myToolbar"oFCKeditor.Create() ;修改“回车”和“Shift+回车”的换行行为默认是回车是一个段落, shift+回车是换行, 我们要颠倒过来可以按如下设置(注释提示了可选模式)FCKConfig.EnterMode = 'br' ; // 回车是换行// p | div | brFCKConfig.ShiftEnterMode = 'p' ; // shift+Enter 是一个段落// p | div | br编辑区样式文件FCKConfig.EditorAreaCSS = FCKConfig.BasePath + 'css/fck_editorarea.css' ;可以在这个文件中自定义样式, 将会作用于编辑区提示: 可以使用@import url(other.css);更换表情图片1. 拷贝图片到一个文件夹.例如放到FCKConfig.BasePath + 'images/smiley/wangwang/' 下2. 修改配置文件1.更改表情图片的路径FCKConfig.SmileyPath = FCKConfig.BasePath + 'images/smiley/wangwang/' ;2.指定表情图片的文件名FCKConfig.SmileyImages= ['0.gif','1.gif','2.gif','3.gif','4.gif','5.gif'] ;3.设定窗口合适的大小FCKConfig.SmileyColumns = 3 ; // 有几列FCKConfig.SmileyWindowWidth = 650 ; // 表情窗口宽度FCKConfig.SmileyWindowHeight = 480 ; // 表情窗口高度提示:如果使用的图片过多, 而指定的窗口大小不足够大时, 就会有一部分表情显示不出来,窗口上没有滚动条, 且窗口大小不能用鼠标调整.解决办法: 找到这个对话框的源文件fckeditor/editor/dialog/fck_smiley.html 文件. 修改其中<body> 中的scroll=”no”属性值为“auto”修改字体FCKConfig.FontNames ='宋体;楷体_GB2312;黑体;隶书;Times New Roman;Arial' ;FCKConfig.FontSizes ='1/最小;2/较小;3/中等;4/较大;5/最大';使用文件上传功能修改配置文件浏览与文件上传的链接，使之与web.xml中Servlet的映射路径联系起来。

文本编辑器 FCKeditor

文本编辑器FCKeditor以2.6.5版为例，目前已升级为CKeditor将FCKeditor复制到工程的WebRoot目录下调用方式1.通过JavaScript调用构造器var FCKeditor = function(instanceName, width, height, toolbarSet, value );instanceName为编辑器输出给textarea元素的name属性的值，必须制定，参数会赋值给同名属性2.通过JSP自定义标签调用将fckeditor-java-core核心包、以及lib目录下的commons-fileupload、commons-io、slf4j和slf4j-simple以及imageinfo包，复制到工程的WEB-INF的lib目录下JSP页面引入Taglib：<%@taglib uri="" prefix="FCK"%>创建实例：<FCK:editor instanceName="myEditor" basePath="/fckeditor"></FCK:editor>注意：此处的basePath使用"/fckeditor"早期版本必须指定value的值，否则会报空指针异常配置FCKeditor主配置文件：fckconfig.js，一般不对主配置文件进行修改，而是使用一个额外的配置文件●使自定义配置文件生效方法一：生成实例时指定var oFCKeditor = new FCKeditor(“FCKeditor1”);oFCKeditor.Config[“CustomConfigurationsPath”] = “/FCKeditorTest/myConfig.js”方法二：在主配置文件中指定FCKConfig.CustomConfigurationsPath= FCKConfig. BathPath+ “myConfig.js”;●常用配置项✓默认回车换段落，shift+回车换行FCKConfig.EnterMode = …br‟;FCKConfig.ShiftEnterMode = …p‟;✓自定义Toolbar1.自定义工具集FCKConfig.ToolbarSets[“名称”]={…};…-‟代表分隔符参考defalut工具集里面的元素名称，删改即可2.实例化时指定工具集✓修改字体FCKConfig.FontNames = “字体名”，多个字体名之间以分号分隔✓修改编辑区样式编辑区的样式文件由FCKConfig.EditorAreaCSS = FCKConfig.BasePath + …css/fck_editorarea.css‟;指定FCKConfig.BasePath代表fckeditor/editor/✓更换表情图片//表情图片的路径，文件夹FCKConfig.SmileyPath//表情文件FCKConfig. SmileyImages = […xxx.gif‟,‟xxx.gif‟…];//每行显式的表情个数FCKConfig. SmileyColumns = 8;//显式表情图片的窗口的宽度、高度FCKConfig. SmileyWindowWidth = 650;FCKConfig. SmileyWindowHeight = 480;如果要正常按照自定义高、宽显示，并出现滚动条，还需要：1.将editor/dialog/fck_smiley.html中的dialog.SetAutoSize( true ) ;注释掉2.将<body style="overflow: hidden">的overflow修改为auto文件上传2.创建fckeditor.properties文件，并且放到classpath（工程SRC目录下）erActionImpl=erActionImpl常见问题：上传中文名的文件时，文件名会变成乱码查看editor/filemanager/browser/default/frmupload.html如果<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 则没有问题查看net.fckeditor.connector. Dispatcher的doPost方法List<FileItem> items = upload.parseRequest(request);前没有对request编码将Servlet代码复制出来，自己定义一个类，同时要复制ConnectorServlet，重新指定该Dispatcher类（要修改web.xml，将处理类指定为该类）在try前加上upload.setHeaderEncoding(“UTF-8”);注意：早期版本中，该处理可能直接写在ConnectorServlet中✓创建中文目录名时会出现乱码查看editor/filemanager/browser/default/frmcreatefolder.html如果<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 则没有问题查看代码，不是通过表单提交，而是通过CreateFolder()函数提交，查看该函数，发现oConnector.SendCommand()，找到父窗口browser.html，找到该对象及其方法，参数二中，包含要创建的文件夹的名字，该函数中的sUrl即是要访问的地址，alert后发现，编码正常。

富文本编辑器ckeditor使用手册

富文本编辑器ckeditor使用手册一.环境配置1 在web.xml配置servlet<servlet><servlet-name>multiform</servlet-name><servlet-class>com.newtouch.upload.servlet.MultiFormServlet</servlet-class><load-on-startup>1</load-on-startup></servlet><servlet-mapping><servlet-name>multiform</servlet-name><url-pattern>/multiform</url-pattern></servlet-mapping>2 将插件ckeditor及upload文件夹（用于图片上传功能）添加至工程中。

二. 如何在项目中使用ckeditor？将标签textarea中的isRich属性设置为true即可textarea替换成ckeditor。

三.在textarea标签中有哪几个属性设置与ckeditor有关？分别有哪些作用？toolbarType：提供了三种工具栏的布局，分别是full，normal，basic。

customToolBar：如果在开发中有特殊的需求导致提供的三种默认的工具栏布局无法满足项目需求，开发者可以自定义工具栏中的选项，以及其排列。

开发者可以将所需要的工具栏以逗号为分隔符进行排列。

目前共提供12类工具栏。

（1）source：包含source按钮。

（2）system：系统类按钮，包括保存，新建，预览。

（3）templates：包含模板按钮，可以利用所提供的模板进行文字图片的编辑。

（4）textOperation：包括一些文本操作的按钮，例如剪切，复制，粘贴等。

  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

.net下的富文本编辑器FCKeditor的配置方法（图）原创FCKeditor是一款开源的富文本编辑器，几乎支持所有流行的Web开发语言，版本稳定，用户多，可配置性好。

以前做Java和php的时候就一直用FCKeditor，现在做.net了继续用。

呵呵。

我用在对文章的评论页面，所以只需要少部分功能。

先看看我做好的效果：在看看官方完整功能：第一步：软件下载和安装下载地址：/download需要下载和FCKeditor两个文件，本身其实只是在.net中配置FCKedi tor用的，本身不包含实质内容。

我下载的是：_2.6.3和FCKeditor_2.6.5两文件。

1. 对于FCKeditor_2.6.5.zip文件解压缩后，将得到的fckeditor文件夹复制到网站的目录下面。

我是放在我的样式Style下的JS目录如图：2.对于_2.6.3解压_2.6.3，该目录中包括_2.6.3的全部代码，但是我们只要使用它编译好的部分。

■找到其目录下的\bin\Release目录中的FredCK.FCKeditorV2.dll文件。

把FredCK.FCKeditorV2.dl l添加到bin目录下。

如图：■在VS2005/2008的工具箱上新建一个名叫FCKEditor的Tab，然后在里面点右键，选择Choose It em，定位到解压后生成的\bin\Release\2.0目录下的FredCK.FCKEditorV2.dll。

该T ab下就会生成一个FCKEditor的.net组件。

在vs的Design模式下把该组件拖放到界面上。

第二步：配置FCKeditor进入FCKeditor文件夹，编辑fckconfig.js 文件，如下：1、指定编辑器应用的编程环境，修改var _FileBrowserLanguage = 'asp' ; // asp | aspx | cfm | lasso | perl | php | pyvar _QuickUploadLanguage = 'asp' ; // asp | aspx | cfm | lasso | php改为var _FileBrowserLanguage = 'aspx' ; // asp | aspx | cfm | lasso | perl | php | pyvar _QuickUploadLanguage = 'aspx' ; // asp | aspx | cfm | las so | php2、配置语言包。

有英文、繁体中文等，这里我们使用简体中文。

修改FCKConfig.DefaultLanguage = 'en' ;为FCKConfig.DefaultLanguage = 'zh-cn' ;3、配置皮肤。

有default、office2003、silver风格等，这里我们可以使用默认。

FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/default/' ;4、在编辑器域内可以使用Tab键。

（1为是，0为否）FCKConfig.TabSpaces = 0 ; 改为FCKConfig.TabSpaces = 1 ;5、加上几种我们常用的字体的方法修改FCKConfig.FontNames = 'Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman; Verdana' ;为FCKConfig.FontNames = '宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New; Tahoma;Times New Roman;Verdana'6、定制工具栏如果你的编辑器用在网站前台的话，那就不得不考虑安全了，在前台千万不要使用Default的toolbar，要么自定义一下功能，要么就用系统已经定义好的Basic，也就是基本的toolbar，修改FCKConfig.ToolbarSets["Basic"] = [['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink','-','About']为FCKConfig.ToolbarSets["Basic"] = [['Bold','Italic','-','OrderedList','UnorderedList','-','Unlink','-','Style','FontSize','TextColor','BG Color','-','Smiley','SpecialChar','Replace','Preview']] ;7、配置WebConfig在<appSettings>节点添加，如下所示：如果你用的是默认的上传功能，则<add key="FCKeditor:BasePath" value="~/fckeditor/"/><add key="FCKeditor:UserFilesPath" value="/网站名称/UploadFiles/"/>8.如需使用上传图片功能还需配置editor/filemanager/connectors/aspx/config.ascx修改CheckAuthentication()方法，返回true 注意看这里的注释：意思是说不要简单的修改为true，而应该在这里加一些权限Check的判断。

否则的话所有人都可以上传图片。

private bool CheckAuthentication(){// WARNING : DO NOT simply return "true". By doing so, you are allowing// "anyone" to upload and list the files in your server. You must implem ent// some kind of session validation here. Even something very simple as...//// return ( Session[ "IsAuthorized" ] != null && (bool)Session[ "IsAuthorized" ] == true );//// ... where Session[ "IsAuthorized" ] is set to "true" as soon as the// user logs in your system.return true;}不过不修改的话，会弹出一个阻止框，显示"this connector is disabled Please check the"editor/fi lemanager/connectors/aspx/config.aspx"9. 其它次要配置（不影响使用）* 可以把fckeditor目录及其子目录下所有下划下开头的范例、源文件删掉。

* 可以在fckeditor目录下只保留fckconfig.js、fckeditor.js和几个xml文件，其余全部删掉。

* fckeditor目录下的editor目录下有个filemanager目录，把该目录下的borswer\default\connect ors目录中除aspx目录以外的全部目录删掉。

* 可以把editor\lang目录下除zh-cn.js、en.js、zh.js之外的全部删掉。

第三步：使用FCKeditor编辑器注意看这里红色的部分，是在使用Fckeditor增加的：AutoEventWireup="true"是增加一些特殊事件的关联。

validateRequest="false"是因为Fckeditor框内的提交的内容是HTML，所以要去掉验证提交请求的功能。

<%@ Page Language="C#" AutoEventWireup="true"CodeFile="Default.aspx.cs" Inherits="_Default" validateRequest="false"%><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or g/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml" ><head runat="server"><title>无标题页</title></head><body><form id="form1" runat="server"><div><FCKeditorV2:FCKeditor ID="FCKeditor1" runat="server"></FCKeditorV2:FCKeditor>&nbsp;</div></form></body></html>后台获取编辑器内填写的内容：读取FCKeditor1控件的Value属性值即可。