下载文档原格式
fck 属性配置大全优化FCKeditor文件夹和文件：下载FCKeditor并解压之后，会产生_samples和editor两个文件夹和几个文件，全部删除以_开头的文件夹和文件，因为这些都是FCKeditor的一些例子而已，可以学习一下，但上传到网站服务器上就大可不必了，删除。
在根目录下，还有几个fckeditor.asp,fckeditor.php,fckeditor.js......等其它文件，这个就看你的网站服务器和网站需要什么程序语言，有PHP，ASP，PERL，.NET等，我选择的是脚本配置文件fckeditor.js，还有三个文件fckconfig.js、fckstyles.xml、fcktemplates.xml是必需的文件，其它的可以全部删除。
打开editor文件夹，进入lang文件夹，这里面是FCKeditor的语言包来的，一般国内选择en.js 和zh.js和zh-cn.js文件就可以了，加上必需的文件fcklanguagemanager.js(此文件是2.4版本以下必需的)，其它的文件可以完全删除。
之后打开editor/filemanager文件夹，如果不要求在上传图片或者文件的时候显示服务器上的内容，可以选择删除filemanager文件夹下的brower文件夹。
然后进入upload文件夹，里面是各种程序语言的上传文件，选择你需要的那个程序语言文件夹，其它的删除。
进入editor/Plugins文件夹，如果你不需要这些额外的FCKeditor插件的话，把里面的文件夹全部删除。
进入editor/skins文件夹，里面是编辑器的皮肤文件，default文件是默认的灰色面板的编辑器，Office2003和silver是另外加载的，看哪个好看就选择哪个，然后其它的删除。
另外，editor/dialog文件夹里是一些编辑器的对话框，如果选择基本的一些功能的话，可以相应的选择其文件，把其它的删除也是可以的。
①Text Editor -- 用flash作的,比較特別②TinyMCE -- 免費的編輯器,支援多種瀏覽器③FCKeditor -- 免費的編輯器,支援多種瀏覽器URL:[/Heroman/FCkEditorDemo.rar]配置文件/lesson/148/2623648.shtml /152/2615652.shtml④htmlArea -- 与FCKeditor 比较FCKeditor的功能很多,只是...載入時比較慢,有時候要reload才會出現,htmlArea的功能比較精簡,所以載入上比FCKeditor快多了,不過FCKeditor有清除word標籤的功能⑤CuteEditor -- 博客园用的就是这个URL:[破解版：/minsky/CuteEditor_for_NET4.5_Crack%20by%20Minsky.part1.rar] [URL/minsky/CuteEditor_for_NET4.5_Crack%20by%20Minsky.part2.rar] [企业许可证：/Files/doublew/cel.zip]⑥FreeTextBoxURL: [ /w/ftb/down/FTB_1.6.3_zh.zip][源码：/w/ftb/down/FTB_1.6.3_zh_Source.zip]⑦eWebEditor --完全开放源代码的，允许无商业目的个人用户免费使用====================================================================== =======1.FCKeditor 编辑器FCKeditor is compatible with most internet browsers which include: IE 5.5+ (Windows), Firefox 1.0+, Mozilla 1.3+ and Netscape 7+.最新版本:FCKeditor 2.0语言环境:多国语言特性功能:所见所得,支持平台众多,支持XHTML 1.0,文本格式设置,常见的编辑,复制,粘贴,撤销,文件上传等功能授权方式:Open Source & Free官方地址:/下载地址:/download/default.html演示:/demo/default.html小节:FCKeditor的2.0版比1.6版有了许多的改进。
一、使用方法：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,DAA52 0,006400,40E0D0,0000CD,800080,808080,F00,FF8C00,FFD700,008000,0FF,00F,EE82E E,A9A9A9,FFA07A,FFA500,FFFF00,00FF00,AFEEEE,ADD8E6,DDA0DD,D3D3D3,FFF0F5, FAEBD7,FFFFE0,F0FFF0,F0FFFF,F0F8FF,E6E6FA,FFF’//是否在选择颜色时显示“其它颜色”选项 plugins/colorbutton/plugin.js config.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 = 'rgb(255, 254, 253)'; //可设置参考config.dialog_backgroundCoverColor = 'white' //默认//背景的不透明度数值应该在：0.0～1.0 之间 plugins/dialog/plugin.jsconfig.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.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.js config.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/22p x;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 //不去除//是否强制用“&”来代替“&”plugins/htmldataprocessor/plugin.js config.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,i mage,flash,checkbox,radio,textfield,hiddenfield,imagebutton,button,select,textarea';//显示子菜单时的延迟，单位：ms plugins/menu/plugin.jsconfig.menu_subMenuDelay = 400;//当执行“新建”命令时，编辑器中的内容 plugins/newpage/plugin.js config.newpage_html = '';//当从word里复制文字进来时，是否进行文字的格式化去除plugins/pastefromword/plugin.jsconfig.pasteFromWordIgnoreFontFace = true; //默认为忽略格式//是否使用<h1><h2>等标签修饰或者代替从word文档中粘贴过来的内容plugins/pastefromword/plugin.jsconfig.pasteFromWordKeepsStructure = false;//从word中粘贴内容时是否移除格式 plugins/pastefromword/plugin.js config.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.g if','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.jsplugins/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时，编辑器走过的空格数，( ) 当值为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.js config.templates_replaceContent = true;//主题config.theme = 'default';//撤销的记录步数 plugins/undo/plugin.jsconfig.undoStackSize =20;// 在 CKEditor 中集成 CKFinder，注意 ckfinder 的路径选择要正确。
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的值。
基于Java Web的HTML在线文本编辑器解决方案摘要：FckEditor作为众多优秀HTML在线文本编辑器之一，以其支持多语言的优势而受到众多国内外开发者的亲睐。
在Java Web开发中使用FCKeditor可以实现类似微软Word桌面文本编辑器的许多强大功能，因此掌握FckEditor在Java Web开发环境下的配置过程也是开发者必备的技能之一。
关键词：Jsp；FckEditor；HTML；在线文本编辑器2基于Java Web 的HTML在线编辑器解决方案著名的开源网页编辑软件FCKEditor在09年发布至现在已经更新到3.0版本，FckEditor由于其资源轻量化、配置简单、免费开源、文本编辑功能齐全、支持多浏览器、支持PHP、JavaScript、ASP、、ColdFusion、Java、以及ABAP等不同的编程语言的强大优势，受到众多开发者亲睐。
目前，众多的Java Web 项目中FckEditor成为开发者对在线编辑器的首选，为网络文本交互提供文本样式编辑、图片上传下载和附件上传下载的功能。
3FckEditor编辑器在Java Web开发中的配置3.1开发环境和FckEditor配置文件(1)开发环境：MyEclipse7.5 ，JDK1.6 ，tomcat6.0；(2)FckEditor配置文件：FckEditor2.6.6，FckEditor java demo 2.6；3.2FckEditor在Java Web中的基本配置(1)在MyExclipse文件下建设Java Web项目FckEditor。
(2)解压FckEditor_2.6.6.zip文件，将解压后的根目录下的FckEditor文件夹拷贝到SSH框架项目下的WebRoot目录里;(3)将下载FckEditor java demo 2.6文件解压后，把根目录下Web INF中的lib里5个.jar文件：commons fileupload 1.2.1.jar、commons io 1.3.2.jar、FckEditor java core 2.4.jar、slf4j api 1.5.2.jar及slf4j simple 1.5.2.jar 拷贝到SSH框架项目下的Web INF目录中的lib目录里。
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应用中。
ckeditor5的配置以及使⽤⽅法⼀．⾃定义并构建CKEditor 5⼆．CKEditor 5⽂件详解1. translations：打包后的语⾔包2. ckeditor.js、ckeditor.js.map：js配置，⾥⾯包含css样式，⽆论是编辑器页⾯还是显⽰内容页⾯都需要引⼊（之前显⽰内容时图⽚不⾃适应就是没有引⼊该⽂件）3. editor.js：进⾏功能配置的js⽂件，在编辑器页⾯引⼊4. index.html：富⽂本编辑器测试页⾯最外⾯div必须加上id名（可⾃定义）5. ceshi.html：显⽰内容页⾯最外⾯的div样式名必须为ck-content三．editor.js配置说明1. 调⽤⽅法toolbar:配置在导航栏显⽰的功能按钮以及位置2.图⽚上传3.⾃定义providers,给上传的视频链接设置相应的html，让其可以正常在富⽂本编辑器中显⽰4.⾃定义字体，字体中⽂名在前，英⽂编码在后，⽤逗号隔开5.将编辑器输出给到全局变量6.获取内容数据以及将html转换为编辑器内容的API，⽆论是获取编辑器内容还是将html⽚段插⼊到编辑器中都需要对某些字段进⾏转换（获取编辑器内容后将oembed标签转换为video标签；给编辑器插⼊内容之前将video标签转换为oembed标签，同时还要清理上次插⼊的数据）7.获取的内容数据中视频由浏览器⽆法识别的标签包裹，所以需要对其进⾏替换，使其在⽹页中正常显⽰。
8.初始化编辑器实例必须通过id获取标签，但是可以单独将配置对象赋值给config变量,初始化多个编辑器时将config传进去就可以实现修改⼀个配置影响多个编辑器实例。
9.字号⽀持数字⼤⼩10.设置编辑器的宽和最⼩⾼度、最⼤⾼度、固定⾼度11.配置字体颜⾊和字体背景颜⾊12.设置图⽚放置的位置以及百分⽐配置代码//配置选项const config = {//功能模块toolbar: {items: ['heading','|','bold','italic','underline','fontColor','fontBackgroundColor','fontSize','fontFamily','highlight','bulletedList','numberedList','|','indent','outdent','|','link','imageUpload','imageInsert','mediaEmbed','|','blockQuote','strikethrough','specialCharacters','superscript','subscript','insertTable','undo','redo','alignment'],shouldNotGroupWhenFull:true},//设置字体⼤⼩fontSize: {options: [12,14,16,18,20,22,24,36]},//设置字体颜⾊fontColor: {colors: [{color: 'hsl(0, 0%, 0%)',label: 'hsl(0, 0%, 0%)'},{color: 'hsl(0, 0%, 12.5%)', label: 'hsl(0, 0%, 12.5%)' },{color: 'hsl(0, 0%, 25%)', label: 'hsl(0, 0%, 25%)'},{color: 'hsl(0, 0%, 37.5%)', label: 'hsl(0, 0%, 37.5%)' },{color: 'hsl(0, 0%, 50%)', label: 'hsl(0, 0%, 50%)'},{color: 'hsl(0, 0%, 62.5%)', label: 'hsl(0, 0%, 62.5%)' },{color: 'hsl(0, 0%, 75%)', label: 'hsl(0, 0%, 75%)'},{color: 'hsl(0, 0%, 87.5%)', label: 'hsl(0, 0%, 87.5%)' },{color: 'hsl(0, 0%, 100%)', label: 'hsl(0, 0%, 100%)' },{color: 'hsl(0, 100%, 10%)', label: 'hsl(0, 100%, 10%)' },{color: 'hsl(0, 100%, 20%)', label: 'hsl(0, 100%, 20%)' },{color: 'hsl(0, 100%, 30%)', label: 'hsl(0, 100%, 30%)' },{color: 'hsl(0, 100%, 40%)', label: 'hsl(0, 100%, 40%)' },{color: 'hsl(0, 100%, 50%)', label: 'hsl(0, 100%, 50%)' },{color: 'hsl(0, 100%, 60%)', label: 'hsl(0, 100%, 60%)' },{color: 'hsl(0, 100%, 70%)', label: 'hsl(0, 100%, 70%)' },{color: 'hsl(0, 100%, 80%)', label: 'hsl(0, 100%, 80%)' },{color: 'hsl(0, 100%, 90%)', label: 'hsl(0, 100%, 90%)' },{color: 'hsl(30, 100%, 30%)', label: 'hsl(30, 100%, 30%)' },{color: 'hsl(30, 100%, 40%)', label: 'hsl(30, 100%, 40%)' },{color: 'hsl(30, 100%, 50%)', label: 'hsl(30, 100%, 50%)' },{color: 'hsl(30, 100%, 60%)', label: 'hsl(30, 100%, 60%)' },{color: 'hsl(30, 100%, 70%)', label: 'hsl(30, 100%, 70%)' },{color: 'hsl(30, 100%, 80%)', label: 'hsl(30, 100%, 80%)' },{color: 'hsl(30, 100%, 90%)', label: 'hsl(30, 100%, 90%)' },{color: 'hsl(60, 100%, 10%)', label: 'hsl(60, 100%, 10%)' },{color: 'hsl(60, 100%, 20%)', label: 'hsl(60, 100%, 20%)' },{color: 'hsl(60, 100%, 30%)', label: 'hsl(60, 100%, 30%)' },{color: 'hsl(60, 100%, 40%)', label: 'hsl(60, 100%, 40%)' },{color: 'hsl(60, 100%, 50%)', label: 'hsl(60, 100%, 50%)' },{color: 'hsl(60, 100%, 60%)', label: 'hsl(60, 100%, 60%)' },{color: 'hsl(60, 100%, 70%)', label: 'hsl(60, 100%, 70%)' },{color: 'hsl(60, 100%, 80%)', label: 'hsl(60, 100%, 80%)' },{color: 'hsl(60, 100%, 90%)', label: 'hsl(60, 100%, 90%)' },{color: 'hsl(90, 100%, 10%)', label: 'hsl(90, 100%, 10%)' },{color: 'hsl(90, 100%, 20%)', label: 'hsl(90, 100%, 20%)' },{color: 'hsl(90, 100%, 30%)', label: 'hsl(90, 100%, 30%)' },{color: 'hsl(90, 100%, 60%)', label: 'hsl(90, 100%, 60%)' },{color: 'hsl(90, 100%, 70%)', label: 'hsl(90, 100%, 70%)' },{color: 'hsl(90, 100%, 80%)', label: 'hsl(90, 100%, 80%)' },{color: 'hsl(90, 100%, 90%)', label: 'hsl(90, 100%, 90%)' },{color: 'hsl(120, 100%, 10%)', label: 'hsl(120, 100%, 10%)' },{color: 'hsl(120, 100%, 20%)', label: 'hsl(120, 100%, 20%)' },{color: 'hsl(120, 100%, 30%)', label: 'hsl(120, 100%, 30%)' },{color: 'hsl(120, 100%, 40%)', label: 'hsl(120, 100%, 40%)' },{color: 'hsl(120, 100%, 50%)', label: 'hsl(120, 100%, 50%)' },{color: 'hsl(120, 100%, 60%)', label: 'hsl(120, 100%, 60%)' },{color: 'hsl(120, 100%, 70%)', label: 'hsl(120, 100%, 70%)' },{color: 'hsl(120, 100%, 80%)', label: 'hsl(120, 100%, 80%)' },{color: 'hsl(120, 100%, 90%)', label: 'hsl(120, 100%, 90%)' },{color: 'hsl(150, 100%, 10%)', label: 'hsl(150, 100%, 10%)' },{color: 'hsl(150, 100%, 20%)', label: 'hsl(150, 100%, 20%)' },{color: 'hsl(150, 100%, 30%)', label: 'hsl(150, 100%, 30%)' },{color: 'hsl(150, 100%, 40%)', label: 'hsl(150, 100%, 40%)' },{color: 'hsl(150, 100%, 50%)', label: 'hsl(150, 100%, 50%)' },{color: 'hsl(150, 100%, 60%)', label: 'hsl(150, 100%, 60%)' },{color: 'hsl(150, 100%, 90%)', label: 'hsl(150, 100%, 90%)' },{color: 'hsl(180, 100%, 10%)', label: 'hsl(180, 100%, 10%)' },{color: 'hsl(180, 100%, 20%)', label: 'hsl(180, 100%, 20%)' },{color: 'hsl(180, 100%, 30%)', label: 'hsl(180, 100%, 30%)' },{color: 'hsl(180, 100%, 40%)', label: 'hsl(180, 100%, 40%)' },{color: 'hsl(180, 100%, 50%)', label: 'hsl(180, 100%, 50%)' },{color: 'hsl(180, 100%, 60%)', label: 'hsl(180, 100%, 60%)' },{color: 'hsl(180, 100%, 70%)', label: 'hsl(180, 100%, 70%)' },{color: 'hsl(180, 100%, 80%)', label: 'hsl(180, 100%, 80%)' },{color: 'hsl(180, 100%, 90%)', label: 'hsl(180, 100%, 90%)' },{color: 'hsl(210, 100%, 10%)', label: 'hsl(210, 100%, 10%)' },{color: 'hsl(210, 100%, 20%)', label: 'hsl(210, 100%, 20%)' },{color: 'hsl(210, 100%, 30%)', label: 'hsl(210, 100%, 30%)' },{color: 'hsl(210, 100%, 40%)', label: 'hsl(210, 100%, 40%)' },{color: 'hsl(210, 100%, 50%)', label: 'hsl(210, 100%, 50%)' },{color: 'hsl(210, 100%, 60%)', label: 'hsl(210, 100%, 60%)' },{color: 'hsl(210, 100%, 70%)', label: 'hsl(210, 100%, 70%)' },{color: 'hsl(210, 100%, 80%)', label: 'hsl(210, 100%, 80%)' },{color: 'hsl(210, 100%, 90%)', label: 'hsl(210, 100%, 90%)' },{color: 'hsl(240, 100%, 30%)', label: 'hsl(240, 100%, 30%)' },{color: 'hsl(240, 100%, 40%)', label: 'hsl(240, 100%, 40%)' },{color: 'hsl(240, 100%, 50%)', label: 'hsl(240, 100%, 50%)' },{color: 'hsl(240, 100%, 60%)', label: 'hsl(240, 100%, 60%)' },{color: 'hsl(240, 100%, 70%)', label: 'hsl(240, 100%, 70%)' },{color: 'hsl(240, 100%, 80%)', label: 'hsl(240, 100%, 80%)' },{color: 'hsl(240, 100%, 90%)', label: 'hsl(240, 100%, 90%)' },{color: 'hsl(270, 100%, 10%)', label: 'hsl(270, 100%, 10%)' },{color: 'hsl(270, 100%, 20%)', label: 'hsl(270, 100%, 20%)' },{color: 'hsl(270, 100%, 30%)', label: 'hsl(270, 100%, 30%)' },{color: 'hsl(270, 100%, 40%)', label: 'hsl(270, 100%, 40%)' },{color: 'hsl(270, 100%, 50%)', label: 'hsl(270, 100%, 50%)' },{color: 'hsl(270, 100%, 60%)', label: 'hsl(270, 100%, 60%)' },{color: 'hsl(270, 100%, 70%)', label: 'hsl(270, 100%, 70%)' },{color: 'hsl(270, 100%, 80%)', label: 'hsl(270, 100%, 80%)' },{color: 'hsl(270, 100%, 90%)', label: 'hsl(270, 100%, 90%)' },{color: 'hsl(300, 100%, 10%)', label: 'hsl(300, 100%, 10%)' },{color: 'hsl(300, 100%, 20%)', label: 'hsl(300, 100%, 20%)' },{color: 'hsl(300, 100%, 30%)', label: 'hsl(300, 100%, 30%)' },{color: 'hsl(300, 100%, 60%)', label: 'hsl(300, 100%, 60%)' },{color: 'hsl(300, 100%, 70%)', label: 'hsl(300, 100%, 70%)' },{color: 'hsl(300, 100%, 80%)', label: 'hsl(300, 100%, 80%)' },{color: 'hsl(300, 100%, 90%)', label: 'hsl(300, 100%, 90%)' },{color: 'hsl(330, 100%, 10%)', label: 'hsl(330, 100%, 10%)' },{color: 'hsl(330, 100%, 20%)', label: 'hsl(330, 100%, 20%)' },{color: 'hsl(330, 100%, 30%)', label: 'hsl(330, 100%, 30%)' },{color: 'hsl(330, 100%, 40%)', label: 'hsl(330, 100%, 40%)' },{color: 'hsl(330, 100%, 50%)', label: 'hsl(330, 100%, 50%)' },{color: 'hsl(330, 100%, 60%)', label: 'hsl(330, 100%, 60%)' },{color: 'hsl(330, 100%, 70%)', label: 'hsl(330, 100%, 70%)' },{color: 'hsl(330, 100%, 80%)', label: 'hsl(330, 100%, 80%)' },{color: 'hsl(330, 100%, 90%)', label: 'hsl(330, 100%, 90%)' },],//列columns: 9,},//设置字体背景颜⾊fontBackgroundColor: {colors: [{color: 'hsl(0, 0%, 0%)',label: 'hsl(0, 0%, 0%)'},{color: 'hsl(0, 0%, 12.5%)', label: 'hsl(0, 0%, 12.5%)'},{color: 'hsl(0, 0%, 25%)',label: 'hsl(0, 0%, 25%)'},{color: 'hsl(0, 0%, 37.5%)', label: 'hsl(0, 0%, 37.5%)'},{color: 'hsl(0, 0%, 75%)',label: 'hsl(0, 0%, 75%)'},{color: 'hsl(0, 0%, 87.5%)', label: 'hsl(0, 0%, 87.5%)' },{color: 'hsl(0, 0%, 100%)', label: 'hsl(0, 0%, 100%)'},{color: 'hsl(0, 100%, 10%)', label: 'hsl(0, 100%, 10%)' },{color: 'hsl(0, 100%, 20%)', label: 'hsl(0, 100%, 20%)' },{color: 'hsl(0, 100%, 30%)', label: 'hsl(0, 100%, 30%)' },{color: 'hsl(0, 100%, 40%)', label: 'hsl(0, 100%, 40%)' },{color: 'hsl(0, 100%, 50%)', label: 'hsl(0, 100%, 50%)' },{color: 'hsl(0, 100%, 60%)', label: 'hsl(0, 100%, 60%)' },{color: 'hsl(0, 100%, 70%)', label: 'hsl(0, 100%, 70%)' },{color: 'hsl(0, 100%, 80%)', label: 'hsl(0, 100%, 80%)' },{color: 'hsl(0, 100%, 90%)', label: 'hsl(0, 100%, 90%)' },{color: 'hsl(30, 100%, 10%)', label: 'hsl(30, 100%, 10%)' },{color: 'hsl(30, 100%, 20%)', label: 'hsl(30, 100%, 20%)' },{color: 'hsl(30, 100%, 30%)', label: 'hsl(30, 100%, 30%)' },{color: 'hsl(30, 100%, 40%)', label: 'hsl(30, 100%, 40%)' },{color: 'hsl(30, 100%, 50%)', label: 'hsl(30, 100%, 50%)' },{color: 'hsl(30, 100%, 60%)', label: 'hsl(30, 100%, 60%)' },{color: 'hsl(30, 100%, 70%)', label: 'hsl(30, 100%, 70%)' },{color: 'hsl(60, 100%, 10%)', label: 'hsl(60, 100%, 10%)' },{color: 'hsl(60, 100%, 20%)', label: 'hsl(60, 100%, 20%)' },{color: 'hsl(60, 100%, 30%)', label: 'hsl(60, 100%, 30%)' },{color: 'hsl(60, 100%, 40%)', label: 'hsl(60, 100%, 40%)' },{color: 'hsl(60, 100%, 50%)', label: 'hsl(60, 100%, 50%)' },{color: 'hsl(60, 100%, 60%)', label: 'hsl(60, 100%, 60%)' },{color: 'hsl(60, 100%, 70%)', label: 'hsl(60, 100%, 70%)' },{color: 'hsl(60, 100%, 80%)', label: 'hsl(60, 100%, 80%)' },{color: 'hsl(60, 100%, 90%)', label: 'hsl(60, 100%, 90%)' },{color: 'hsl(90, 100%, 10%)', label: 'hsl(90, 100%, 10%)' },{color: 'hsl(90, 100%, 20%)', label: 'hsl(90, 100%, 20%)' },{color: 'hsl(90, 100%, 30%)', label: 'hsl(90, 100%, 30%)' },{color: 'hsl(90, 100%, 40%)', label: 'hsl(90, 100%, 40%)' },{color: 'hsl(90, 100%, 50%)', label: 'hsl(90, 100%, 50%)' },{color: 'hsl(90, 100%, 60%)', label: 'hsl(90, 100%, 60%)' },{color: 'hsl(90, 100%, 70%)', label: 'hsl(90, 100%, 70%)' },{color: 'hsl(90, 100%, 80%)', label: 'hsl(90, 100%, 80%)' },{color: 'hsl(90, 100%, 90%)', label: 'hsl(90, 100%, 90%)' },{color: 'hsl(120, 100%, 10%)', label: 'hsl(120, 100%, 10%)' },{color: 'hsl(120, 100%, 40%)', label: 'hsl(120, 100%, 40%)' },{color: 'hsl(120, 100%, 50%)', label: 'hsl(120, 100%, 50%)' },{color: 'hsl(120, 100%, 60%)', label: 'hsl(120, 100%, 60%)' },{color: 'hsl(120, 100%, 70%)', label: 'hsl(120, 100%, 70%)' },{color: 'hsl(120, 100%, 80%)', label: 'hsl(120, 100%, 80%)' },{color: 'hsl(120, 100%, 90%)', label: 'hsl(120, 100%, 90%)' },{color: 'hsl(150, 100%, 10%)', label: 'hsl(150, 100%, 10%)' },{color: 'hsl(150, 100%, 20%)', label: 'hsl(150, 100%, 20%)' },{color: 'hsl(150, 100%, 30%)', label: 'hsl(150, 100%, 30%)' },{color: 'hsl(150, 100%, 40%)', label: 'hsl(150, 100%, 40%)' },{color: 'hsl(150, 100%, 50%)', label: 'hsl(150, 100%, 50%)' },{color: 'hsl(150, 100%, 60%)', label: 'hsl(150, 100%, 60%)' },{color: 'hsl(150, 100%, 70%)', label: 'hsl(150, 100%, 70%)' },{color: 'hsl(150, 100%, 80%)', label: 'hsl(150, 100%, 80%)' },{color: 'hsl(150, 100%, 90%)', label: 'hsl(150, 100%, 90%)' },{color: 'hsl(180, 100%, 10%)', label: 'hsl(180, 100%, 10%)' },{color: 'hsl(180, 100%, 20%)', label: 'hsl(180, 100%, 20%)' },{color: 'hsl(180, 100%, 30%)', label: 'hsl(180, 100%, 30%)' },{color: 'hsl(180, 100%, 40%)', label: 'hsl(180, 100%, 40%)' },{color: 'hsl(180, 100%, 70%)', label: 'hsl(180, 100%, 70%)' },{color: 'hsl(180, 100%, 80%)', label: 'hsl(180, 100%, 80%)' },{color: 'hsl(180, 100%, 90%)', label: 'hsl(180, 100%, 90%)' },{color: 'hsl(210, 100%, 10%)', label: 'hsl(210, 100%, 10%)' },{color: 'hsl(210, 100%, 20%)', label: 'hsl(210, 100%, 20%)' },{color: 'hsl(210, 100%, 30%)', label: 'hsl(210, 100%, 30%)' },{color: 'hsl(210, 100%, 40%)', label: 'hsl(210, 100%, 40%)' },{color: 'hsl(210, 100%, 50%)', label: 'hsl(210, 100%, 50%)' },{color: 'hsl(210, 100%, 60%)', label: 'hsl(210, 100%, 60%)' },{color: 'hsl(210, 100%, 70%)', label: 'hsl(210, 100%, 70%)' },{color: 'hsl(210, 100%, 80%)', label: 'hsl(210, 100%, 80%)' },{color: 'hsl(210, 100%, 90%)', label: 'hsl(210, 100%, 90%)' },{color: 'hsl(240, 100%, 10%)', label: 'hsl(240, 100%, 10%)' },{color: 'hsl(240, 100%, 20%)', label: 'hsl(240, 100%, 20%)' },{color: 'hsl(240, 100%, 30%)', label: 'hsl(240, 100%, 30%)' },{color: 'hsl(240, 100%, 40%)', label: 'hsl(240, 100%, 40%)' },{color: 'hsl(240, 100%, 50%)', label: 'hsl(240, 100%, 50%)' },{color: 'hsl(240, 100%, 60%)', label: 'hsl(240, 100%, 60%)' },{color: 'hsl(240, 100%, 70%)', label: 'hsl(240, 100%, 70%)' },{color: 'hsl(270, 100%, 10%)', label: 'hsl(270, 100%, 10%)' },{color: 'hsl(270, 100%, 20%)', label: 'hsl(270, 100%, 20%)' },{color: 'hsl(270, 100%, 30%)', label: 'hsl(270, 100%, 30%)' },{color: 'hsl(270, 100%, 40%)', label: 'hsl(270, 100%, 40%)' },{color: 'hsl(270, 100%, 50%)', label: 'hsl(270, 100%, 50%)' },{color: 'hsl(270, 100%, 60%)', label: 'hsl(270, 100%, 60%)' },{color: 'hsl(270, 100%, 70%)', label: 'hsl(270, 100%, 70%)' },{color: 'hsl(270, 100%, 80%)', label: 'hsl(270, 100%, 80%)' },{color: 'hsl(270, 100%, 90%)', label: 'hsl(270, 100%, 90%)' },{color: 'hsl(300, 100%, 10%)', label: 'hsl(300, 100%, 10%)' },{color: 'hsl(300, 100%, 20%)', label: 'hsl(300, 100%, 20%)' },{color: 'hsl(300, 100%, 30%)', label: 'hsl(300, 100%, 30%)' },{color: 'hsl(300, 100%, 40%)', label: 'hsl(300, 100%, 40%)' },{color: 'hsl(300, 100%, 50%)', label: 'hsl(300, 100%, 50%)' },{color: 'hsl(300, 100%, 60%)', label: 'hsl(300, 100%, 60%)' },{color: 'hsl(300, 100%, 70%)', label: 'hsl(300, 100%, 70%)' },{color: 'hsl(300, 100%, 80%)', label: 'hsl(300, 100%, 80%)' },{color: 'hsl(300, 100%, 90%)', label: 'hsl(300, 100%, 90%)' },{color: 'hsl(330, 100%, 10%)', label: 'hsl(330, 100%, 10%)' },{color: 'hsl(330, 100%, 40%)',label: 'hsl(330, 100%, 40%)'},{color: 'hsl(330, 100%, 50%)',label: 'hsl(330, 100%, 50%)'},{color: 'hsl(330, 100%, 60%)',label: 'hsl(330, 100%, 60%)'},{color: 'hsl(330, 100%, 70%)',label: 'hsl(330, 100%, 70%)'},{color: 'hsl(330, 100%, 80%)',label: 'hsl(330, 100%, 80%)'},{color: 'hsl(330, 100%, 90%)',label: 'hsl(330, 100%, 90%)'},],columns: 9,},language: 'zh-cn',//设置图⽚位置以及⼤⼩image: {styles: ['alignLeft', 'alignCenter', 'alignRight'],resizeOptions: [{name: 'imageResize:original',label: '原版',value: null},{name: 'imageResize:50',label: '50%',value: '50'},{name: 'imageResize:75',label: '75%',value: '75'}],toolbar: ['imageStyle:alignLeft', 'imageStyle:alignCenter', 'imageStyle:alignRight','|','imageResize','|','imageTextAlternative']},//表格配置table: {contentToolbar: ['tableColumn','tableRow','mergeTableCells']},//访问许可证密钥licenseKey: '',//图⽚上传ckfinder: {uploadUrl: 'http://192.168.31.123:2000/api/Home/UploadImg'},//⾃定义providers,给上传的视频链接设置相应的html，让其可以正常在富⽂本编辑器中显⽰ mediaEmbed: {providers: [{name: 'myprovider',],html: match => {//获取媒体urlconst input = match['input'];return ('<div style="position: relative; padding-bottom: 100%; height: 0; padding-bottom: 70%;">' +'<video controls="controls" autoplay name="media" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;">'+ `<source src="${input}" type="video/mp4">`+'</video>'+'</div>');}}]},//⾃定义字体fontFamily: {options: ['default','Blackoak Std','宋体,SimSun','新宋体,NSimSun','⿊体,SimHei','微软雅⿊,Microsoft YaHei','楷体_GB2312,KaiTi_GB2312','⾪书,LiSu','幼园,YouYuan','华⽂细⿊,STXihei','细明体,MingLiU','新细明体,PMingLiU']},}//初始化编辑器实例1ClassicEditor.create( document.querySelector( '#editor' ), config).then( editor => {window.editor = editor;} ).catch( error => {} );//初始化编辑器实例2ClassicEditor.create( document.querySelector( '#editor2' ), config).then( editor => {window.editor2 = editor;} ).catch( error => {} );window.onload = function(){document.getElementById("btn").onclick = function(){//获取内容数据，以及给获取的内容数据中的oembed替换成videowindow.str = window.editor.getData().replace(/oembed url/g,'video controls src').replace(/oembed/g,'video')console.log(window.str);}//给编辑器插⼊内容document.getElementById("btn2").onclick = function(){// //初始化编辑器中的数据;window.editor.setData('')//对插⼊的内容进⾏转换,将video标签转换为oembed标签var newContent = window.str.replace(/<video controls src=/g,'<oembed url=').replace(/<\/\video>/g,'<\/\oembed>')//将数据转换为⽂档⽚段var viewFragment = window.editor.data.processor.toView( newContent );//对转换的数据进⾏包裹var modelFragment = window.editor.data.toModel( viewFragment );//插⼊到编辑器中window.editor.model.insertContent( modelFragment );}document.getElementById("btn3").onclick = function(){}}。
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使用方法技术详解作者：深蓝色QQ：76863715本文PHPChina论坛首发本文特为《PHP5和MySQL5 Web开发技术详解》一书编写1、概述FCKeditor是目前最优秀的可见即可得网页编辑器之一，它采用JavaScript编写。
具备功能强大、配置容易、跨浏览器、支持多种编程语言、开源等特点。
它非常流行，互联网上很容易找到相关技术文档，国内许多WEB项目和大型网站均采用了FCKeditor（如百度，阿里巴巴）。
本文将通过与PHP相结合，从基本安装到高级的配置循序渐进介绍给广大PHPer。
FCKeditor官方网站：/FCKeditor Wiki：/2、下载FCKeditor登录FCKeditor官方站（），点击网站右上角“Download”链接。
笔者编写本文时，FCKeditor当前最新的稳定版本是2.4.3，因此我们下载此版本的zip压缩格式文档。
如图1所示：图1：下载FCKeditor 2.4.3（最新稳定版）注意：当点击“FCKeditor_2.4.3.zip”链接后，将跳转到网站上自动下载。
如果您当前使用Linux或Unix系统，可以点击“FCKeditor_2.4.3.tar.gz”链接下载.tar.gz格式的压缩包。
3、安装FCKeditor解压“FCKeditor_2.4.3.zip”文档到您的网站目录下，我们先假定您存放FCKeditor和调用脚本存于同一个目录下。
目录结构如下图所示：图2：网站目录结构图fckeditor目录包含FCKeditor2.4.3程序文件。
check.php用于处理表单数据。
add_article.php 和add_article_js.html分别是PHP调用FCKeditor和JavaScript调用FCKeditor实例脚本文件。
3.1、用PHP调用FCKeditor调用FCKeditor必须先载入FCKeditor类文件。
1.FCKeditor2.4集成在SSH框架中，在web.xml中要加入以下配置<servlet><servlet-name>Connector</servlet-name><servlet-class>/*根据自己的项目路径导入ConnectorServlet.class*/com.qian.menu.article.action.ConnectorServlet</servlet-class><init-param><param-name>baseDir</param-name><param-value>/UserFiles/</param-value></init-param><load-on-startup>1</load-on-startup></servlet><servlet-mapping><servlet-name>Connector</servlet-name><url-pattern>/js/fckeditor/editor/filemanager/connectors/*</url-pattern></servlet-mapping>2．如果使用的struts2进行项目开发的话，你会发现当上传文件时会出现“Error on file upload. Error number:203”的错误提示。
这是因为fck与struts2框架不兼容，struts2转发了fck的servlet。
解决办法：在web.xml中修改struts2的filter-mappingJava代码<filter-mapping><filter-name>struts2</filter-name><url-pattern>/*</url-pattern></filter-mapping>修改成<filter-mapping><filter-name>struts2</filter-name><url-pattern>*.action</url-pattern><url-pattern>*.jsp</url-pattern></filter-mapping>如果还有其他url映射也可以添加到filter-mapping中去。
3.使用fck创建中文文件夹出现乱码问题找到ConnectorServlet.class文件在用一个fck的源文件版本要与框架中的版本一致然后打开复制出ConnectorServlet.java中的全部代码，自己在新建一个与 ConnectorServlet同名的类，在doGet方法中找String newFolderStr=utilesFile.sanitizeFolderName(request.getParameter(“NewF olderName”));把request.getParameter(“NewFolderName”)剪切出来，自定义一个String 型的 tempString Temp = request.getParameter(“NewFolderName”); Temp = new String(Temp.getBytes(“iso8859-1”),”UTF-8”);在将Temp放入sanitizeFolderName（）中即可，一般情况下在ConnectorServlet.java中已经写好了。
3．导入配置文件用来存放图片4.导入4个jar包5.在struts.xml文件中加入interceptor-ref name="defaultStack"><!-- 配置允许上传的文件类型，多个用","分隔 --><param name="fileUpload.allowedTypes">image/bmp,image/png,image/gif,image/jpeg,image/jpg ,image/x-png, image/pjpeg</param><!-- 配置允许上传的文件大小，单位字节,本例为：1MB --><param name="fileUpload.maximumSize">1048576</param>/*** 类名称 ConnectorServlet.java* Description: 填写文件作用简要说明* Version : 1.0* @作者: 王兆来* @创建日期: 2010-10-29* Copyright: 奇安科技发展有限公司版权所有*/import javax.servlet.http.HttpServlet;import java.io.File;import java.io.IOException;import java.io.PrintWriter;import java.util.List;import java.util.UUID;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse;import net.fckeditor.connector.Messages;import mandHandler; import net.fckeditor.handlers.ConnectorHandler; import net.fckeditor.handlers.ExtensionsHandler; import net.fckeditor.handlers.RequestCycleHandler;import net.fckeditor.handlers.ResourceTypeHandler; import net.fckeditor.response.UploadResponse;import net.fckeditor.response.XmlResponse;import net.fckeditor.tool.Utils;import net.fckeditor.tool.UtilsFile;import net.fckeditor.tool.UtilsResponse;import mons.fileupload.FileItem;import mons.fileupload.FileItemFactory; importmons.fileupload.disk.DiskFileItemFactory; importmons.fileupload.servlet.ServletFileUpload; import mons.io.FilenameUtils;import org.slf4j.Logger;import org.slf4j.LoggerFactory;public class ConnectorServlet extends HttpServlet {private static final long serialVersionUID =-5742008970929377161L;private static final Logger logger = LoggerFactory .getLogger(ConnectorServlet.class);/*** Initialize the servlet: <code>mkdir</code><DefaultUserFilesPath>*/public void init() throws ServletException, IllegalArgumentException {String realDefaultUserFilesPath = getServletContext().getRealPath(ConnectorHandler.getDefaultUserFilesPath());File defaultUserFilesDir = newFile(realDefaultUserFilesPath);UtilsFile.checkDirAndCreate(defaultUserFilesDir);("ConnectorServlet successfully initialized!");}/*** Manage the <code>GET</code> requests(<code>GetFolders</code>,* <code>GetFoldersAndFiles</code>,<code>CreateFolder</code>).<br/>** The servlet accepts commands sent in the following format:<br/>*<code>connector?Command=<CommandName>&Type=<Reso urceType>&CurrentFolder=<FolderPath></code> * <p>* It executes the commands and then returns the result to the client in XML* format.* </p>*/public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {logger.debug("EnteringConnectorServlet#doGet");response.setCharacterEncoding("UTF-8");response.setContentType("application/xml; charset=UTF-8");response.setHeader("Cache-Control","no-cache");PrintWriter out = response.getWriter();String commandStr =request.getParameter("Command");String typeStr = request.getParameter("Type");String currentFolderStr =request.getParameter("CurrentFolder");logger.debug("Parameter Command: {}", commandStr);logger.debug("Parameter Type: {}", typeStr);logger.debug("Parameter CurrentFolder: {}", currentFolderStr);XmlResponse xr;if(!RequestCycleHandler.isEnabledForFileBrowsing(request)) xr = new XmlResponse(XmlResponse.EN_ERROR,Messages.NOT_AUTHORIZED_FOR_BROWSING);else if(!CommandHandler.isValidForGet(commandStr))xr = new XmlResponse(XmlResponse.EN_ERROR, Messages.INVALID_COMMAND);else if (typeStr != null&& !ResourceTypeHandler.isValid(typeStr))xr = new XmlResponse(XmlResponse.EN_ERROR, Messages.INVALID_TYPE);else if(!UtilsFile.isValidPath(currentFolderStr))xr = new XmlResponse(XmlResponse.EN_ERROR, Messages.INVALID_CURRENT_FOLDER);else {CommandHandler command = CommandHandler.getCommand(commandStr);ResourceTypeHandler resourceType = ResourceTypeHandler.getDefaultResourceType(typeStr);String typePath =UtilsFile.constructServerSidePath(request,resourceType);String typeDirPath =getServletContext().getRealPath(typePath);File typeDir = new File(typeDirPath);UtilsFile.checkDirAndCreate(typeDir);File currentDir = new File(typeDir, currentFolderStr);if (!currentDir.exists())xr = newXmlResponse(XmlResponse.EN_INVALID_FOLDER_NAME);else {xr = new XmlResponse(command,resourceType, currentFolderStr,UtilsResponse.constructResponseUrl(request,resourceType, currentFolderStr, true,ConnectorHandler.isFullUrl()));if(command.equals(CommandHandler.GET_FOLDERS)) xr.setFolders(currentDir);else if(command.equals(CommandHandler.GET_FOLDERS_AND_FILES))xr.setFoldersAndFiles(currentDir);else if(command.equals(CommandHandler.CREATE_FOLDER)) { String fileName =request.getParameter("NewFolderName");fileName = newString(fileName.getBytes("iso8859-1"),"UTF-8");String newFolderStr =UtilsFile.sanitizeFolderName(fileName);logger.debug("Parameter NewFolderName: {}", newFolderStr);File newFolder = newFile(currentDir, newFolderStr);int errorNumber =XmlResponse.EN_UKNOWN;if (newFolder.exists())errorNumber =XmlResponse.EN_ALREADY_EXISTS;else {try {errorNumber = (newFolder.mkdir()) ? XmlResponse.EN_OK:XmlResponse.EN_INVALID_FOLDER_NAME;} catch (SecurityException e) { errorNumber = XmlResponse.EN_SECURITY_ERROR;}}xr.setError(errorNumber);}}}out.print(xr);out.flush();out.close();logger.debug("ExitingConnectorServlet#doGet");}/*** Manage the <code>POST</code> requests(<code>FileUpload</code>).<br />** The servlet accepts commands sent in the following format:<br />*<code>connector?Command=<FileUpload>&Type=<Resou rceType>&CurrentFolder=<FolderPath></code> * with the file in the <code>POST</code> body.<br/>* <br>* It stores an uploaded file (renames a file if another exists with the* same name) and then returns the JavaScript callback.*/@SuppressWarnings("unchecked")public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException { logger.debug("Entering Connector#doPost");response.setCharacterEncoding("UTF-8");response.setContentType("text/html;charset=UTF-8");response.setHeader("Cache-Control","no-cache");PrintWriter out = response.getWriter();String commandStr =request.getParameter("Command");String typeStr = request.getParameter("Type");String currentFolderStr =request.getParameter("CurrentFolder");logger.debug("Parameter Command: {}", commandStr);logger.debug("Parameter Type: {}", typeStr);logger.debug("Parameter CurrentFolder: {}", currentFolderStr);UploadResponse ur = null;Object[] obj = new Object[4];// if this is a QuickUpload request,'commandStr' and 'currentFolderStr'// are emptyif (Utils.isEmpty(commandStr) &&Utils.isEmpty(currentFolderStr)) {commandStr = "QuickUpload";currentFolderStr = "/";}if(!RequestCycleHandler.isEnabledForFileUpload(request)) { obj[0] = UploadResponse.SC_SECURITY_ERROR;obj[1] = null;obj[2] = null;obj[3] =Messages.NOT_AUTHORIZED_FOR_UPLOAD;ur = new UploadResponse(obj);} else if(!CommandHandler.isValidForPost(commandStr)) { obj[0] = UploadResponse.SC_ERROR;obj[1] = null;obj[2] = null;obj[3] = Messages.INVALID_COMMAND;ur = new UploadResponse(obj);} else if (typeStr != null&& !ResourceTypeHandler.isValid(typeStr)) {obj[0] = UploadResponse.SC_ERROR;obj[1] = null;obj[2] = null;obj[3] = Messages.INVALID_TYPE;ur = new UploadResponse(obj);} else if(!UtilsFile.isValidPath(currentFolderStr))ur =UploadResponse.UR_INVALID_CURRENT_FOLDER;else {ResourceTypeHandler resourceType = ResourceTypeHandler.getDefaultResourceType(typeStr);String typePath =UtilsFile.constructServerSidePath(request,resourceType);String typeDirPath =getServletContext().getRealPath(typePath);File typeDir = new File(typeDirPath);UtilsFile.checkDirAndCreate(typeDir);File currentDir = new File(typeDir, currentFolderStr);if (!currentDir.exists())ur =UploadResponse.UR_INVALID_CURRENT_FOLDER;else {String newFilename = null;FileItemFactory factory = new DiskFileItemFactory();ServletFileUpload upload = new ServletFileUpload(factory);upload.setHeaderEncoding("UTF-8");try {List<FileItem> items =upload.parseRequest(request);// We upload only one file at the same timeFileItem uplFile = items.get(0);String rawName =UtilsFile.sanitizeFileName(uplFile.getName());String filename =FilenameUtils.getName(rawName);String baseName =FilenameUtils.removeExtension(filename);String extension = FilenameUtils.getExtension(filename);filename =UUID.randomUUID().toString()+"."+extension;if(!ExtensionsHandler.isAllowed(resourceType, extension)) { obj[0] =UploadResponse.SC_INVALID_EXTENSION;obj[1] = null;obj[2] = null;obj[3] = null;ur = new UploadResponse(obj);}elseif(uplFile.getSize()>10*1024*1024){obj[0] = 333;obj[1] = null;obj[2] = null;obj[3] = null;ur = new UploadResponse(obj);}else {// construct an unique file nameFile pathToSave = newFile(currentDir, filename);int counter = 1;while (pathToSave.exists()) { newFilename = baseName.concat("(").concat(String.valueOf(counter)).concat(")").concat(".").conc at(extension);pathToSave = newFile(currentDir, newFilename);counter++;}if(Utils.isEmpty(newFilename)) {obj[0] = UploadResponse.SC_OK;obj[1] = UtilsResponse.constructResponseUrl(request, resourceType, currentFolderStr,true, ConnectorHandler.isFullUrl()).concat(filename);obj[2] = null;obj[3] = null;ur = new UploadResponse(obj);} else {obj[0] = UploadResponse.SC_RENAMED;obj[1] = UtilsResponse.constructResponseUrl(request, resourceType, currentFolderStr,true, ConnectorHandler.isFullUrl()).concat(newFilename);obj[2] = newFilename;obj[3] = null;ur = new UploadResponse(obj);}// secure image checkif(resourceType.equals(ResourceTypeHandler.IMAGE) && ConnectorHandler.isSecureImageUploads()) {if(UtilsFile.isImage(uplFile.getInputStream()))uplFile.write(pathToSave);else {uplFile.delete();obj[0] =UploadResponse.SC_INVALID_EXTENSION;obj[1] = null;obj[2] = null;obj[3] = null;ur = new UploadResponse(obj);}} elseuplFile.write(pathToSave);}} catch (Exception e) {obj[0] = UploadResponse.SC_SECURITY_ERROR;obj[1] = null;}out.print(ur);out.flush();out.close();}}}}。
