ueditor是百度編輯器，官網(wǎng)地址：http://ueditor.baidu.com/website/
完整的功能演示，可以參考：http://ueditor.baidu.com/website/onlinedemo.html
為了方便開發(fā)學習，我們下載它的完整版和.net版。
ueditor_release_ueditor1_4_3_1-src.zip
ueditor_release_ueditor1_4_3_1-gbk-net.zip
下載包的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如何自定義工具欄按鈕
如果現(xiàn)有的功能不能滿足需求，我們想在工具欄上新增一個自定義按鈕，該如何實現(xiàn)呢？
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',
新聞熱點
疑難解答
