FCKEditor使用指南
FCKeditord的使用方法和注意事项

关于FCKeditor的使用方法和注意事项FCKeditor的使用。
首先可以去我的CSDN下载FCKeditor;地址:/detail/njxiaogui/4255422我的是已经设置好的了。
要引用进来 FredCK.FCKeditorV2.dll 这个文件。
要把下载下来的fckeditor文件夹放在你项目的根目录下。
首先在页面的开头要引用:<%@ Register TagPrefix="fckeditorv2" Namespace="FredCK.FCKeditorV2"Assembly="FredCK.FCKeditorV2" %>在页面中放入:(BasePath="~/fckeditor/" 这个要加上否则会不显示。
而且这个文件夹要放在项目的根目录下。
)<div><fckeditorv2:FCKeditor ID="FCKeditor1" runat="server" BasePath="~/fckeditor/" Height="300px"></fckeditorv2:FCKeditor></div>用JS判断这个word框不能为空写法:var oEditor = FCKeditorAPI.GetInstance('FCKeditor1');if (oEditor.GetHTML() == ""){alert("内容和要求不能为空!");return (false);}后台要获取这个框中的值,并插入到数据库中:只有用这种SQL语句的写法才不会出现错误。
(注意:在数据库设计中要把这个字段类型设置为:NCLOB)private void bc(){try{string nrms = FCKeditor1.Value;//这个就是值StringBuilder builder = new StringBuilder();builder.Append("UPDATE ZC_PDTZ ");builder.Append("SET ");builder.Append(" NRMS= ");builder.Append(" :nrms ");OracleParameter[] commandParameters = new OracleParameter[1];commandParameters[3] = new OracleParameter(":nrms",OracleType.NClob );commandParameters[3].Value = nrms;OracleHelper.ExecuteScalar(CX.AppInfo.ConStr, CommandType.Text, builder.ToString(), commandParameters);//连接数据库字符串Response.Write("<script>alert('编辑成功!');window.opener.opener = null;window.opener.location.replace(window.opener.location.href);window.clos e();</script>");}catch (Exception ex){Response.Write("<script>alert('数据错误" + ex.Message + "');");return;}}。
CKEDITOR编辑器使用

3.写一个文本域textarea。
<textarea name="editor1">输入您想输入的内容</textarea>
4.写js替换文本。利用CKEDITOR.replace()方法。 <script type="text/javascript">CKEDITOR.replace('editor01');</script> 会先按照name来查找,如果找不到再按id来找。
5.属性配置
属性配置有3种方式:1.在jsp页面直接配置 2.在config.js配置 3.自定义文件配置a.IN-PAGE配置方式:(jsp页面)
直接再jsp页面进行配置,你无需理会在CKEDITOR安装目录中的配置文件(ps:in-page的优先级最高).
CKEditor编辑器使用
CБайду номын сангаасEditor简介
CKEditor 的前身是 FCKEditor,所以我们现在常简称它fck,fck不需要安装客户端,是一款功能强大的开源在线文本编辑器。可以输入任意字符,而且可以根据用户需求设置想拥有的各种格式。
步骤:
1.将fck文件夹导入到项目的WebRoot目录下。
FckEditor中文配置手册详细说明

对FckEditor的一点使用经验,及网络上的资料整理正题:下载FckEditorFCKeditor目前已经更新到2.6版,详情请看官方/因为下载下来的压缩包里面有包含很多在我们使用时,用不到的,不删除也行。
看个人喜好下面以PHP为例,进行程序瘦身删除所有”_”开头的文件和文件夹删除FCKeditor的目录下:fckeditor.afpfckeditor.aspfckeditor.cfcfckeditor.cfmssofckeditor.plfckeditor.pyhtaccess.txtlicense.txt删除语言包editor\lang中除中文和英文以外的语言删除skin目录下除默认皮肤以外的文件夹filemanager/browser/default/connectors/目录下除php以外的文件filemanager/upload/目录下除php以外的文件如果你不想要表情包删除editor\images\smiley下的msn文件夹及表情按钮好了精简完毕我们通常把编辑器用以个文件夹存放、通常情况下我们可以明白为fckeditor或editor找到里面两关键文件fckeditor_php4.php fckeditor_php5.php 这两个文件的代码相差不了多少,很显然跟php版本有关打开这两个文件XML/HTML代码1. function FCKeditor( $instanceName )2. {3. $this->InstanceName = $instanceName ;4. $this->BasePath = './editor/' ; 默认编辑器所在的文件位置5. $this->Width = '100%' ; 默认编辑器宽6. $this->Height = '350' ; 默认编辑器高7. $this->ToolbarSet = 'Default' ; 默认编辑器SKIN8. $this->Value = '' ; 初始值9.10. $this->Config = array() ;11. }FCKeditor设置文件"fckconfig.js"XML/HTML代码1. FCKConfig.CustomConfigurationsPath = '' ; // 自定义配置文件路径和名称2. FCKConfigFCKConfig.EditorAreaCSS = FCKConfig.BasePath + 'css/fck_editorarea.css'; // 编辑区的样式表文件3. FCKConfig.EditorAreaStyles = '' ; // 编辑区的样式表风格4. FCKConfig.ToolbarComboPreviewCSS =''; //工具栏预览CSS5. FCKConfig.DocType = '' ;//文档类型6. FCKConfig.BaseHref = ''; // 相对链接的基地址7. FCKConfig.FullPage = false ; //是否允许编辑整个HTML文件,还是仅允许编辑BODY间的内容8. FCKConfig.StartupShowBlocks = false ;//决定是否启用"显示模块"9. FCKConfig.Debug = false ;//是否开启调试功能10. FCKConfigFCKConfig.SkinPath = FCKConfig.BasePath + 'skins/default/' ; //皮肤路径11. FCKConfig.PreloadImages=... //预装入的图片12. FCKConfigFCKConfig.PluginsPath = FCKConfig.BasePath + 'plugins/' ; //插件路径13. FCKConfig.AutoDetectLanguage = true ; //是否自动检测语言14. FCKConfig.DefaultLanguage = 'zh-cn' ; //默认语言15. FCKConfig.ContentLangDirection = 'ltr' ; //默认的文字方向,可选"ltr/rtl",即从左到右或从右到左16. FCKConfig.ProcessHTMLEntities = true ; //处理HTML实体17. FCKConfig.IncludeLatinEntities = true ; //包括拉丁文18. FCKConfig.IncludeGreekEntities = true ;//包括希腊文19. FCKConfig.ProcessNumericEntities = false ;//处理数字实体20. FCKConfig.AdditionalNumericEntities = '' ; //附加的数字实体21. FCKConfig.FillEmptyBlocks = true ; //是否填充空块22. FCKConfig.FormatSource = true ; //在切换到代码视图时是否自动格式化代码23. FCKConfig.FormatOutput = true ; //当输出内容时是否自动格式化代码24. FCKConfig.FormatIndentator = ' ' ; //当在源码格式下缩进代码使用的字符25. FCKConfig.StartupFocus = false ; //开启时焦点是否到编辑器,即打开页面时光标是否停留在fckeditor上26. FCKConfig.ForcePasteAsPlainText = false ; //是否强制粘贴为纯文件内容27. FCKConfig.AutoDetectPasteFromWord = true ; //是否自动探测从word粘贴文件,仅支持IE28. FCKConfig.ShowDropDialog = true ;//是否显示下拉菜单29. FCKConfig.ForceSimpleAmpersand = false ;//是否不把&符号转换为XML实体30. FCKConfig.TabSpaces = 0 ;//按下Tab键时光标跳格数,默认值为零为不跳格31. FCKConfig.ShowBorders = true ;//合并边框32. FCKConfig.SourcePopup = false ;//弹出33. FCKConfig.ToolbarStartExpanded = true ;//启动fckeditor工具栏默认是否展开34. FCKConfig.ToolbarCanCollapse = true ;//是否允许折叠或展开工具栏35. FCKConfig.IgnoreEmptyParagraphValue = true ;//是否忽略空的段落值36. FCKConfig.FloatingPanelsZIndex = 10000 ;//浮动面板索引37. FCKConfig.HtmlEncodeOutput = false ;//是否将HTML编码输出38. FCKConfig.TemplateReplaceAll = true ;//是否替换所有模板39. FCKConfig.ToolbarLocation = 'In' ;//工具栏位置,40. FCKConfig.CustomConfigurationsPath = '' ; // 自定义配置文件路径和名称41. FCKConfigFCKConfig.EditorAreaCSS = FCKConfig.BasePath + 'css/fck_editorarea.css'; // 编辑区的样式表文件42. FCKConfig.BaseHref = ''; // 相对链接的基地址43. FCKConfig.Debug = true/false; // 是否开启调试功能,当调用FCKDebug.Output()时,会在调试窗中输出内容44. FCKConfigFCKConfig.SkinPath = FCKConfig.BasePath + 'skins/default/'; // 设置皮肤45. FCKConfig.AutoDetectLanguage = true/false ; // 是否自动检测语言46. FCKConfig.DefaultLanguage = 'zh-cn' ; // 设置默认语言47. FCKConfig.ContentLangDirection = 'ltr/rtr'; // 默认文字方向,ltr左,rtr右48. FCKConfig.FillEmptyBlocks = true/false ; // 使用这个功能,可以将空的块级元素用空格来替代49. FCKConfig.FormatSource = true/false; // 切换到代码视图时,是否自动格式化代码50. FCKConfig.FormatOutput = true/false; // 当输出内容时是否自动格式化代码51. FCKConfig.FormatIndentator = ""; // 当在“源码格式”下缩进代码使用的字符52. FCKConfig.GeckoUseSPAN = true/false; // 是否允许SPAN标记代替B,I,U标记53. FCKConfig.StartupFocus = true/false; // 开启时是否FOCUS到编辑器54. FCKConfig.ForcePasteAsPlainText = true/false;// 强制粘贴为纯文本55. FCKConfig.ForceSimpleAmpersand = true/false; // 是否不把&符号转换为XML实体56. FCKConfig.TabSpaces = 0/1; // TAB是否有效57. FCKConfig.TabSpaces = 4; // TAB键产生的空格字符数58. FCKConfig.ShowBorders = true/false; // 是否合并边框59. FCKConfig.ToolbarStartExpanded = true/false; // 页面载入时,工具栏是否展开,点“展开工具栏”时才出现60. FCKConfig.ToolBarCanCollapse = true/false; // 是否允许展开折叠工具栏61. FCKConfig.ToolbarSets = object ; // 编辑器的工具栏,可以自行定义,删减,可参考已存在工具栏62. FCKConfig.EnterMode = 'p'; // 编辑器中直接回车,在代码中生成,可选为p | div | br63. FCKConfig.ShiftEnterMode = 'br'; // 编辑器中Shift+回车,在代码中生成,可选为p | div | br64. FCKConfig.ContextMenu = 字符串数组; // 右键菜单的内容65. FCKConfig.FontColors = ""; // 文字颜色列表66. FCKConfig.FontNames = ""; // 字体列表67. FCKConfig.FontSizes = ""; // 字号列表68. FCKConfig.FontFormats = ""; // 文字格式列表69. FCKConfig.StylesXmlPath = ""; // CSS样式列表的XML文件的位置70. FCKConfig.TemplatesXmlPath = ""; // 模版的XML文件位置71. FCKConfig.SpellChecker = "ieSpell/Spellerpages"; // 拼写检查器72. FCKConfig.IeSpellDownloadUrl = ""; // 下载拼写检查器的网址73. FCKConfigFCKConfig.SmileyPath = FCKConfig.BasePath + 'images/smiley/msn/'; // 表情文件存放路径74. FCKConfig.SmileyImages = ''; // 表情文件名称列表,具体参考默认设置75. FCKConfig.SmileyColumns = 8; // 表情窗口显示表情列数76. FCKConfig.SmileyWindowWidth = 320; // 表情窗口显示宽度,此窗口会因为表情文件的改变而作调整77. FCKConfig.SmileyWindowHeight = 240; // 表情窗口显示高度,此窗口会因为表情文件的改变而作调整78. FCKConfig.FullPage = true/false; // 是否允许编辑整个HTML文件,还是仅允许编辑BODY间的内容79.80.81. 上传设置82.83. var _FileBrowserLanguage = 'php' ; // asp | aspx | cfm | lasso | perl | php | py84. var _QuickUploadLanguage = 'php' ; // asp | aspx | cfm | lasso | php[/code]85. //第一个是文件浏览器使用的语言,第二个快速上传使用的语言,改成你需要的86. FCKConfig.LinkUploadAllowedExtensions = "" ; // empty for all87. FCKConfig.LinkUploadDeniedExtensions =".(php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgi)$"88. //这是两个允许和拒绝上传的文件类型列表89. FCKConfig.ImageBrowser = false ;是否在插入图片功能里面启用服务器文件浏览功能90. FCKConfigFCKConfig.ImageBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Type=ImageConnector=connectors/' + _FileBrowserLanguage + '/connector.' + _FileBrowserExtension ;91. Type=Image 表示文件类型是image这会使文件浏览器定位到文件上传路径/image/文件夹下面92. FCKConfig.FlashBrowser = false ;是否在插入flash功能中启用服务器文件浏览功能93. FCKConfig.LinkUpload = false ;是否启用插入链接的快速上传功能94. FCKConfig.ImageUpload = false ;是否启用图片快速上传功能95. FCKConfig.FlashUpload = false ;是否启用flash上传功能96.97.98. 服务器文件设置99.100. 文件浏览器的设置:101. f ckeditor\editor\filemanager\connectors\asp\config.asp102.103. C onfigIsEnabled = true 决定是否启用文件浏览器。
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使用

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在线编辑器的使用一、下载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' ) ; // 参数就是提交表单时的参数名// 必须要指定的属性。
PHP实例:FCKeditor的配置和使用方法
〇、假设网站地目录为:以下为引用地内容:\\\一、调用地两种方法、通过创建实例来调用在文件中,调用它地代码,把下面地代码加在需要编辑器地地方:以下为引用地内容:< ""><引用这个文件,基本地类和数据结构都在这里("");创建对象地实例.即提交后,接收数据页面['']使用('');所在地位置,这里它地位置就是'' 文件夹>'';工具按钮设置>'';设置它地宽度>'';设置它地高度>'';生成>();?><>、通过调用以下为引用地内容:< "">< "" "" ": " >< "" ": " >< "" "" ><><>注意:"" 和中地“”必须相同.其实,用调用和用第一种方法本质是完全一样地!不信地话,请在用浏览器打开网站上地文件,然后查看“源代码”,就是本调用地代码.所以推荐通过创建实例来调用.、当用来获得内容地时候是不是发现得不到内容,如:<>< "();" ""><>你会发现弹谈出地窗口没内容.我们可以通过下面地代码来获得它地内容:以下为引用地内容:<>(){('');();;}<>< "(());">二、配置一些文件、地配置()工具按钮设置查找[""],这里有很多按钮,下面我们将对他们详细介绍显示源代码删除线保存新建空白页面上标下标预览左对齐剪切复制粘贴居中对齐右对齐两端对齐纯文本粘贴自动编号来自地粘贴项目符号打印减少缩进拼写检查增加缩进查找显示表格线替换显示明细撤销添加动作还原复选框全选单选按钮去除格式单行文本框插入编辑链接滚动文本框去除连接下拉菜单锚点按钮插入编辑图片图片按钮插入编辑表格隐藏插入水平线显示比例插入特殊字符系统字体软键盘字体样式插入表情符号字体格式关于字体粗体字体大小斜体文字颜色下划线背景色这个默认地是包含了所有地工具按钮,但是有时有地按钮并不需要.那么我们可以将不需要地按钮给删了.下面是一个定制地配置,给大家一个参考.以下为引用地内容:[""] [['','','','','','','','','','','','','','','','','','','','','','','','','',''] ,['','','','','','','','','','','','','','','','','','','','','']];再例如:以下为引用地内容:['','','','','','','','','','']];这样地话,你在前台调用地时候就要用>'',不能再是""了.()语言地配置查找将它设置为''.()脚本语言地设置查找和将他们设置为'', 默认是'',如果这里不设置地话,图片将不能上传,这点很重要.当时我在用由于没配置这个,不能上传图片,而我同寝室地用能上传图片,让我烦恼了好多天,最后终于找到是这个原因.、图片上传地配置打开文件:查找[''],将它设置为'';查找[''],将它设置图片地目录,这个目录是相对于主目录地.例如:我写了一个,就可以设置为打开文件:查找[''],将它设置为'';查找[''],将它设置上传文件地目录,最好与上面地图片目录相同.好了,现在所有地配置都已经完成了,现在你要做地只是删除一些不必要地文件了.只要包含''地目录名和文件名都可以删除,这都是一些说明文件.因为我们用在环境中,其他语言相关地一些文件也都可以删除.。
FCKeditor文本编辑器的使用方法
FCKeditor是目前最好的html文本编辑器,如果还不明白的话看了下图就知道了效果图:那么为什么说是FCKeditor的冰冷之心呢?这不是哗众取宠,主要是说它使用起来有点麻烦,下文就详细说明如何搞定这玩意儿。
1.FCKeditor的官方网站是:目前最新的FCKeditor 2.4.2版本。
请在此页下载:如图所示:要下载FCKeditor2.4.2.zip和 版的2个zip包。
说明:FCKeditor2.4.2.zip是其最新的Javascript文件和图片什么的;.zip是调用的DLL在里面。
2.分别解压后把FCKeditor2.4.2.zip里的fckeditor目录整个复制到网站中。
3.解压.zip包后在_2.2\bin\Debug目录里找到FredCK.FCKeditorV2.dll。
其他文件没用,把FredCK.FCKeditorV2.dll复制到我们的网站,建立一个Bin目录。
4.引用FredCK.FCKeditorV2.dll。
第一步:第二步:5.导入工具箱。
在“工具箱”下右键点击“选择项”。
弹出如图窗口:点击浏览,找到dll所在目录。
这时发现工具箱里多出FCKeditor控件。
6.拖拽FCKeditor到页面上7.配置WebConfig<?xml version="1.0"?><!--注意: 除了手动编辑此文件以外,您还可以使用Web 管理工具来配置应用程序的设置。
可以使用 Visual Studio 中的“网站”->“ 配置”选项。
设置和注释的完整列表在ments 中,该文件通常位于\Windows\\Framework\v2.x\Config 中--><configuration><appSettings><add key="FCKeditor:BasePath" value="~/fckeditor/"/><add key="FCKeditor:UserFilesPath" value="/Files/" /></appSettings><connectionStrings/><system.web>说明:BasePath是fckeditor所在路径,fckeditor由于我们直接放网站目录下这样写就可以,如果您的网站多放几层适当调整即可。
使用FCKeditor控件
1:把FCKeditor和Files两个文件夹复制到项目的根目录![注意:项目根目录不要用中文]2:添加引用,引用FredCK.FCKeditorV2.dll3:在工具箱添加FredCK.FCKeditorV2.dll控件!4:把控件拖入页面,修改FCKeditor控件的BasePath属性一定要修改为:~/FCKeditor/(就是在前面加了个~号,默认是没有的!)5:回到“源”代码视图,修改@page里的指令。
page指令里的AutoEventWireup="false" validateRequest="false"(如没有自己添加)---以上操作完成之后,可以在浏览器预览看见效果了!------6:找到FCKeditor目录下的fckconfig.js文件,打开(用记事本或者Visual Studio2005都可以).做如下修改:(1): 找到这两行var _FileBrowserLanguage = 'asp' ; // asp | aspx | cfm | lasso | perl | php | pyvar _QuickUploadLanguage = 'asp' ; // asp | aspx | cfm | lasso | php将asp改成aspx(2): FCKConfig.DefaultLanguage = 'en' ; 将en改成zh-cn (也可以不修改,意思是改成简体中文)7:修改项目的web.config文件。
<appSettings><add key="FCKeditor:BasePath" value="~/FCKeditor/"/><add key="FCKeditor:UserFilesPath" value="/Web根目录文件夹名/Files" /> </appSettings>注:你也许会问为什么要设置成/Web根目录文件夹名/Files这样而不是~/Files,因为FCKeditor使用这个值来返回你上传后的文件的相对路径到客户端,~/Files的形式是在服务可以编译解释的,但是在客户端的静态就不懂这是什么了。
FCKeditor使用详解JAVA版(二)
FCKeditor使用详解JAVA版(二)10. 解决上传中文乱码问题和重命名文件:修改ConnectorServlet.java重命名文件名:11. Peoperties文件的配置:参考下面:# 允许上传的文件类型connector.resourceType.file.extensions.allowed = 7z|aiff|asf|avi|bmp|csv|doc|fla|flv|gif|gz|gzip|jpeg|jpg|mid|mov|m p3|mp4|mpc|mpeg|mpg|ods|odt|pdf|png|ppt|pxd|qt|ram|rar|rm|r mi|rmvb|rtf|sdc|sitd|swf|sxc|sxw|tar|tgz|tif|tiff|txt|vsd|wav|wma|w mv|xls|xml|zipconnector.resourceType.image.extensions.allowed = bmp|gif|jpeg|jpg|pngconnector.resourceType.flash.extensions.allowed = swf|flaconnector.resourceType.media.extensions.allowed = aiff|asf|avi|bmp|fla|flv|gif|jpeg|jpg|mid|mov|mp3|mp4|mpc|mpeg |mpg|png|qt|ram|rm|rmi|rmvb|swf|tif|tiff|wav|wma|wmv # 上传资源默认路径connector.resourceType.file.path = /fileconnector.resourceType.image.path = /imageconnector.resourceType.flash.path = /flashconnector.resourceType.media.path = /media# 强制一个文件名只能有一个“.”符号connector.forceSingleExtension = true# 默认的上传路径,为上下文的相对路径erFilesPath = /userfiles# 是否显示全路径connector.fullUrl = false# 这个如果设置为true,则Fckeditor会检查目录中是否有相同的文件,如果有就# 会对这个文件进行重命名connector.secureImageUploads = true# fckeditor相对于Context的路径fckeditor.basePath = /fckeditor# fckeditor的默认高度fckeditor.height = 200# 默认的工具栏fckeditor.toolbarSet = Default# 默认的宽度fckeditor.width = 100%# 一些提示信息message.enabled_patible_browser.no = Your browser is not compatiblemessage.enabled_patible_browser.yes = Your browser is fully compatiblemessage.enabled_tag.connector.file_browsing.disabled = The Connector is disabled for FileBrowsingmessage.enabled_tag.connector.file_browsing.enabled = The Connector is enabled for FileBrowsingmessage.enabled_tag.connector.file_upload.disabled = The Connector is disabled for FileUploadmessage.enabled_tag.connector.file_upload.enabled = TheConnector is enabled for FileUpload12. 文件的上传:如果要上传文件,需要下载一个apache http server,然后在安装目录下,找到conf目录,找到httpd.conf文件。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
FCKeditor使用指南作者:何明旺目录FCKeditor使用指南 (1)1FCKeditor的下载及介绍 (4)1.1下载地址 (4)1.2FCKeditor下载包的介绍 (4)2FCKeditor的目录和文件精简 (4)3在页面创建FCKeditor (4)3.1Js创建FCKeditor实例: (4)3.1.1方法一:内嵌方法(推荐) (4)3.1.2方法二:替换页面中的Textarea (5)3.1.3方法三:适合于Ajax的调用方法 (6)3.1.4Js中FCKeditor对象的属性(集合)和方法 (6)3.1.4.1属性 (6)3.1.4.2集合 (7)3.1.4.3方法 (7)3.1.5FCKeditor的JS构造器 (9)3.1.6将从后台读取的数据显示在FCKeditor中 (9)3.2在Jsp中通过自定义标签创建: (9)3.3FCKeditor API 调用 (10)3.4适时打开编辑器 (10)4修改FCKeditor的配置: (11)4.1方法一:修改fckconfig.js 文件 (11)4.2方法二:使用一个额外的配置文件覆盖默认配置 (11)4.3配置的加载顺序 (11)4.4提示 (11)4.5一般需要修改的配置项 (11)4.5.1默认语言 (11)4.5.2自定义ToolbarSet,去掉一些不需要的功能 (12)4.5.3加上几种常用的字体 (13)4.5.4修改“回车”和 “Shift + 回车”的换行行为 (13)4.5.5修改编辑区的样式文件 (14)4.5.6更换表情图片 (14)4.5.7编辑区域的右键菜单功能 (14)4.6fckconfig.js配置参数选项说明 (15)4.7自定义工具栏按钮 (17)4.8自定义右键菜单 (18)5文件上传问题 (19)5.1开启和关闭文件上传功能(fckconfig.js) (19)5.2文件上传的基本使用 (19)5.3上传中文文件名的文件会出现乱码 (20)5.4创建中文名目录会出现乱码 (21)5.5引用中文名文件的图片不能正常显示 (21)5.6控件允许上传的文件的类型 (22)5.7控制上传的文件的大小 (22)5.8增加文件删除功能 (23)6超连接重定位问题 (25)7使用FCKeditor的API (26)7.1获得FCKeditor的实例 (26)7.1.1获得当前页FCKeditor实例 (26)7.1.2从FCKeditor的弹出窗口中获得FCKeditor实例 (26)7.1.3从框架页面的子框架中获得其它子框架的FCKeditor实例 (26)7.1.4从页面弹出窗口中获得父窗口的FCKeditor实例 (26)7.2常见的Js方法调用 (27)7.2.1插入HTML到FCKeditor (27)7.2.2设置FCKeditor的内容(HTML) (27)7.2.3获取FCKeditor中的XHTML (27)7.2.4获取FCKeditor中的innerHTML和innerText (27)7.2.5执行指定动作 (28)7.2.6统计编辑器中内容的字数 (29)7.2.7检查FCKeditor中的内容是否有改动 (29)7.2.8将FCKeditor中的内容是否有改动的值重新设置 (29)8外联编辑条(多个编辑域共用一个编辑条) (29)9解释fck样式(CSS)的工作原理 (30)10获取FCKeditor中插入的图片 (31)1FCKeditor的下载及介绍1.1 下载地址FCKeditor主页:演示地址:/demo文档位置:下载地址:/download1.2 FCKeditor下载包的介绍FCKeditor_2.6.3.zip 是Js写的一个客户端FCKeditor-java-2.4-bin.zip 用于服务端的,可以实现文件上传等FCKeditor-java-demo-2.4.war 一个演示例子2FCKeditor的目录和文件精简因为这个编辑器是支持多语言的,所以首先我们针对使用对其做相应的冗余文件删除。
1.临时文件及文件夹删除:从根目录下开始删除一切以“_”开头的文件及文件夹,因为他们为临时文件和文件夹。
删除这类临时文件及文件夹之后,我们还要删除一些根目录下的多余文件,根目录下我们只保留fckconfig.js(配置文件)、fckeditor.js(js方式调用文件)、 fckstyles.xml(样式)、fck templates.xml(模板)文件和editor文件夹。
2.将editor/filemanager/upload目录下文件及文件夹清空3.editor\filemanager\browser\default\connectors目录:存放编辑器所支持的Web动态语言,test.html文件可以帮助你查看某语言下的上传设置等(具体上传设置我将在后面的配置作较为详细讲解),可以自行决定是否删除。
4.editor\lang目录:存放的是多语言配置文件,因为我们只可能用到en和zh-cn(简体中文)所以,根据我的选择,我删掉其他的语言配置文件。
5.editor\skins界面目录:默认带有三个界面(default:默认界面,加载速度相对较快;office2003:相对pp的界面,不过速度确实要慢些;silver:银白色界面,加载速度也相对较快),可以自行决定是否删除其中一两个。
到此精简完成,你会发现整个编辑器确实“瘦身”不少。
3在页面创建FCKeditor3.1 Js创建FCKeditor实例:在对应对应的Html引入 FCKeditor.js<script type="text/javascript" src="fckeditor/fckeditor.js"></script>3.1.1方法一:内嵌方法(推荐)在需要嵌入 FCKeditor 的地方写上如下这段Js:<script type="text/javascript">var oFCKeditor = new FCKeditor('FCKeditor1');oFCKeditor.BasePath = "/project/fckeditor/";oFCKeditor.Create();</script>例如:<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>FCKeditor - Sample</title><meta http-equiv="Content-Type"content="text/html;charset=utf-8"><meta name="robots"content="noindex, nofollow"><script type="text/javascript"src="fckeditor/fckeditor.js"></script></head><body><form><script type="text/javascript">var oFCKeditor = new FCKeditor('FCKeditor1');"/project/fckeditor/"; // BasePath=oFCKeditor.BasePath属性必须设置正确,否则会出现404错误,必须以“/”结尾oFCKeditor.Create();</script></form></body></html>3.1.2方法二:替换页面中的Textarea先在页面定一个Textarea(必须为name属性指定值) 再在Html写入这么一段Js代码:<script type="text/javascript">window.onload = function(){var oFCKeditor = new FCKeditor( 'MyTextarea' ) ;oFCKeditor.BasePath = "/project/fckeditor/" ;oFCKeditor.ReplaceTextarea() ;}</script>Html的Body中:<textarea id="MyTextarea" name="MyTextarea">This is <b>the</b> initial value.</textarea>例如:<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>FCKeditor - Sample</title><meta http-equiv="Content-Type"content="text/html;charset=utf-8"><meta name="robots"content="noindex, nofollow"><script type="text/javascript"src="fckeditor/fckeditor.js"></script><script type="text/javascript">window.onloadfunction() {=var oFCKeditor = new FCKeditor('MyTextarea');"/project/fckeditor/"; // BasePath属性=oFCKeditor.BasePath必须设置正确,否则会出现404错误,必须以“/”结尾oFCKeditor.ReplaceTextarea();}</script></head><body><textarea id="MyTextarea"name="MyTextarea">This is <b>the</b> initial value.</textarea></body></html>3.1.3方法三:适合于Ajax的调用方法<script type="text/javascript">//使用getElementById方法取得myFCKeditor ID元素var div = document.getElementById("myFCKeditor");//创建fckeditor实例var fck = new FCKeditor("myFCKeditor");//使用innerHTML方法,在myFCKeditor div元素里创建编辑器div.innerHTML = fck.CreateHtml();</script>3.1.4Js中FCKeditor对象的属性(集合)和方法3.1.4.1 属性属性名描述默认值Width 宽度100%Height 高度200Value 初始化内容(空字符串)ToolbarSet 工具条的集合名的称(内置有Default和Basic,也可自己定制)DefaultBasePath 编辑器的基本路径/fckeditor/ CheckBrowser 是否在显示编辑器前检查浏览器兼容性trueDisplayErrors 是否显示提示错误true只读属性名描述数据类型Description 描述stringEditMode 编辑状态IntegerName 名字stringStatus 状态Integer3.1.4.2 集合Config[Key]=value;这个集合用于更改配置中某一项的值,如:oFckeditor.Config["DefaultLanguage"]="zh-cn";3.1.4.3 方法function AttachToOnSelectionChange(functionPointer)function CleanAndPaste(html)function CreateElement(tag)function CreateLink(url)function ExecOnSelectionChange() //Fires OnSelectionChange event in event managerfunction ExecOnSelectionChangeTimer()function ExecuteNamedCommand(commandName, commandParameter)function ExecuteRedirectedNamedCommand(commandName, commandParameter)function Focus()function GetHTML(format) // doesnt work. Use GetXHTML instead.function GetNamedCommandState(commandName)function GetNamedCommandValue(commandName)function GetXHTML(format)function InitializeBehaviors()function InsertElement(element)function InsertElementAndGetIt(e)function InsertHtml(html)function IsDirty();function MakeEditable()function OnDoubleClick(element)function Paste()function PasteAsPlainText()function PasteFromWord()function Preview()function RegisterDoubleClickHandler(handlerFunction, tag)function ResetIsDirty();function SetHTML(html, forceWYSIWYG)function SetStatus()function ShowContextMenu(x, y)function SwitchEditMode()function UpdateLinkedField()EventsOnce the editor loading is complete and it is ready to use (and interact with JavaScript), a standard function is called in the page that contains the editor, if the function is defined.This function must be named "FCKeditor_OnComplete" and receives the related editor instance as the parameter. Using it, you can execute any initial code that makes the initial interaction with the editor.This is a declaration example:function FCKeditor_OnComplete( editorInstance ) {alert( ) ;}Apart the above standard event, every FCKeditor instance has a "Event" object that can be used to listen for events to be fired.For example, the following code listens for the "OnSelectionChange" to execute custom code:<script type="text/javascript">var counter = 0 ;function DoSomething( editorInstance ) {window.document.title = + ' : ' + ( ++counter ) ;function FCKeditor_OnComplete( editorInstance ) {'OnSelectionChange',editorInstance.Events.AttachEvent(DoSomething ) ;}</script>Note that every callback function receives the editor instance as a parameter.The following is the list of events available:OnSelectionChange: fired when the actual selection in the editor area changes (by selection I mean the cursor position too... it changes on key strokes). Note: In IE6, this event does not fire on every keystroke, but only on some random keystrokes. Handy!OnAfterSetHTML: fired once the HTML is loaded in the editor (including when changing views). OnStatusChange: fired when the editor status changes. The following constants are also available globally in the page: FCK_STATUS_NOTLOADED, FCK_STATUS_ACTIVE and FCK_STATUS_COMPLETE.OnPaste: fired when something is pasted in the editor3.1.5FCKeditor的JS构造器Var FCKeditor = function(instanceName, width, height, toolbarSet, value)·其中 instanceName 为编辑器输出的Textarea 元素的name 属性值,必须指定·参数会赋给同名属性3.1.6将从后台读取的数据显示在FCKeditor中如果想要使用从数据库读来的文本数据或者是后台来自文件的txt/html文本数据。