【轉載】UEditor前端配置項說明

魔豆發表於2016-11-01

UEditor 的配置項分為兩類:前端配置項 和 後端配置項

後端配置項具體看這個文件L:後端配置項說明

本文件介紹如何通過設定前端配置項,定製編輯器的特性,配置方法主要通過修改ueditor.config.js,另外在編輯器例項化的時候也可以傳入配置引數

var ue = UE.getEditor('container', {
    toolbars: [
        ['fullscreen', 'source', 'undo', 'redo', 'bold']
    ],
    autoHeightEnabled: true,
    autoFloatEnabled: true
});

 

讀取配置項

讀取配置項可以通過getOpt方法讀取

var lang = ue.getOpt('lang'); //預設返回:zh-cn

 

前端配置項說明

以下的"URL"是ueditor.config.js檔案所在目錄

  • UEDITOR_HOME_URL {Path String} [預設值:根據config檔案路徑自動獲取] // 為編輯器例項新增一個路徑,這個不能被註釋

  • serverUrl {Path String} [預設值:URL + "php/controller.php"] // 伺服器統一請求介面路徑

  • toolbars {2d Array} //工具欄上的所有的功能按鈕和下拉框,可以在new編輯器的例項時選擇自己需要的從新定義

  • labelMap {Object} [預設:從lang包的labelMap項獲取] //引數格式是鍵值對,鍵名對應toolbar引數的項:{"bold": "加粗"} ],當滑鼠放在工具欄上時顯示的tooltip提示,留空支援自動多語言配置,否則以配置值為準

  • lang {String} [預設值:"zh-cn"] //lang值也可以通過自動獲取 (navigator.language||navigator.browserLanguage ||navigator.userLanguage).toLowerCase(),語言配置項,預設是zh-cn。有需要的話也可以使用如下這樣的方式來自動多語言切換,當然,前提條件是lang資料夾下存在對應的語言檔案:

  • langPath {Path String} [預設值:URL +"lang/"] //語言包檔案存放目錄

  • theme {String} [預設值:'default'] //主題配置項,預設是default。有需要的話也可以使用如下這樣的方式來自動多主題切換,當然,前提條件是themes資料夾下存在對應的主題檔案:

  • themePath {Path String} [預設值:URL +"themes/"] //現有如下皮膚:default

  • zIndex {Number} [預設值:900] //編輯器在頁面上的z-index層級的基數,預設是900

  • charset {String} [預設值:"utf-8"] //針對getAllHtml方法,會在對應的head標籤中增加該編碼設定。

  • customDomain {Boolean} [預設值:false] //若例項化編輯器的頁面手動修改的domain,此處需要設定為true

  • isShow {Boolean} [預設值:true] //預設顯示編輯器

  • textarea {String} [預設值:'editorValue'] // 提交表單時,伺服器獲取編輯器提交內容的所用的引數,多例項時可以給容器name屬性,會將name給定的值最為每個例項的鍵值,不用每次例項化的時候都設定這個值

  • initialContent {String} [預設值:'歡迎使用ueditor!'] //初始化編輯器的內容,也可以通過textarea/script給值,看官網例子

  • autoClearinitialContent {Boolean} [預設值:true] //是否自動清除編輯器初始內容,注意:如果focus屬性設定為true,這個也為真,那麼編輯器一上來就會觸發導致初始化的內容看不到了

  • focus {Boolean} [預設值:false] //初始化時,是否讓編輯器獲得焦點true或false

  • initialStyle {String} [預設值:'p{line-height:1em}']//編輯器層級的基數,可以用來改變字型等 //如果自定義,最好給p標籤如下的行高,要不輸入中文時,會有跳動感

  • iframeCssUrl {Path String} [預設值:URL + '/themes/iframe.css'] //給編輯器內部引入一個css檔案

  • indentValue {String} [預設值:'2em'] //首行縮排距離,預設是2em

  • initialFrameWidth {Number} [預設值:1000] //初始化編輯器寬度,預設1000

  • initialFrameHeight {Number} [預設值:320] //初始化編輯器高度,預設320

  • readonly {Boolean} [預設值:false] //編輯器初始化結束後,編輯區域是否是隻讀的,預設是false

  • autoClearEmptyNode {Boolean} [預設值:true] //getContent時,是否刪除空的inlineElement節點(包括巢狀的情況)

  • enableAutoSave {Boolean} [預設值:true] //啟用自動儲存

  • saveInterval {Number} [預設值:500] //自動儲存間隔時間,單位ms

  • imageScaleEnabled {Boolean} [預設值:true] //啟用圖片拉伸縮放

  • fullscreen {Boolean} [預設值:false] //是否開啟初始化時即全屏,預設關閉

  • imagePopup {Boolean} [預設值:true] //圖片操作的浮層開關,預設開啟

  • autoSyncData {Boolean} [預設值:true] //自動同步編輯器要提交的資料

  • emotionLocalization {Boolean} [預設值:false] //是否開啟表情本地化,預設關閉。若要開啟請確保emotion資料夾下包含官網提供的images表情資料夾

  • retainOnlyLabelPasted {Boolean} [預設值:false] //貼上只保留標籤,去除標籤所有屬性

  • pasteplain {Boolean} [預設值:false] //是否預設為純文字貼上。false為不使用純文字貼上,true為使用純文字貼上

  • filterTxtRules {Object} //純文字貼上模式下的過濾規則

    //預設值:
    function() {
        function transP(node) {
            node.tagName = 'p';
            node.setStyle();
        }
        return {
            //直接刪除及其位元組點內容
            '-': 'script style object iframe embed input select',
            'p': {
                $: {}
            },
            'br': {
                $: {}
            },
            'div': {
                '$': {}
            },
            'li': {
                '$': {}
            },
            'caption': transP,
            'th': transP,
            'tr': transP,
            'h1': transP,
            'h2': transP,
            'h3': transP,
            'h4': transP,
            'h5': transP,
            'h6': transP,
            'td': function(node) {
                //沒有內容的td直接刪掉
                var txt = !! node.innerText();
                if (txt) {
                    node.parentNode.insertAfter(UE.uNode.createText('    '), node);
                }
                node.parentNode.removeChild(node, node.innerText())
            }
        }
    }()

     

  • allHtmlEnabled [預設值:false] //提交到後臺的資料是否包含整個html字串

  • insertorderedlist //有序列表的下拉配置,值留空時支援多語言自動識別,若配置值,則以此值為準

    //預設值:
    {
    //自定的樣式
    'num': '1,2,3...',
    'num1': '1),2),3)...',
    'num2': '(1),(2),(3)...',
    'cn': '一,二,三....',
    'cn1': '一),二),三)....',
    'cn2': '(一),(二),(三)....',
    //系統自帶
    'decimal': '' , '1,2,3...'
    'lower-alpha': '' , // 'a,b,c...'
    'lower-roman': '' , //'i,ii,iii...'
    'upper-alpha': '' , //'A,B,C'
    'upper-roman': '' //'I,II,III...'
    }

     

  • insertunorderedlist //無序列表的下拉配置,值留空時支援多語言自動識別,若配置值,則以此值為準

    { //自定的樣式
        'dash': '— 破折號', //-破折號
        'dot': ' 。 小圓圈', //系統自帶
        'circle': '', // '○ 小圓圈'
        'disc': '', // '● 小圓點'
        'square': '' //'■ 小方塊'
    }]
    `

     

  • listDefaultPaddingLeft [預設值:'30'//預設的左邊縮排的基數倍

  • listiconpath [預設值:'http://bs.baidu.com/listicon/']//自定義標號的路徑
  • maxListLevel [預設值:3] //限制可以tab的級數, 設定-1為不限制

  • autoTransWordToList [預設值:false] //禁止word中貼上進來的列表自動變成列表標籤

  • fontfamily //字型設定 label留空支援多語言自動切換,若配置,則以配置值為準

    //預設值:
    [{
        label: '',
        name: 'songti',
        val: '宋體,SimSun'
    }, {
        label: '',
        name: 'kaiti',
        val: '楷體,楷體_GB2312, SimKai'
    }, {
        label: '',
        name: 'yahei',
        val: '微軟雅黑,Microsoft YaHei'
    }, {
        label: '',
        name: 'heiti',
        val: '黑體, SimHei'
    }, {
        label: '',
        name: 'lishu',
        val: '隸書, SimLi'
    }, {
        label: '',
        name: 'andaleMono',
        val: 'andale mono'
    }, {
        label: '',
        name: 'arial',
        val: 'arial, helvetica,sans-serif'
    }, {
        label: '',
        name: 'arialBlack',
        val: 'arial black,avant garde'
    }, {
        label: '',
        name: 'comicSansMs',
        val: 'comic sans ms'
    }, {
        label: '',
        name: 'impact',
        val: 'impact,chicago'
    }, {
        label: '',
        name: 'timesNewRoman',
        val: 'times new roman'
    }]

     

  • fontsize {Array} //字號

    //預設值:
    [10, 11, 12, 14, 16, 18, 20, 24, 36]

     

  • paragraph {Object} //段落格式 值留空時支援多語言自動識別,若配置,則以配置值為準

    //預設值:
    {
        'p': '',
        'h1': '',
        'h2': '',
        'h3': '',
        'h4': '',
        'h5': '',
        'h6': ''
    }

     

  • rowspacingtop {Array} //段間距 值和顯示的名字相同

    //預設值:
    ['5', '10', '15', '20', '25']

     

  • rowspacingbottom //段間距 值和顯示的名字相同

    //預設值:
    ['5', '10', '15', '20', '25']

     

  • lineheight [預設值:['1', '1.5','1.75','2', '3', '4', '5'] ] //行內間距 值和顯示的名字相同

  • customstyle [Array] //自定義樣式,不支援國際化,此處配置值即可最後顯示值block的元素是依據設定段落的邏輯設定的,inline的元素依據BIU的邏輯設定,儘量使用一些常用的標籤

    //預設值:
    [{
            tag: 'h1', //tag 使用的標籤名字
            name: 'tc', //
            label: '', //label 顯示的名字也是用來標識不同型別的識別符號,注意這個值每個要不同
            style: 'border-bottom:#ccc 2px solid;padding:0 4px 0 0;text-align:center;margin:0 0 20px 0;' //style 新增的樣式
        }, //每一個物件就是一個自定義的樣式
        {
            tag: 'h1',
            name: 'tl',
            label: '',
            style: 'border-bottom:#ccc 2px solid;padding:0 4px 0 0;margin:0 0 10px 0;'
        }, {
            tag: 'span',
            name: 'im',
            label: '',
            style: 'font-style:italic;font-weight:bold'
        }, {
            tag: 'span',
            name: 'hi',
            label: '',
            style: 'font-style:italic;font-weight:bold;color:rgb(51, 153, 204)'
        }
    ]

     

  • enableContextMenu {Boolean} [預設值:true] //開啟右鍵選單功能

  • contextMenu {Object} //右鍵選單的內容,可以參考plugins/contextmenu.js裡邊的預設選單的例子,label留空支援國際化,否則以此配置為準

    //預設值:
    [{
        label: '', //顯示的名稱
        cmdName: 'selectall', //執行的command命令,當點選這個右鍵選單時
        exec: function() { //exec可選,有了exec就會在點選時執行這個function,優先順序高於cmdName
            //this是當前編輯器的例項
            //this.ui._dialogs['inserttableDialog'].open();
        }
    }]

     

  • shortcutMenu {Array} //快捷選單

    //預設值
    ["fontfamily", "fontsize", "bold", "italic", "underline", "forecolor", "backcolor", "insertorderedlist", "insertunorderedlist"]

     

  • elementPathEnabled {Boolean} [預設值:true] //是否啟用元素路徑,預設是顯示

  • wordCount {Boolean} [預設值:true] //是否開啟字數統計

  • maximumWords {Number} [預設值:10000] //允許的最大字元數
  • wordCountMsg {String} [預設值:] //當前已輸入 {#count} 個字元,您還可以輸入{#leave} 個字元,字數統計提示,{#count}代表當前字數,{#leave}代表還可以輸入多少字元數,留空支援多語言自動切換,否則按此配置顯示
    \\預設值:
    '當前已輸入{#count}個字元, 您還可以輸入{#leave}個字元。 '
  • wordOverFlowMsg {String} [預設值:] //超出字數限制提示 留空支援多語言自動切換,否則按此配置顯示

    \\預設值:
    '<span style="color:red;">你輸入的字元個數已經超出最大允許值,伺服器可能會拒絕儲存!</span>'

     

  • tabSize {Number} [預設值:4] //點選tab鍵時移動的距離,tabSize倍數,tabNode什麼字元做為單位

  • tabNode {String} [預設值:'&nbsp;']

  • removeFormatTags //清除格式時可以刪除的標籤和屬性

    //預設值:
    'b,big,code,del,dfn,em,font,i,ins,kbd,q,samp,small,span,strike,strong,sub,sup,tt,u,var'

     

  • removeFormatAttributes [預設值:'class,style,lang,width,height,align,hspace,valign'

  • maxUndoCount {Number} [預設值:20] //undo操作,可以最多回退的次數,預設20

  • maxInputCount {Number} [預設值:1] //undo操作,當輸入的字元數超過該值時,儲存一次現場

  • autoHeightEnabled {Boolean} [預設值:true] //是否自動長高,預設true

  • scaleEnabled {Boolean} [預設值:false] //是否可以拉伸長高,預設true(當開啟時,自動長高失效)

  • minFrameWidth {Number} [預設值:800] //編輯器拖動時最小寬度,預設800
  • minFrameHeight {Number} [預設值:220] //編輯器拖動時最小高度,預設220

  • autoFloatEnabled [預設值:true] //是否保持toolbar的位置不動,預設true

  • topOffset [預設值:30] //浮動時工具欄距離瀏覽器頂部的高度,用於某些具有固定頭部的頁面

  • toolbarTopOffset [預設值:400] //編輯器底部距離工具欄高度(如果引數大於等於編輯器高度,則設定無效)

  • pageBreakTag [預設值:'ueditorpagebreaktag'] //分頁識別符號,預設是ueditorpagebreaktag

  • autotypeset {Object} //自動排版引數 預設值:

    {
        mergeEmptyline: true, //合併空行
        removeClass: true, //去掉冗餘的class
        removeEmptyline: false, //去掉空行
        textAlign: "left", //段落的排版方式,可以是 left,right,center,justify 去掉這個屬性表示不執行排版
        imageBlockLine: 'center', //圖片的浮動方式,獨佔一行劇中,左右浮動,預設: center,left,right,none 去掉這個屬性表示不執行排版
        pasteFilter: false, //根據規則過濾沒事貼上進來的內容
        clearFontSize: false, //去掉所有的內嵌字號,使用編輯器預設的字號
        clearFontFamily: false, //去掉所有的內嵌字型,使用編輯器預設的字型
        removeEmptyNode: false, // 去掉空節點
        //可以去掉的標籤
        removeTagNames: {標籤名字: 1
        },
        indent: false, // 行首縮排
        indentValue: '2em', //行首縮排的大小
        bdc2sb: false,
        tobdc: false
    }

     

  • tableDragable {Boolean} [預設值:true] //表格是否可以拖拽

  • disabledTableInTable {Boolean} [預設值:true] //禁止表格巢狀

  • sourceEditor {String} [預設值:"codemirror"] //原始碼的檢視方式,codemirror是程式碼高亮,textarea是文字框,預設是codemirror,注意預設codemirror只能在ie8+和非ie中使用

  • codeMirrorJsUrl {Path String} [預設值:URL + "third-party/codemirror/codemirror.js"] //如果sourceEditor是codemirror需要配置這項,codeMirror js載入的路徑

  • codeMirrorCssUrl {Path String} [預設值:URL + "third-party/codemirror/codemirror.css"] //如果sourceEditor是codemirror需要配置這項,codeMirror css載入的路徑

  • sourceEditorFirst {String} [預設值:false] //編輯器初始化完成後是否進入原始碼模式,預設為否。

  • iframeUrlMap {Object} //dialog內容的路徑 ~會被替換成URL,垓屬性一旦開啟,將覆蓋所有的dialog的預設路徑

    //預設值:
    {
        'anchor': '~/dialogs/anchor/anchor.html',
    }

     

  • webAppKey {String} //webAppKey 百度應用的APIkey,每個站長必須首先去百度官網註冊一個key後方能正常使用app功能,註冊介紹,http://app.baidu.com/static/cms/getapikey.html

  • allowDivTransToP {Boolean} 預設會將外部進入的html資料中的Div標籤轉換成P標籤,外部進入的資料包括貼上和呼叫setContent介面進入編輯器的資料。如果設定成false將不在做這個轉換。

相關文章