ueditor編輯器使用總結

時間 2019-11-09

標籤 ueditor 編輯器使用總結简体版

原文原文鏈接

ueditor使用小結

1、簡介

ueditor是百度編輯器，官網地址：http://ueditor.baidu.com/website/javascript

完整的功能演示，能夠參考：http://ueditor.baidu.com/website/onlinedemo.htmlcss

爲了方便開發學習，咱們下載它的完整版和.net版。html

ueditor_release_ueditor1_4_3_1-src.zipjava

ueditor_release_ueditor1_4_3_1-gbk-net.zipgit

2、如何引入ueditor編輯器

下載包的index.html是編輯器示例，主要幾處代碼以下：github

<head>web

   ……服務器

編輯器

<script type="text/javascript" charset="gbk" src="ueditor.config.js"></ script>ide



<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>

3、如何調整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'

]]

4、如何修改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>';

5、ueditor上傳圖片插入正文後如何默認居中

修改\dialogs\image\image.js文件的initAlign()和setAlign方法。

6、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

做者：陳敬(Cathy)
出處：http://www.cnblogs.com/janes/p/5072496.html

博客文章僅供交流學習，請勿用於商業用途。如需轉載，請務必註明出處。