Ueditor和CKeditor 兩款編輯器的使用與配置方法
一丶ueditor 百度編輯器
1.官方文檔,演示,下載地址:http://ueditor.baidu.com/website/index.html
2.百度編輯器的好:Editor是由百度web前端研發(fā)部開(kāi)發(fā)所見(jiàn)即所得富文本web編輯器,具有輕量,可定制,注重用戶(hù)體驗(yàn)等特點(diǎn)。
3.如果想定制你想要的編輯器功能:查看官方網(wǎng)站的下載頁(yè)面即可。
4.編輯器展示:
5.百度編輯器配置。
1.載入js,css文件
<script src="ueditor/editor_config.js" type="text/javascript"></script> <script src="ueditor/editor_all.js" type="text/javascript"></script> <link href="ueditor/themes/default/ueditor.css" rel="external nofollow" rel="stylesheet" type="text/css" />
2.頁(yè)面配置
<div id="myEditor"></div> //可以是aspx控件 只要id正確即可 <script type="text/javascript"> var ue = new baidu.editor.ui.Editor(); ue.render("myEditor"); //這里填寫(xiě)要改變?yōu)榫庉嬈鞯目丶d </script>
3.editor_config.js 文件中的路徑配置
var tmp = window.location.pathname; URL = window.UEDITOR_HOME_URL || "/SomePackage/Ueditor/ueditor/"; //這里你可以配置成ueditor目錄在您網(wǎng)站的相對(duì)路徑或者絕對(duì)路徑(指以http開(kāi)頭的絕對(duì)路徑)
4.如果你要使用傳圖片功能,還需要修改net文件下的幾個(gè)文件截圖說(shuō)明吧(這個(gè)路徑可以直接刪除的,試試。不行了自己再調(diào)整下
改為-->
同理將net文件下其它文件類(lèi)似的錯(cuò)誤更正后即可上傳圖片。
圖片上傳默認(rèn)位置為:net文件夾下。上傳一張打開(kāi)即可發(fā)現(xiàn)一個(gè)upload文件夾。
5.ueditor 的很多默認(rèn)配置都在 editor_config.js這個(gè)文件中,細(xì)心看的話,開(kāi)啟或關(guān)閉其中的配置是可以解決很多問(wèn)題的。
6.我在使用過(guò)程中還遇到過(guò)編輯器內(nèi)容影響整體頁(yè)面的布局問(wèn)題,這問(wèn)題是在editor_all.js這個(gè)文件中修改的默認(rèn)樣式問(wèn)題的。
/** * 渲染編輯器的DOM到指定容器,必須且只能調(diào)用一次 * @public * @function * @param {Element|String} container */ render:function ( container ) { var me = this, options = me.options; if ( container.constructor === String ) { container = document.getElementById( container ); } if ( container ) { var useBodyAsViewport = ie && browser.version < 9, html = ( ie && browser.version < 9 ? '' : '<!DOCTYPE html>') + '<html xmlns=\'http://www.w3.org/1999/xhtml\'' + (!useBodyAsViewport ? ' class=\'view\'' : '') + '><head>' + ( options.iframeCssUrl ? '<link rel=\'stylesheet\' type=\'text/css\' href=\'' + utils.unhtml( options.iframeCssUrl ) + '\'/>' : '' ) + '<style type=\'text/css\'>' + //這些默認(rèn)屬性不能夠讓用戶(hù)改變 //選中的td上的樣式 '.selectTdClass{background-color:#3399FF !important;}' + 'table.noBorderTable td{border:1px dashed #ddd !important}' + //插入的表格的默認(rèn)樣式 'table{clear:both;margin-bottom:10px;border-collapse:collapse;word-break:break-all;}' + //分頁(yè)符的樣式 '.pagebreak{display:block;clear:both !important;cursor:default !important;width: 100% !important;margin:0;}' + //錨點(diǎn)的樣式,注意這里背景圖的路徑 '.anchorclass{background: url(\'' + me.options.UEDITOR_HOME_URL + 'themes/default/images/anchor.gif\') no-repeat scroll left center transparent;border: 1px dotted #0000FF;cursor: auto;display: inline-block;height: 16px;width: 15px;}' + //設(shè)置四周的留邊 '.view{padding:0;word-wrap:break-word;cursor:text;height:100%;}\n' + //設(shè)置默認(rèn)字體和字號(hào) 'body{margin:8px;font-family:\'宋體\';font-size:16px;}' + //針對(duì)li的處理 'li{clear:both}' + //設(shè)置段落間距 'p{margin:5px 0;}' + ( options.initialStyle || '' ) + '</style></head><body' + (useBodyAsViewport ? ' class=\'view\'' : '') + '></body>';
最后對(duì)這個(gè)編輯器總結(jié)下:很好用的,代碼很容易讀懂,便于修改配置為自己喜歡的想要的。
二丶CKEditor丶CKFinder 國(guó)外知名編輯器
1.官方文檔,演示,下載地址:http://ckeditor.com/download 丶 http://ckfinder.com/download
2.百度編輯器的好:是一個(gè)專(zhuān)門(mén)使用在網(wǎng)頁(yè)上屬于開(kāi)放源代碼的所見(jiàn)即所得文字編輯器。它志于輕量化,不需要太復(fù)雜的安裝步驟即可使用。
3.編輯器展示:
4.配置步驟以及一些常用配置
1.引入<script src="ckeditor/ckeditor.js" type="text/javascript"></script>
2.頁(yè)面代碼
<!--第一個(gè)---> <textarea id="TextArea1" cols="20" rows="2" class="ckeditor"></textarea> <!--第二個(gè)---> <div id="editorSpace"></div> <!--直接設(shè)置class好像也行的可以試試---> <script type="text/javascript"> CKEDITOR.appendTo('editorSpace'); </script>
3.配置ckeditor的一些常用配置,在config.js這個(gè)文件中,所有的屬性配置都可以查閱官方的API:http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html
4.列出一些常用的屬性配置:
CKEDITOR.editorConfig = function( config ) { // Define changes to default configuration here. For example: // config.language = 'fr'; // config.uiColor = '#AADC6E'; //config.width=700; //config.height=400; //config.skin='v2'; //自帶皮膚種類(lèi)有3種:Kama(默認(rèn)) , Office 2003 , v2 //config.font_names = '宋體;楷體 _GB2312;新宋體;黑體;隸書(shū);幼圓;微軟雅黑;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana'; //如果上傳圖片或者flash則需要,下面配置ckfinder var ckfinderPath = "/SomePackage/FCKeditor/ckfinder"; //配置為絕對(duì)路徑 config.filebrowserBrowseUrl = ckfinderPath + "/ckfinder.html"; config.filebrowserImageBrowseUrl = ckfinderPath + "/ckfinder.html?Type=Image"; config.filebrowserFlashBrowseUrl = ckfinderPath + "/ckfinder.html?Type=Flash"; config.filebrowserUploadUrl = ckfinderPath + "/core/connector/aspx/connector.aspx?command=QuickUpload&Type=Files"; config.filebrowserImageUploadUrl = ckfinderPath + "/core/connector/aspx/connector.aspx?command=QuickUpload&Type=Images"; config.filebrowserFlashUploadUrl = ckfinderPath + "/core/connector/aspx/connector.aspx?command=QuickUpload&Type=Flash"; };
5.如果上傳圖片則需在項(xiàng)目中添加ckfinder文件
6.第四步為配置上傳圖片的第一步
7.改變ckfinder文件夾下的config.ascx,內(nèi)容如下:
public override bool CheckAuthentication() { //object str = session["username"]; //if (str != null & Convert.ToBoolean(str) == true) //{ // return true; //} return true; //不建議直接返回true,最好做下用戶(hù)驗(yàn)證判斷在返回true(安全),上面為驗(yàn)證的一個(gè)實(shí)例 }
8.這樣就行了,由于ckfinder不是免費(fèi)的,所以默認(rèn)情況下會(huì)在上傳頁(yè)面中有紅色的廣告提示,雖然不影響使用,但總是覺(jué)得不爽。
9.去除廣告方法:找到ckfinder/core/js/ckfinder_ie.js
及ckfinder_gecko.js
,將其中的 en.call(window,qo);
去掉
最后對(duì)這個(gè)編輯器總結(jié)下:很強(qiáng)大,很好用。世界各地都在用的。
相關(guān)文章
頁(yè)面嵌入Windows Media Player播放器代碼需要注意的
在頁(yè)面中插入WMP確實(shí)是個(gè)令人頭疼的一件事。這里簡(jiǎn)單的說(shuō)明下,希望對(duì)需要朋友有所幫助。2010-07-07asp.net 為FCKeditor開(kāi)發(fā)代碼高亮插件實(shí)現(xiàn)代碼
昨天已經(jīng)將BlogEngine的可視化編輯器換成了FCKeditor,作為一個(gè)程序員,在博客中插入代碼是很重要的一塊。網(wǎng)上現(xiàn)有的都是修改FCKeditor的fckeditorcode_gecko.js和fckeditorcode_ie.js以達(dá)到InsertCode的目的。這個(gè)方法非常麻煩,當(dāng)要使用FCKeditor新版本時(shí)都要重新修改這兩個(gè)文件,非常影響我們的效率。2008-08-08FCKeditor 2.6 編碼錯(cuò)誤導(dǎo)致修改的內(nèi)容出現(xiàn)亂碼的解決方法
我修改了該文件,其中有些中文字,在 IE 中打開(kāi)之,發(fā)現(xiàn)是亂碼,原來(lái)這個(gè)文件有問(wèn)題。文件中指定了 charset 為 utf-82010-03-03eWebEditor 請(qǐng)選擇一個(gè)有效的文件的解決方法
解決eWebEditor上傳圖片提示 請(qǐng)選擇一個(gè)有效的文件2010-04-04在kindEditor中獲取當(dāng)前光標(biāo)的位置索引的實(shí)現(xiàn)代碼
一直在用KindEditor,今天要用到光標(biāo)的位置,然后就gg一下辦法,后來(lái)發(fā)現(xiàn)這東西的編輯區(qū)域居然是iframe里面的一個(gè)body,不是textarea/input,后來(lái)就翻開(kāi)了他的代碼看,發(fā)現(xiàn)有個(gè)insertHtml2011-11-11百度ueditor組件上傳圖片后如何設(shè)置img里的alt屬性
百度ueditor組件,使用上傳圖片后,設(shè)置了一個(gè)alt屬性,其值是上傳圖片時(shí)的本地路徑,如果想更改的話可以參考下面的解決方法2014-09-09百度編輯器 ueditor 內(nèi)容編輯自動(dòng)套P標(biāo)簽,及p標(biāo)簽 替換
這篇文章主要介紹了百度編輯器 ueditor 內(nèi)容編輯自動(dòng)套P標(biāo)簽,及p標(biāo)簽 替換,需要的朋友可以參考下2017-03-03