Html如何插入百度富文本編輯器ueditor？這個(gè)問(wèn)題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見(jiàn)到的。希望通過(guò)這個(gè)問(wèn)題能讓你收獲頗深。下面是小編給大家?guī)?lái)的參考內(nèi)容，讓我們一起來(lái)看看吧！

公司主營(yíng)業(yè)務(wù)：成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、成都外貿(mào)網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站開(kāi)發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開(kāi)放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來(lái)驚喜。創(chuàng)新互聯(lián)推出包頭免費(fèi)做網(wǎng)站回饋大家。

在日常工作用,肯定有用到富文本編輯器的時(shí)候,富文本編輯器功能強(qiáng)大使用方便,假如你用百度富文本編輯器,首先需要下載好百度編輯器的demo，然后創(chuàng)建ueditor.html文件,引入百度編輯器，然后在html文件內(nèi)引入，然后再用js實(shí)例化編輯器即可。代碼如下：

到這里在瀏覽器打開(kāi)上面的ueditor.html文件就能看到如下圖所示:

這是實(shí)例化后的初始編輯器,里面的功能有很多,其中有一部分可能是我們完全用不到的,想定制怎么辦呢?別捉急,百度提供了可以定制的功能,將上面實(shí)例化編輯器的js代碼改為以下代碼:

刷新ueditor.html頁(yè)面你就會(huì)看到變化了:

想定制什么功能,只需要參照上面下載的編輯器demo內(nèi)的ueditor.config.js文件中toolbars屬性,將對(duì)應(yīng)的字符串添加進(jìn)去即可:

        //工具欄上的所有的功能按鈕和下拉框，可以在new編輯器的實(shí)例時(shí)選擇自己需要的重新定義
        , toolbars: [[
            'fullscreen', 'source', '|', 'undo', 'redo', '|',
            'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
            'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
            'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
            'directionalityltr', 'directionalityrtl', 'indent', '|',
            'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
            'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
            'simpleupload', 'insertimage', 'emotion', 'scrawl', 'insertvideo', 'music', 'attachment', 'map', 'gmap', 'insertframe', 'insertcode', 'webapp', 'pagebreak', 'template', 'background', '|',
            'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
            'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
            'print', 'preview', 'searchreplace', 'drafts', 'help'
        ]]

ueditor.config.js文件可以定制編輯器的很多功能,只需要將對(duì)應(yīng)屬性前面的'//'去掉,true為開(kāi)啟,false為關(guān)閉進(jìn)行設(shè)置即可.比如:

        //elementPathEnabled
        //是否啟用元素路徑，默認(rèn)是顯示
        ,elementPathEnabled : false

        //wordCount
        ,wordCount:false          //是否開(kāi)啟字?jǐn)?shù)統(tǒng)計(jì)
        //,maximumWords:10000       //允許的最大字符數(shù)

// 是否自動(dòng)長(zhǎng)高,默認(rèn)true
       　　　　　,autoHeightEnabled:false

按照上面代碼修改完ueditor.config.js文件,刷新頁(yè)面你會(huì)看到不一樣的地方:

下面的元素路徑和字?jǐn)?shù)統(tǒng)計(jì)都消失了,是不是更加美觀了呢O(∩_∩)O~

實(shí)際應(yīng)用時(shí)我們還有可能在一個(gè)域名下上傳百度編輯器編輯的內(nèi)容(例如:在www.52lnamp.com域名下上傳了一張圖片)，而需求不單單是要在這域名下展示,還需要可以在其它域名下展示,這時(shí)就會(huì)出現(xiàn)圖片不存在的情況，

這是因?yàn)榘俣染庉嬈鞯呐渲梦募心J(rèn)的上傳路徑是相對(duì)路徑，也就是說(shuō)上面上傳的圖片的地址是相對(duì)于當(dāng)前的域名進(jìn)行上傳的,只有在你上傳的域名下可以展示,其它域名是顯示不出來(lái)的,

如果要在另外一個(gè)域名上展示的話只需要修改配置文件為絕對(duì)路徑就可以了，打開(kāi)上面下載的demo，找到php/config.json文件,打開(kāi)后你會(huì)看到

其中imageUrlPrefix這個(gè)屬性加上域名即可:"imageUrlPrefix": "http://www.xxx.com", /* 圖片訪問(wèn)路徑前綴 */

需要注意的是添加域名的時(shí)候必須帶上http or https,只有這樣寫(xiě)出來(lái)的才能正常顯示,不加的話在你引用的時(shí)候會(huì)在前面重復(fù)加上一個(gè)域名,基本了解了這些足以應(yīng)對(duì)日常的需求。

感謝各位的閱讀！看完上述內(nèi)容，你們對(duì)Html如何插入百度富文本編輯器ueditor大概了解了嗎？希望文章內(nèi)容對(duì)大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。