比较不错的修改FCKEditor的修改方法

修改后的代码下载http://www.cnblogs.com/Files/Truly/FCKeditor_Truly.rar
本地下载地址
由于项目需要，近期仔细研究了FCKEditor。发现一下bug，以及缺少的一些东西。

一、防止连续文本导致出现滚动条
FCKEditor编辑器使用Iframe来处理编辑器内容，可惜不支持文本换行，假如你连续输入一段英文或数字等，将会出现滚动条，这时我们需要给其增加word-wrap样式为break-word；

添加方式有很多，我选择最便捷的修改方式：具体做法是修改fckeditor.html文件，给<br>二、增加Media以及Realplay按钮<br> 此项工作相对庞大，要修改很多js文件，以及一些图片和样式文件。<br> a.准备图片：FCKeditor\editor\css\images下面，添加fck_medialogo.gif和fck_realplaylogo.gif，大小随意，作为背景居中显示的。<br>FCKeditor\editor\skins\default\toolbar\增加media.gif和realplay.gif,其他皮肤类推。<br> b.修改css：给FCKeditor\editor\css\fck_internal.css增加<br></p><p>.FCK__Media<br>{<br> border: darkgray 1px solid;<br> background-position: center center;<br> background-image: url(images/fck_medialogo.gif);<br> background-repeat: no-repeat;<br> width: 80px ;<br> height: 80px ;<br>}</p><p>.FCK__Realplay<br>{<br> border: darkgray 1px solid;<br> background-position: center center;<br> background-image: url(images/fck_realplaylogo.JPG);<br> background-repeat: no-repeat;<br> width: 80px ;<br> height: 80px ;<br>}<br>c。修改js，主要以realplay做示例<br>FCKeditor\editor\js\fckeditorcode_ie_1.js，在FCKDocumentProcessors.addItem(FCKFlashProcessor);后面增加<br>// Realplay begin<br>var FCKRealplayProcessor=new Object();<br>FCKRealplayProcessor.ProcessDocument=function(A){<br> var B=A.getElementsByTagName('EMBED');<br> var C;<br> var i=B.length-1;</p><p>while (i>=0&&(C=B[i--])){<br>if (C.src.endsWith('.rm',true) || C.src.endsWith('.ram',true) || C.src.endsWith('.ra',true))<br>{var D=FCKDocumentProcessors_CreateFakeImage('FCK__Realplay',C.cloneNode(true));<br>D.setAttribute('_fckRealplay','true',0);<br>FCKRealplayProcessor.RefreshView(D,C);<br>C.parentNode.insertBefore(D,C);<br>C.parentNode.removeChild(C);<br>};<br>};<br>};</p><p>FCKRealplayProcessor.RefreshView=function(A,B){<br> if (B.width>0) A.style.width=FCKTools.ConvertHtmlSizeToStyle(B.width);<br> if (B.height>0) A.style.height=FCKTools.ConvertHtmlSizeToStyle(B.height);<br>};<br>FCKDocumentProcessors.addItem(FCKRealplayProcessor);<br>// Realplay end<br>var FCKMediaProcessor=new Object();<br>FCKMediaProcessor.ProcessDocument=function(A)<br>{<br> var B=A.getElementsByTagName('EMBED');<br> var C;<br> var i=B.length-1;<br> while (i>=0&&(C=B[i--]))<br> {<br> if (C.src.endsWith('.avi',true) || C.src.endsWith('.mpg',true) || C.src.endsWith('.mpeg',true))<br> {<br> var D=FCKDocumentProcessors_CreateFakeImage('FCK__Media',C.cloneNode(true));<br> D.setAttribute('_fckmedia','true',0);FCKMediaProcessor.RefreshView(D,C);<br> C.parentNode.insertBefore(D,C);C.parentNode.removeChild(C);<br> };<br> };<br>};<br>FCKMediaProcessor.RefreshView=function(A,B)<br>{<br> if (B.width>0) A.style.width=FCKTools.ConvertHtmlSizeToStyle(B.width);<br> if (B.height>0) A.style.height=FCKTools.ConvertHtmlSizeToStyle(B.height);<br>};<br>FCKDocumentProcessors.addItem(FCKMediaProcessor);<br><br>然后修改FCK.GetRealElement方法为下面代码，该方法为处理编辑器中width和height的调整<br>FCK.GetRealElement=function(A){<br>var e=FCKTempBin.Elements[A.getAttribute('_fckrealelement')];</p><p>if (A.getAttribute('_fckflash')|| A.getAttribute('_fckrealplay') || A.getAttribute('_fckmedia')){<br> if (A.style.width.length>0) e.width=FCKTools.ConvertStyleSizeToHtml(A.style.width);<br> if (A.style.height.length>0) e.height=FCKTools.ConvertStyleSizeToHtml(A.style.height);<br>};<br>return e;};<br><br>----------<br>FCKeditor\editor\js\fckeditorcode_ie_2.js<br>FCKCommands.GetCommand方法增加<br>case 'Media':B=new FCKDialogCommand('Media',FCKLang.DlgMediaTitle,'dialog/fck_Media.html',450,400);<br>break;<br>case 'Realplay':B=new FCKDialogCommand('Realplay',FCKLang.DlgMediaTitle,'dialog/fck_Realplay.html',450,400);<br>break;<br><br>FCKToolbarItems.GetItem方法增加<br><br>case 'Media':B=new FCKToolbarButton('Media',FCKLang.InsertMediaLbl,FCKLang.InsertMedia);<br>break;<br>case 'Realplay':B=new FCKToolbarButton('Realplay',FCKLang.InsertRealplayLbl,FCKLang.InsertRealplay);<br>break;<br>FCKContextMenu._GetGroup方法增加<br>case 'Media':return new FCKContextMenuGroup(true,this,'Media',FCKLang.MediaProperties,true);<br>case 'Realplay':return new FCKContextMenuGroup(true,this,'Realplay',FCKLang.RealplayProperties,true); // truly<br><br>FCKContextMenu.RefreshState方法增加<br>if (this.Groups['Media']) this.Groups['Media'].SetVisible(B=='IMG'&&A.getAttribute('_fckmedia'));<br>if (this.Groups['Realplay']) this.Groups['Realplay'].SetVisible(B=='IMG'&&A.getAttribute('_fckrealplay'));<br><br><br>然后要增加'dialog/fck_Media.html'和'dialog/fck_Realplay.html'页面，具体我懒得再写了，自己到我的源码下载里看，我是在2。1的基础上改的，2.2要做一些调整！<br><br>fckconfig.js也有较多调整，但是这个文件非常简单，自己去看我的源码吧。<br>然后就是lang目录中对常量的定义，搜索一下就很容易得到，没什么可讲。<br><br>在然后就可以了，：）。<br><br><br><br>三、添加删除按钮列，类似sina的blog中的编辑控件<br><br>四、修改上传路径<br> 默认是根目录/UserFiles，有多种方式进行修改，先看一下它的源码：<br>protected string UserFilesPath<br>{<br> get<br> {<br> if ( sUserFilesPath == null )<br> {<br> // Try to get from the "Application".<br> sUserFilesPath = (string)Application["FCKeditor:UserFilesPath"] ;</p><p> // Try to get from the "Session".<br> if ( sUserFilesPath == null || sUserFilesPath.Length == 0 )<br> {<br> sUserFilesPath = (string)Session["FCKeditor:UserFilesPath"] ;<br><br> // Try to get from the Web.config file.<br> if ( sUserFilesPath == null || sUserFilesPath.Length == 0 )<br> {<br> sUserFilesPath = System.Configuration.ConfigurationSettings.AppSettings["FCKeditor:UserFilesPath"] ;<br><br> // Otherwise use the default value.<br> if ( sUserFilesPath == null || sUserFilesPath.Length == 0 ) <br> sUserFilesPath = DEFAULT_USER_FILES_PATH ;</p><p> // Try to get from the URL.<br> if ( sUserFilesPath == null || sUserFilesPath.Length == 0 ) <br> {<br> sUserFilesPath = Request.QueryString["ServerPath"] ;<br> }<br> }<br> }</p><p> // Check that the user path ends with slash ("/")<br> if ( ! sUserFilesPath.EndsWith("/") )<br> sUserFilesPath += "/" ;<br> }<br> return sUserFilesPath ;<br> }<br>}<br><br>由此，可以在Global里或者程序任意位置（加载fckeditor前可以运行到的位置）设置Application["FCKeditor:UserFilesPath"] ，或者Session，或者Webconfig,或者action中的请求参数等。<br><br><br>to be continued...<br><br><br>附：js版FCKEditor下载：<a href="http://prdownloads.sourceforge.net/fckeditor/FCKeditor_2.2.zip"><font color=#4371a6>http://prdownloads.sourceforge.net/fckeditor/FCKeditor_2.2.zip</font></a><br>.net版<br><a href="http://prdownloads.sourceforge.net/fckeditor/FCKeditor.Net_2.2.zip"><font color=#4371a6>http://prdownloads.sourceforge.net/fckeditor/FCKeditor.Net_2.2.zip</font></a><br>所有版本列表<br><a href="http://prdownloads.sourceforge.net/fckeditor"><font color=#4371a6>http://prdownloads.sourceforge.net/fckeditor</font></a><br></p></div><p>以上就是比较不错的修改FCKEditor的修改方法的详细内容，更多请关注0133技术站其它相关文章！</p></article><div class="post-actions"><a href="javascript:;" etap="like" class="post-like action action-like" data-pid="0"><i class="fa fa-thumbs-o-up"></i>赞(<span>0</span>)</a><a href="javascript:;" class="action action-rewards" data-event="rewards"><i class="fa fa-jpy"></i> 打赏</a></div><div class="post-copyright">未经允许不得转载：<a href="/">0133技术站首页</a> » <a href="/cate71/">前端开发</a></div><nav class="article-nav"><span class="article-nav-prev">上一篇<br><a href="/cate71/11215189253225.html" rel="prev">一个Javascript 编写的代码编辑器</a></span><span class="article-nav-next">下一篇<br><a href="/cate71/11215894936025.html" rel="next">eWebEditor_v280_Free_Final最好用的网页编辑器下载</a></span></nav><div class="relates relates-thumb"><div class="title"><h3>相关文章</h3></div><ul><li><a href="/cate71/1114760995025.html"><img data-src="https://ss.0133.cn/article/e9/d3/f0/e9d3f0b80837abb4f274425cb0fb5bd9.jpg-160" alt="Web移动端Fixed布局的解决方案" class="thumb"></a><a href="/cate71/1114760995025.html">Web移动端Fixed布局的解决方案</a></li><li><a href="/cate71/1114762210000.html"><img data-src="https://ss.0133.cn/article/e9/d3/f0/e9d3f0b80837abb4f274425cb0fb5bd9.jpg-160" alt="什么是web2.0?" class="thumb"></a><a href="/cate71/1114762210000.html">什么是web2.0?</a></li><li><a href="/cate71/1114763425025.html"><img data-src="https://ss.0133.cn/article/e9/d3/f0/e9d3f0b80837abb4f274425cb0fb5bd9.jpg-160" alt="web2.0色系" class="thumb"></a><a href="/cate71/1114763425025.html">web2.0色系</a></li><li><a href="/cate71/1114764640100.html"><img data-src="https://ss.0133.cn/article/1c/21/00/1c210098d3ccbf42e1bd797fd4420e6e.jpg-160" alt="web2.0中流行的设计元素:颜色" class="thumb"></a><a href="/cate71/1114764640100.html">web2.0中流行的设计元素:颜色</a></li><li><a href="/cate71/1114775578025.html"><img data-src="https://ss.0133.cn/article/df/b2/c9/dfb2c998ad09156c82ea7daf0c538554.jpg-160" alt="SyntaxHighlighter 去掉右侧滚动条的方法" class="thumb"></a><a href="/cate71/1114775578025.html">SyntaxHighlighter 去掉右侧滚动条的方法</a></li><li><a href="/cate71/1114776793600.html"><img data-src="https://ss.0133.cn/article/4b/fb/c0/4bfbc085e2bc113f45662c9384f6e89d.jpg-160" alt="js获取UEditor富文本编辑器中的图片地址" class="thumb"></a><a href="/cate71/1114776793600.html">js获取UEditor富文本编辑器中的图片地址</a></li><li><a href="/cate71/1114778009225.html"><img data-src="https://ss.0133.cn/article/4b/fb/c0/4bfbc085e2bc113f45662c9384f6e89d.jpg-160" alt="js获取富文本中的第一张图片(正则表达式)" class="thumb"></a><a href="/cate71/1114778009225.html">js获取富文本中的第一张图片(正则表达式)</a></li><li><a href="/cate71/1114779224900.html"><img data-src="https://ss.0133.cn/article/4b/fb/c0/4bfbc085e2bc113f45662c9384f6e89d.jpg-160" alt="使用Js获取、插入和更改FCKeditor编辑器里的内容" class="thumb"></a><a href="/cate71/1114779224900.html">使用Js获取、插入和更改FCKeditor编辑器里的内容</a></li></ul></div></div></div><div class="sidebar"><div class="widget widget_ui_tags"><h3>前端开发</h3><div class="items"><a href="/cate72/">HTML 教程</a><a href="/cate73/">CSS 教程</a><a href="/cate74/">JavaScript 教程</a><a href="/cate79/">Vue.js 教程</a><a href="/cate80/">Node.js 教程</a></div></div><form method="get" class="search-form clearfix" id="search-formhybrid-search" target="_blank" action="/search/article/"><div class="search-input-wrap"><input type="text" class="search-text" placeholder="来搜我" name="word" id="search-texthybrid-search" value="" data-placeholder=""><b class="search-liaosheji"></b><button type="submit" class="search-button"><i class="icon-search"></i></button></div></form><div style="text-align:center;margin:0 auto;"><ul class='hot-search layui-clear'><li style="float:left;margin-right:20px;">热门搜索：</li><li style="float:left;margin-right:20px;"><a href='/search/article/?word=比较不错的修改FCKEditor的修改方法'>比较不错的修改FCKEditor的修改方法</a></li><li style="float:left;margin-right:20px;"><a href='/search/article/?word=修改方法'>修改方法</a></li><li style="float:left;margin-right:20px;"><a href='/search/article/?word=FCKeditor的几点修改小结'>FCKeditor的几点修改小结</a></li><li style="float:left;margin-right:20px;"><a href='/search/article/?word=的设置.修改.使用方法'>的设置.修改.使用方法</a></li><li style="float:left;margin-right:20px;"><a href='/search/article/?word=无法修改'>无法修改</a></li></ul></div><br/><div class="widget widget_ui_posts"><h3>置顶推荐</h3><ul><li><a href="/cate99/113247636454400.html"><span class="thumbnail"><img data-src="https://ss.0133.cn/upload/article/000/000/001/61c030e32e4d9281.jpg" alt="qq火花是过了24小时断吗" class="thumb"></span><span class="text">qq火花是过了24小时断吗</span><span class="muted">2021-12-20</span></a></li></ul></div><div class="widget widget_recent_entries"><h3>猜你喜欢</h3><ul><li><a href="/cate71/1114868104225.html" target="_blank">html中插入wmv格式视频文件的代码</a><span class="post-date">2021-09-10</span></li><li><a href="/cate71/11509503262025.html" target="_blank">ckeditor 简单配置方法</a><span class="post-date">2021-10-08</span></li><li><a href="/cate71/119105487260900.html" target="_blank">WebRTC记录音视频流(web技术分享)</a><span class="post-date">2023-10-16</span></li><li><a href="/cate71/11508126568900.html" target="_blank">解决SyntaxHighlighter 代码高亮不换行问题的解决方法</a><span class="post-date">2021-10-07</span></li><li><a href="/cate71/11509567505600.html" target="_blank">Js FCKeditor的值获取和修改的代码小结</a><span class="post-date">2021-10-08</span></li><li><a href="/cate71/11508704125225.html" target="_blank">UEditor 编辑器跨域上传解决方法</a><span class="post-date">2021-10-07</span></li><li><a href="/cate71/11509810240100.html" target="_blank">fckediter javascript事件函数代码</a><span class="post-date">2021-10-08</span></li><li><a href="/cate71/11511010482500.html" target="_blank">整合ckeditor+ckfinder，解决上传文件路径问题</a><span class="post-date">2021-10-08</span></li></ul></div></div><div id="leftbar" class="leftbar"><div class="leftbar-con"><div style="text-align: center; width: 160px;"></div></div></div></section><footer class="footer"><div class="container"><p>© 2022 <a href="/">WEB前端开发</a></p><p><a href="/cate88/">工具教程</a> | <a href="/cate71/">前端开发</a> | <a href="/cate61/">常见问题</a> | <a href="/cate129/">操作系统</a> | <a href="/cate103/">编程</a> | <a href="/cate108/">网络安全</a> | <a href="/cate120/">设计</a> | <a href="/cate137/">站长技巧</a></p><div class="footer-gav" style="margin-bottom: 10px ;font-size: 12px;"><img src="https://ss.0133.cn/newimg88/2016/06/beian-gov-cn.png" style="vertical-align: middle; height: 14px;"/><a href="https://beian.miit.gov.cn/" target="_blank">鄂ICP备2021014202号-2</a></div><div class="footer-qrcode"></div></div></footer><script> window.jsui = { www: '', uri: '/wp-content/themes/dux', ver: '5.2.5', roll: ["1", "2"], ajaxpager: '0', url_rp: '/about' }; </script><script type='text/javascript' src='/wp-content/themes/dux/js/libs/bootstrap.min.js?ver=5.2.5'></script><script type='text/javascript' src='/wp-content/themes/dux/js/loader.js?ver=5.2.5'></script><script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=5.0.2'></script><script async="async" type='text/javascript' src='/wp-content/plugins/akismet/_inc/form.js?ver=4.0.8'></script><script type="text/javascript"> var $win = jQuery(window); var $WindowW = $win.width(); var $threebar = jQuery("#leftbar"); if ($threebar.length) { var offsetT = $threebar.offset().top; $win.on("scroll.leftbar", function () { if ($WindowW >= 1200) { if ($win.scrollTop() >= (offsetT)) { $threebar.find(".leftbar-con").css({ "position": "fixed", "top": 0 }); } else { $threebar.find(".leftbar-con").css("position", "static") } } }); } // Array var imagesArr = []; $('#article-content').find("img").each(function (index, Element) { imagesArr.push(Element) }); mediumZoom(imagesArr, { margin: 24, background: '#FFFFFF', scrollOffset: 0 }) </script><script> (function (i, s, o, g, r, a, m) { i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () { (i[r].q = i[r].q || []).push(arguments) }, i[r].l = 1 * new Date(); a = s.createElement(o), m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m) })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga'); ga('create', 'UA-3448069-1', 'css88.com'); ga('send', 'pageview'); </script><script> var _hmt = _hmt || []; (function () { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?08985692e4db1e8be1cff8097c2979b7"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script><script> (function () { var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script></body></html>