ueditor集成秀米編輯器

2018年10月30日 16:25:51閱讀數(shù)：4740博客 / 吃著青梅候竹馬的博客/ HTML

由于工作需求富文本編輯器中要用到秀米插件

找了官方和一些博客介紹的都不太全，于是自己整理了一下

首先在官方下載所需文件并放到ueditor的dialogs目錄下如下圖

其次在xiumi-ue-dialog-v5.js中將iframeUrl配置為: editor.ui.UEDITOR_HOME_URL+ 'dialogs/xiumi-ue-dialog-v5.html'

最后再在頁面中引入xiumi-ue-v5.css以及xiumi-ue-dialog-v5.js(放于ueditor的js文件之后)

找到themes/default/ueditor.css(或者themes/default/css/ueditor.css)文件，增加一條樣式定義:

文件中可搜索.edui-icon找到，添加下面一條

實(shí)例

.edui-default??.edui-for-xiumi-connect?.edui-icon?{

background-repeat:no-repeat?;

background-position:center;

}

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

這樣在ueditor工具欄就可以看到秀米的圖標(biāo)了

本以為這樣就大功告成了沒想到在秀米中編輯完內(nèi)容的樣式并沒有跟過來，于是在Chrome瀏覽器中調(diào)試發(fā)現(xiàn)section失去樣式，最后在ueditor的配置文件中找到section添加class以及style如下圖

最后效果

全部評(píng)論

文明上網(wǎng)理性發(fā)言，請(qǐng)遵守新聞評(píng)論服務(wù)協(xié)議;);)

立即提交

Original url: Access

Created at: 2020-08-26 19:23:11

Category: default

Tags: none