首页
知识
文库
登录
|
注册
首页
最近更新
所有主题
我的主题
我的收藏
首页
·
知识
·
编程语言
不错的修改FCKEditor的修改方法
cnming
http://blog.csdn.net/cnming/
.NET
编辑:
dezai
图片来源:网络
一、防止连续文本导致出现滚动条 > FCKEditor编辑器使用Iframe来处理编辑器内容，可
一、防止连续文本导致出现滚动条
FCKEditor
编辑器使用Iframe来处理编辑器内容，可惜不支持文本换行，假如你连续输入一段英文或数字等，将会出现滚动条，这时我们需要给其增加word-wrap样式为break-word；
添加方式有很多，我选择最便捷的修改方式：具体做法是修改fckeditor.html文件，给
<DIV>二、增加Media以及Realplay按钮</DIV> <DIV><SPAN> </SPAN>此项工作相对庞大，要修改很多js文件，以及一些图片和样式文件。</DIV> <DIV><SPAN> a.</SPAN>准备图片：FCKeditor\editor\css\images下面，添加fck_medialogo.gif和fck_realplaylogo.gif，大小随意，作为背景居中显示的。</DIV> <DIV>FCKeditor\editor\skins\default\toolbar\增加media.gif和realplay.gif,其他皮肤类推。</DIV> <DIV><SPAN> b.</SPAN>修改css：给FCKeditor\editor\css\fck_internal.css增加</DIV> <DIV> </DIV> <DIV> </DIV> <DIV>.FCK__Media</DIV> <DIV>{</DIV> <DIV> border: darkgray 1px solid;</DIV> <DIV> background-position: center center;</DIV> <DIV> background-image: url(images/fck_medialogo.gif);</DIV> <DIV> background-repeat: no-repeat;</DIV> <DIV> width: 80px ;</DIV> <DIV> height: 80px ;</DIV> <DIV>}</DIV> <DIV> </DIV> <DIV>.FCK__Realplay</DIV> <DIV>{</DIV> <DIV> border: darkgray 1px solid;</DIV> <DIV> background-position: center center;</DIV> <DIV> background-image: url(images/fck_realplaylogo.JPG);</DIV> <DIV> background-repeat: no-repeat;</DIV> <DIV> width: 80px ;</DIV> <DIV> height: 80px ;</DIV> <DIV>}</DIV> <DIV>c。修改js，主要以realplay做示例</DIV> <DIV>FCKeditor\editor\js\fckeditorcode_ie_1.js，在FCKDocumentProcessors.addItem(FCKFlashProcessor);后面增加</DIV> <DIV>// Realplay begin</DIV> <DIV>var FCKRealplayProcessor=new Object();</DIV> <DIV>FCKRealplayProcessor.ProcessDocument=function(A){</DIV> <DIV><SPAN> var B=A.getElementsByTagName('EMBED');</SPAN></DIV> <DIV><SPAN> var C;</SPAN></DIV> <DIV><SPAN> var i=B.length-1;</SPAN></DIV> <DIV> </DIV> <DIV>while (i>=0&&(C=B[i--])){</DIV> <DIV>if (C.src.endsWith('.rm',true) || C.src.endsWith('.ram',true) || C.src.endsWith('.ra',true))</DIV> <DIV>{var D=FCKDocumentProcessors_CreateFakeImage('FCK__Realplay',C.cloneNode(true));</DIV> <DIV>D.setAttribute('_fckRealplay','true',0);</DIV> <DIV>FCKRealplayProcessor.RefreshView(D,C);</DIV> <DIV>C.parentNode.insertBefore(D,C);</DIV> <DIV>C.parentNode.removeChild(C);</DIV> <DIV>};</DIV> <DIV>};</DIV> <DIV>};</DIV> <DIV> </DIV> <DIV>FCKRealplayProcessor.RefreshView=function(A,B){</DIV> <DIV><SPAN> if (B.width>0) A.style.width=FCKTools.ConvertHtmlSizeToStyle(B.width);</SPAN></DIV> <DIV><SPAN> if (B.height>0) A.style.height=FCKTools.ConvertHtmlSizeToStyle(B.height);</SPAN></DIV> <DIV>};</DIV> <DIV>FCKDocumentProcessors.addItem(FCKRealplayProcessor);</DIV> <DIV>// Realplay end</DIV> <DIV>var FCKMediaProcessor=new Object();</DIV> <DIV>FCKMediaProcessor.ProcessDocument=function(A)</DIV> <DIV>{</DIV> <DIV><SPAN> var B=A.getElementsByTagName('EMBED');</SPAN></DIV> <DIV><SPAN> var C;</SPAN></DIV> <DIV><SPAN> var i=B.length-1;</SPAN></DIV> <DIV><SPAN> while (i>=0&&(C=B[i--]))</SPAN></DIV> <DIV><SPAN> {</SPAN></DIV> <DIV><SPAN> if (C.src.endsWith('.avi',true) || C.src.endsWith('.mpg',true) || C.src.endsWith('.mpeg',true))</SPAN></DIV> <DIV><SPAN> {</SPAN></DIV> <DIV><SPAN> var D=FCKDocumentProcessors_CreateFakeImage('FCK__Media',C.cloneNode(true));</SPAN></DIV> <DIV><SPAN> D.setAttribute('_fckmedia','true',0);FCKMediaProcessor.RefreshView(D,C);</SPAN></DIV> <DIV><SPAN> C.parentNode.insertBefore(D,C);C.parentNode.removeChild(C);</SPAN></DIV> <DIV><SPAN> };</SPAN></DIV> <DIV><SPAN> };</SPAN></DIV> <DIV>};</DIV> <DIV>FCKMediaProcessor.RefreshView=function(A,B)</DIV> <DIV>{</DIV> <DIV><SPAN> if (B.width>0) A.style.width=FCKTools.ConvertHtmlSizeToStyle(B.width);</SPAN></DIV> <DIV><SPAN> if (B.height>0) A.style.height=FCKTools.ConvertHtmlSizeToStyle(B.height);</SPAN></DIV> <DIV>};</DIV> <DIV>FCKDocumentProcessors.addItem(FCKMediaProcessor);</DIV> <DIV>然后修改FCK.GetRealElement方法为下面代码，该方法为处理编辑器中width和height的调整</DIV> <DIV>FCK.GetRealElement=function(A){</DIV> <DIV>var e=FCKTempBin.Elements[A.getAttribute('_fckrealelement')];</DIV> <DIV> </DIV> <DIV>if (A.getAttribute('_fckflash')|| A.getAttribute('_fckrealplay') || A.getAttribute('_fckmedia')){</DIV> <DIV><SPAN> if (A.style.width.length>0) e.width=FCKTools.ConvertStyleSizeToHtml(A.style.width);</SPAN></DIV> <DIV><SPAN> if (A.style.height.length>0) e.height=FCKTools.ConvertStyleSizeToHtml(A.style.height);</SPAN></DIV> <DIV>};</DIV> <DIV>return e;};</DIV> <DIV>----------</DIV> <DIV>FCKeditor\editor\js\fckeditorcode_ie_2.js</DIV> <DIV>FCKCommands.GetCommand方法增加</DIV> <DIV>case 'Media':B=new FCKDialogCommand('Media',FCKLang.DlgMediaTitle,'dialog/fck_Media.html',450,400);</DIV> <DIV>break;</DIV> <DIV>case 'Realplay':B=new FCKDialogCommand('Realplay',FCKLang.DlgMediaTitle,'dialog/fck_Realplay.html',450,400);</DIV> <DIV>break;</DIV> <DIV>FCKToolbarItems.GetItem方法增加</DIV> <DIV>case 'Media':B=new FCKToolbarButton('Media',FCKLang.InsertMediaLbl,FCKLang.InsertMedia);</DIV> <DIV>break;</DIV> <DIV>case 'Realplay':B=new FCKToolbarButton('Realplay',FCKLang.InsertRealplayLbl,FCKLang.InsertRealplay);</DIV> <DIV>break;</DIV> <DIV>FCKContextMenu._GetGroup方法增加</DIV> <DIV>case 'Media':return new FCKContextMenuGroup(true,this,'Media',FCKLang.MediaProperties,true);</DIV> <DIV>case 'Realplay':return new FCKContextMenuGroup(true,this,'Realplay',FCKLang.RealplayProperties,true);<SPAN> // truly</SPAN></DIV> <DIV>FCKContextMenu.RefreshState方法增加</DIV> <DIV>if (this.Groups['Media'])<SPAN> this.Groups['Media'].SetVisible(B=='IMG'&&A.getAttribute('_fckmedia'));</SPAN></DIV> <DIV>if (this.Groups['Realplay']) this.Groups['Realplay'].SetVisible(B=='IMG'&&A.getAttribute('_fckrealplay'));</DIV> <DIV> </DIV> <DIV>然后要增加'dialog/fck_Media.html'和'dialog/fck_Realplay.html'页面，具体我懒得再写了，自己到我的源码下载里看，我是在2。1的基础上改的，2.2要做一些调整！</DIV> <DIV>fckconfig.js也有较多调整，但是这个文件非常简单，自己去看我的源码吧。</DIV> <DIV>然后就是lang目录中对常量的定义，搜索一下就很容易得到，没什么可讲。</DIV> <DIV>在然后就可以了，：）。</DIV> <DIV> </DIV> <DIV>三、添加删除按钮列，类似sina的blog中的编辑控件</DIV> <DIV>四、修改上传路径</DIV> <DIV><SPAN> </SPAN>默认是根目录/UserFiles，有多种方式进行修改，先看一下它的源码：</DIV> <DIV>protected string UserFilesPath</DIV> <DIV>{</DIV> <DIV> get</DIV> <DIV> {</DIV> <DIV> if ( sUserFilesPath == null )</DIV> <DIV> {</DIV> <DIV><SPAN> // Try to get from the "Application".</SPAN></DIV> <DIV><SPAN> sUserFilesPath = (string)Application["FCKeditor:UserFilesPath"] ;</SPAN></DIV> <DIV> </DIV> <DIV><SPAN> // Try to get from the "Session".</SPAN></DIV> <DIV><SPAN> if ( sUserFilesPath == null || sUserFilesPath.Length == 0 )</SPAN></DIV> <DIV><SPAN> {</SPAN></DIV> <DIV><SPAN> sUserFilesPath = (string)Session["FCKeditor:UserFilesPath"] ;</SPAN></DIV> <DIV><SPAN> // Try to get from the Web.config file.</SPAN></DIV> <DIV><SPAN> if ( sUserFilesPath == null || sUserFilesPath.Length == 0 )</SPAN></DIV> <DIV><SPAN> {</SPAN></DIV> <DIV><SPAN> sUserFilesPath = System.Configuration.ConfigurationSettings.AppSettings["FCKeditor:UserFilesPath"] ;</SPAN></DIV> <DIV><SPAN> // Otherwise use the default value.</SPAN></DIV> <DIV><SPAN> if ( sUserFilesPath == null || sUserFilesPath.Length == 0 ) </SPAN></DIV> <DIV><SPAN> sUserFilesPath = DEFAULT_USER_FILES_PATH ;</SPAN></DIV> <DIV> </DIV> <DIV><SPAN> // Try to get from the URL.</SPAN></DIV> <DIV><SPAN> if ( sUserFilesPath == null || sUserFilesPath.Length == 0 ) </SPAN></DIV> <DIV><SPAN> {</SPAN></DIV> <DIV><SPAN> sUserFilesPath = Request.QueryString["ServerPath"] ;</SPAN></DIV> <DIV><SPAN> }</SPAN></DIV> <DIV><SPAN> }</SPAN></DIV> <DIV><SPAN> }</SPAN></DIV> <DIV> </DIV> <DIV><SPAN> // Check that the user path ends with slash ("/")</SPAN></DIV> <DIV><SPAN> if ( ! sUserFilesPath.EndsWith("/") )</SPAN></DIV> <DIV><SPAN> sUserFilesPath += "/" ;</SPAN></DIV> <DIV> }</DIV> <DIV> return sUserFilesPath ;</DIV> <DIV> }</DIV> <DIV>}</DIV> <DIV>由此，可以在Global里或者程序任意位置（加载fckeditor前可以运行到的位置）设置Application["FCKeditor:UserFilesPath"] ，或者Session，或者Webconfig,或者action中的请求参数等。</DIV> 本文作者:cnming 来源:http://blog.csdn.net/cnming/ <br> CIO之家 www.ciozj.com 微信公众号:imciow</span> </div> <div class="km-detail-panel-area-left-tagword"> <ul><span id="ctl00_ContentPlaceHolder1_lblKeyword"></span></ul></div> <div class="km-detail-panel-area-left-tool"> <input type="submit" name="ctl00$ContentPlaceHolder1$btnAddGoodScore" value="写得很好,赞一下！" id="ctl00_ContentPlaceHolder1_btnAddGoodScore" class="km-detail-panel-area-left-tool-button" /> <input type="submit" name="ctl00$ContentPlaceHolder1$btnAddFav" value="收藏起来" id="ctl00_ContentPlaceHolder1_btnAddFav" class="km-detail-panel-area-left-tool-favbutton" /> </div> <div class="km-detail-panel-area-left-annouce">免责声明:本站转载此文章旨在分享信息，不代表对其内容的完全认同。文章来源已尽可能注明，若涉及版权问题，请及时与我们联系，我们将积极配合处理。同时，我们无法对文章内容的真实性、准确性及完整性进行完全保证，对于因文章内容而产生的任何后果，本账号不承担法律责任。转载仅出于传播目的，读者应自行对内容进行核实与判断。请谨慎参考文章信息，一切责任由读者自行承担。</div> <div class="km-detail-panel-area-left-titlebar">延伸阅读</div> <div class="km-detail-panel-area-left-relative"> <ul> <li> <a href="Detail.Aspx?AI=100380&CI=230" title="浅谈系统性能提升的经验和方法" target="_blank"> <img src='https://data.ciozj.com/UploadArticleAlbum/2019/3ecba484886a46e29e0d71373ce1a93820191024095820.jpg' title='浅谈系统性能提升的经验和方法' style="height:115px; width:200px;" /></a> <br /><a href="Detail.Aspx?AI=100380&CI=230" title="浅谈系统性能提升的经验和方法" target="_blank">浅谈系统性能提升的经验和方法</a> </li> <li> <a href="Detail.Aspx?AI=100313&CI=230" title="SpringBoot 实现异步记录复杂日志" target="_blank"> <img src='https://data.ciozj.com/UploadArticleAlbum/2019/3ecba484886a46e29e0d71373ce1a93820191024095820.jpg' title='SpringBoot 实现异步记录复杂日志' style="height:115px; width:200px;" /></a> <br /><a href="Detail.Aspx?AI=100313&CI=230" title="SpringBoot 实现异步记录复杂日志" target="_blank">SpringBoot 实现异步记录复杂日志</a> </li> <li> <a href="Detail.Aspx?AI=100076&CI=230" title="Linux 实时查看日志文件的 4 种方法" target="_blank"> <img src='https://data.ciozj.com/UploadArticleAlbum/2019/183477b9b7054df9bd34555c74e65ad520191024095840.jpg' title='Linux 实时查看日志文件的 4 种方法' style="height:115px; width:200px;" /></a> <br /><a href="Detail.Aspx?AI=100076&CI=230" title="Linux 实时查看日志文件的 4 种方法" target="_blank">Linux 实时查看日志文件的 4 种方法</a> </li> </ul> </div> </div> <div class="km-detail-panel-area-right"> <div class="km-detail-panel-area-right-title">也许感兴趣的</div> <div class="km-detail-panel-area-right-box"> <ul> <li>.<a href="Detail.aspx?AI=100602&C=3&CI=157" title="利润至上，还是现金为王-魏斌 " target="_blank">利润至上，还是现金为王</a></li> </ul> <ul> <li>.<a href="Detail.aspx?AI=100601&C=3&CI=168" title="产品经理能力模型- " target="_blank">产品经理能力模型</a></li> </ul> <ul> <li>.<a href="Detail.aspx?AI=100600&C=2&CI=233" title="从AI小白到大神的7个细节：让你开窍逆袭-AI 超有料 " target="_blank">从AI小白到大神的7个细节：让你开窍逆袭</a></li> </ul> <ul> <li>.<a href="Detail.aspx?AI=100599&C=2&CI=233" title="构建AI大模型应用技术栈有哪些-ruby " target="_blank">构建AI大模型应用技术栈有哪些</a></li> </ul> <ul> <li>.<a href="Detail.aspx?AI=100598&C=2&CI=233" title="如何构建高效的智能应用：大模型五层技术架构详解- " target="_blank">如何构建高效的智能应用：大模型五层技术架构详解</a></li> </ul> <ul> <li>.<a href="Detail.aspx?AI=100597&C=2&CI=233" title="AI智能体Agent的核心架构：记忆、工具与行动-智能体AI " target="_blank">AI智能体Agent的核心架构：记忆、工具与行动</a></li> </ul> <ul> <li>.<a href="Detail.aspx?AI=100596&C=2&CI=233" title="大语言模型（LLM）工作的3个步骤-木易 " target="_blank">大语言模型（LLM）工作的3个步骤</a></li> </ul> </div> <div class="km-detail-panel-area-right-title">我们推荐的</div> <div class="km-detail-panel-area-right-box"> <ul> <li>.<a href="Detail.aspx?AI=98664&C=4&CI=230" title="Spring Boot 构建多租户SaaS平台核心技术指南-CIO之家的朋友 " target="_blank">Spring Boot 构建多租户SaaS平台核心技术指南</a></li> </ul> <ul> <li>.<a href="Detail.aspx?AI=98566&C=4&CI=230" title="关于Java异常设计和处理-海子 " target="_blank">关于Java异常设计和处理</a></li> </ul> <ul> <li>.<a href="Detail.aspx?AI=98547&C=4&CI=230" title="Nginx学习看这一篇就够了-冯insist " target="_blank">Nginx学习看这一篇就够了</a></li> </ul> <ul> <li>.<a href="Detail.aspx?AI=93981&C=4&CI=230" title="社会化海量数据采集爬虫框架搭建-网友 " target="_blank">社会化海量数据采集爬虫框架搭建</a></li> </ul> <ul> <li>.<a href="Detail.aspx?AI=91612&C=4&CI=230" title="ASP.NET多文件批量打包下载-xttxqjfg " target="_blank">ASP.NET多文件批量打包下载</a></li> </ul> <ul> <li>.<a href="Detail.aspx?AI=91611&C=4&CI=230" title="Razor基础语法简介-郑文亮 " target="_blank">Razor基础语法简介</a></li> </ul> <ul> <li>.<a href="Detail.aspx?AI=91610&C=4&CI=230" title="ASP.NET中在不同的子域中共享Session-郑文亮 " target="_blank">ASP.NET中在不同的子域中共享Session</a></li> </ul> <ul> <li>.<a href="Detail.aspx?AI=91556&C=4&CI=230" title="C#实现工作日的计算(排班系统常用)-汶妍 " target="_blank">C#实现工作日的计算(排班系统常用)</a></li> </ul> </div> <div class="km-detail-panel-area-right-title">主题最新</div> <div class="km-detail-panel-area-right-box"> <ul> <li>.<a href="Detail.aspx?AI=100541&C=4&CI=147" title="一文搞懂微服务架构演进-楼仔 " target="_blank">一文搞懂微服务架构演进</a></li> </ul> <ul> <li>.<a href="Detail.aspx?AI=100537&C=4&CI=147" title="一文详解微服务架构-楼仔 " target="_blank">一文详解微服务架构</a></li> </ul> <ul> <li>.<a href="Detail.aspx?AI=100520&C=4&CI=147" title="迄今为止最完整的DDD实践-章磊 " target="_blank">迄今为止最完整的DDD实践</a></li> </ul> <ul> <li>.<a href="Detail.aspx?AI=100490&C=4&CI=232" title="全链路压测自动化实践-CIO之家的朋友 " target="_blank">全链路压测自动化实践</a></li> </ul> <ul> <li>.<a href="Detail.aspx?AI=100489&C=4&CI=147" title="多维度规划业务架构-张逸 " target="_blank">多维度规划业务架构</a></li> </ul> <ul> <li>.<a href="Detail.aspx?AI=100488&C=4&CI=147" title="企业架构之业务架构-Real_man " target="_blank">企业架构之业务架构</a></li> </ul> <ul> <li>.<a href="Detail.aspx?AI=100481&C=4&CI=103" title="需求管理完整指南-CIO之家的朋友 " target="_blank">需求管理完整指南</a></li> </ul> <ul> <li>.<a href="Detail.aspx?AI=100457&C=4&CI=147" title="软件安全设计原则-CIO之家的朋友 " target="_blank">软件安全设计原则</a></li> </ul> <ul> <li>.<a href="Detail.aspx?AI=100450&C=4&CI=147" title="应用部署初探：微服务的3大部署模式-CIO之家的朋友 " target="_blank">应用部署初探：微服务的3大部署模式</a></li> </ul> </div> <div class="km-detail-panel-area-right-title">看看其它的</div> <div class="km-detail-panel-area-right-box"> <div class="km-detail-panel-area-right-title">收藏至微信</div> <div class="km-detail-panel-area-right-box" > <img id="ctl00_ContentPlaceHolder1_ImageCode" src="QrCode.ashx?U=http://m.ciozj.com/Pages/KM/Content.Aspx?AI=46316" /> </div> </div> </div> </div> </div> </form> </body> </html>