Ueditor設置默認字體、字號、行間距，添加字體種類（轉）
Ueditor默認字體、字號、行間距的修改：
ueditor默認字號是16號，默認字體為sans-serif，默認行間距為5px，如下圖所示：
首先，修改ueditor.all.js文件中如上圖紅框中對應的字體、字號、行間距的值；
其次，ueditor.all.min.js文件為ueditor.all.js的壓縮版，需要一並修改其中對應的字體、字號、行間距的值，如下圖所示：
字體種類的添加：
ueditor編輯器默認只提供了11中字體，而實際的應用中，這些字體還是太少，無法滿足各種需求，所以需要進行字體種類的添加，
具體需要同步修改三個文件：ueditor.config.js、zh-cn.js、en.js，在fontfamily處添加需要的字體類型即可，操作如下：
項目需求，要求在Ueditor中，不勾選任何樣式編輯的情況下，存入數據庫中的是微軟雅黑的字體，目前問題是存入數據庫的只有<p>標簽。
經過上網查看，很多都說是修改ue的配置文件 ueditor.all.js 大概第6904行：
這麽設置確實在ue的編輯頁面，顯示成為默認的字體了，但是提交後臺保存時，並沒有將改樣式保存至數據庫中，經過對比發現，點擊編輯區域更改後的字體樣式，是直接在<p>中標註<span>標簽（如下圖1），而我們設置好的字體，是寫在樣式表中的（如下圖2），ue在提交後臺保存時，只提交了<p>標簽，樣式信息被過濾。
圖1：
圖2：
怎麽解決呢？當然還是api靠譜啦！
只需要在編輯器初始化的時候加幾句話就好了：
- var editor=UE.getEditor(‘editor‘);
- editor.ready(function(){
- editor.execCommand(‘fontfamily‘,‘微軟雅黑‘); //字體
- editor.execCommand(‘lineheight‘, 2); //行間距
- editor.execCommand(‘fontsize‘, ‘14px‘); //字號
- });
ueditor使用小結
一、簡介
ueditor是百度編輯器，官網地址：http://ueditor.baidu.com/website/
完整的功能演示，可以參考：http://ueditor.baidu.com/website/onlinedemo.html
為了方便開發學習，我們下載它的完整版和.net版。
ueditor_release_ueditor1_4_3_1-src.zip
ueditor_release_ueditor1_4_3_1-gbk-net.zip
二、如何引入ueditor編輯器
下載包的index.html是編輯器示例，主要幾處代碼如下：
<head>
……
<!--編輯器基本配置-->
<script type="text/javascript" charset="gbk" src="ueditor.config.js"></ script>
<!--編輯器完整代碼-->
<script type="text/javascript" charset="gbk" src="ueditor.all.js"> </script >
……
</head>
<body>
<div>
<script id="editor" type="text/plain"></ script>
</div>
<script type="text/javascript">
//實例化編輯器
var ue = UE.getEditor( ‘editor‘, {
autoHeightEnabled: true,
autoFloatEnabled: true,
initialFrameWidth: 690,
initialFrameHeight:483
});
</script>
三、如何調整ueditor工具欄
ueditor功能強大，但是有些功能我們是用不到的，可以在ueditor.config.js中配置。搜索"toolbars"找到工具欄配置項，刪掉不必要的功能就可以了。
,toolbars: [[
‘undo‘, ‘redo‘ , ‘|‘,
‘bold‘, ‘forecolor‘ , ‘removeformat‘, ‘autotypeset‘, ‘pasteplain‘ , ‘|‘, ‘|‘,
‘justifyleft‘, ‘justifycenter‘ , ‘|‘,
‘link‘, ‘unlink‘ , ‘|‘,
‘insertimage‘, ‘insertvideo‘ , ‘|‘,
‘wordimage‘, ‘|‘ ,
‘inserttable‘, ‘insertrow‘ , ‘deleterow‘, ‘insertcol‘, ‘deletecol‘ , ‘mergecells‘, ‘splittocells‘, ‘|‘ , ‘mybtn1‘,‘mydialog1‘
]]
四、如何修改ueditor默認樣式
如果想修改編輯器默認的字體等，可以找打開ueditor.all.js，搜索editor.js中的"render:"方法，修改以下部分：
var html = ( ie && browser.version < 9 ? ‘‘ : ‘<!DOCTYPE html>‘) +
‘<html xmlns=\‘http://www.w3.org/1999/xhtml\‘ class=\‘view\‘ ><head>‘ +
‘<style type=\‘text/css\‘>‘ +
//設置四周的留邊
‘.view{padding:0;word-wrap:break-word;cursor:text;height:90%;}\n‘ +
//設置默認字體和字號
//font-family不能呢隨便改，在safari下fillchar會有解析問題
‘body{margin:8px;font-family:sans-serif;font-size:16px;}‘ +
//設置段落間距
‘p{margin:5px 0;}</style>‘ +
( options.iframeCssUrl ? ‘<link rel=\‘stylesheet\‘ type=\‘text/css\‘ href=\‘‘ + utils.unhtml(options.iframeCssUrl) + ‘\‘/>‘ : ‘‘ ) +
(options.initialStyle ? ‘<style>‘ + options.initialStyle + ‘</style>‘ : ‘‘) +
‘</head><body class=\‘view\‘ ></body>‘ +
‘<script type=\‘text/javascript\‘ ‘ + (ie ? ‘defer=\‘defer\‘‘ : ‘‘ ) +‘ id=\‘_initialScript\‘>‘ +
‘setTimeout(function(){editor = window.parent.UE.instants[\‘ueditorInstant‘ + me.uid + ‘\‘];editor._setup(document);},0);‘ +
‘var _tmpScript = document.getElementById(\‘_initialScript\‘);_tmpScript.parentNode.removeChild(_tmpScript);</script></html>‘;
五、ueditor上傳圖片插入正文後如何默認居中
修改\dialogs\image\image.js文件的initAlign()和setAlign方法。
六、ueditor如何自定義工具欄按鈕
如果現有的功能不能滿足需求，我們想在工具欄上新增一個自定義按鈕，該如何實現呢？
1.首先修改ueditor.config.js，為toolbars添加‘mybtn1‘;
,toolbars: [[
‘undo‘, ‘redo‘ , ‘|‘,
‘bold‘, ‘forecolor‘ , ‘removeformat‘, ‘autotypeset‘, ‘pasteplain‘ , ‘|‘, ‘|‘,
‘justifyleft‘, ‘justifycenter‘ , ‘|‘,
‘link‘, ‘unlink‘ , ‘|‘,
‘insertimage‘, ‘insertvideo‘ , ‘|‘,
‘wordimage‘, ‘|‘ ,
‘inserttable‘, ‘insertrow‘ , ‘deleterow‘, ‘insertcol‘, ‘deletecol‘ , ‘mergecells‘, ‘splittocells‘, ‘|‘ , ‘mybtn1‘
]]
2.然後修改ueditor.all.js，找到變量btnCmds，添加‘mybtn1‘;
var btnCmds = [‘undo‘ , ‘redo‘, ‘formatmatch‘,
‘bold‘, ‘italic‘ , ‘underline‘, ‘fontborder‘, ‘touppercase‘ , ‘tolowercase‘,
‘strikethrough‘, ‘subscript‘ , ‘superscript‘, ‘source‘, ‘indent‘ , ‘outdent‘,
‘blockquote‘, ‘pasteplain‘ , ‘pagebreak‘,
‘selectall‘, ‘print‘ ,‘horizontal‘, ‘removeformat‘, ‘time‘ , ‘date‘, ‘unlink‘,
‘insertparagraphbeforetable‘, ‘insertrow‘ , ‘insertcol‘, ‘mergeright‘, ‘mergedown‘ , ‘deleterow‘,
‘deletecol‘, ‘splittorows‘ , ‘splittocols‘, ‘splittocells‘, ‘mergecells‘ , ‘deletetable‘, ‘drafts‘, ‘mybtn1‘ ];
3.最後在ueditor.all.js，新增mybtn1命令執行的代碼：
UE.commands[‘mybtn1‘] = {
execCommand: function (cmdName, align) {
var range = this .selection.getRange();
this.execCommand(‘inserthtml‘ , ‘<p>click mybtn1</p>‘);
return true ;
}
};
這樣就完成了對工具欄功能的擴展。
七 ueditor如何自動抓取遠程圖片
如果想實現粘貼網頁時，直接將其中的圖片上傳到自己的圖片服務器，該怎麽做呢？這其中主要用到的js是plugins/catchremoteimage.js。
首先設置編輯器選項：catchRemoteImageEnable：true。這樣便開啟了自動抓取圖片的功能。
如果想自定義圖片上傳方式，而不用ueditor默認的圖片上傳地址，那麽需要修改catchremoteimage.js這裏：
把這裏的url改成自定義的ashx文件地址即可。
八 ueditor上傳圖片窗口，如何實現選擇圖片後自動上傳
上傳圖片窗口操作需要先選擇圖片，點擊“開始上傳”，然後插入圖片。操作過程略顯繁瑣，其實可以去掉“開始上傳”，在選中圖片後自動上傳。
首先找到dialogs/image/image.html,隱藏image.html的“開始上傳”按鈕。
然後修改dialogs/image/image.js文件，找到addFile方法，然後在方法結尾添加以下代碼：
function addFile(file) {
……
//自動上傳
clickUpload = function () {
$upload.click();
}
setTimeout("clickUpload()", 200);
}
代碼示例：https://github.com/cathychen00/ueditor1
Ueditor設置默認字體、字號、行間距，添加字體種類（轉）