vue中，ueditor百度富文本編輯器換膚、集成秀米、自定義按鈕、彈窗

前言：ueditor是百度開源的一款富文本編輯器，還是比較流行的，之前有寫過一篇vue后臺管理項(xiàng)目中使用froala-editor富文本編輯器教程，froala-editor是一個(gè)收費(fèi)的編輯器，主題皮膚都挺好看的，并且支持v-model,十分的方便，但是想要集成第三方的編輯器就不太行了，比如集成秀米?？磦€(gè)人需求吧，ueditor百度編輯器的默認(rèn)主題皮膚真心丑，我是看不下去，所以決定換膚??！先上兩張對比圖～

換膚前

換膚后

1. 先去ueditor官網(wǎng)按照需求下載
image.png
2. 下載解壓后名字改成UEditor，丟到vue項(xiàng)目中的public目錄下（或者static下）
image.png
3. 安裝vue-editor-wrap
cnpm i vue-ueditor-wrap -S
//引入組件
import VueUeditorWrap from 'vue-ueditor-wrap'  //es6
//注冊組件
components: {
   VueUeditorWrap
},
//template
 <vue-ueditor-wrap v-model="msg" :config='myConfig'></vue-ueditor-wrap>
// data
  msg: '',
  myConfig: {
  // 編輯器不自動(dòng)被內(nèi)容撐高
  autoHeightEnabled: false,
  // 初始容器高度
  initialFrameHeight: 500,
  // 初始容器寬度
  initialFrameWidth: '100%',
  // 上傳文件接口（這個(gè)地址是我為了方便各位體驗(yàn)文件上傳功能搭建的臨時(shí)接口，請勿在生產(chǎn)環(huán)境使用?。。。?  serverUrl: 'http://35.201.165.105:8000/controller.php',
  // UEditor 資源文件的存放路徑，如果你使用的是 vue-cli 生成的項(xiàng)目，通常不需要設(shè)置該選項(xiàng)，vue-ueditor-wrap 會(huì)自動(dòng)處理常見的情況，如果需要特殊配置，參考下方的常見問題2
  UEDITOR_HOME_URL: '/UEditor/'
}

沒有失誤的話，是這個(gè)樣子的。


image.png
4. 接下來就是換膚了。

換膚也比較簡單，就是重寫css，在 ueditor.config.js中，把 theme:'default'的注釋打開，修改成 theme:'notadd'，然后把準(zhǔn)備好的css丟到 public/UEditor/themes下,在public/UEditor/themes/iframe.css中添加

img {
  max-width: 100%;
  height: auto;
}

像這樣。

image.png

ps:皮膚文件+v 1115009958 索取,不是無償?shù)?，請知?/code>

然后編輯器就變成了這個(gè)樣子。

image.png
5.自定義按鈕和彈窗
vue-ueditor-wrap v-model="msg" :config='myConfig'></vue-ueditor-wrap>
改成
vue-ueditor-wrap v-model="msg" :config='myConfig' @ready="ready" @before-init="addCustomButtom"></vue-ueditor-wrap>
//data
editor:{},
myConfig: {
        toolbars: [
          [
            'fullscreen',//全屏
            'source',//源碼
            'undo', //撤銷
            'redo', //前進(jìn)
            'bold', //加粗
            'italic', //斜體
            'underline', //下劃線
            'strikethrough', //刪除線
            'fontborder', //字符邊框
            'formatmatch', //格式刷
            // 'fontfamily', //字體
            'fontsize', //字號
            'justifyleft', //居左對齊
            'justifycenter', //居中對齊
            'justifyright', //居右對齊
            // 'justifyjustify', //兩端對齊
            'insertorderedlist', //有序列表
            'insertunorderedlist', //無序列表
            // 'lineheight',//行間距
          ]
        ],
        // 編輯器不自動(dòng)被內(nèi)容撐高
        autoHeightEnabled: false,
        // 初始容器高度
        initialFrameHeight: 500,
        // 初始容器寬度
        initialFrameWidth: '100%',
        // 上傳文件接口（這個(gè)地址是我為了方便各位體驗(yàn)文件上傳功能搭建的臨時(shí)接口，請勿在生產(chǎn)環(huán)境使用?。。。?        serverUrl: 'http://35.201.165.105:8000/controller.php',
        // UEditor 資源文件的存放路徑，如果你使用的是 vue-cli 生成的項(xiàng)目，通常不需要設(shè)置該選項(xiàng)，vue-ueditor-wrap 會(huì)自動(dòng)處理常見的情況，如果需要特殊配置，參考下方的常見問題2
        UEDITOR_HOME_URL: '/UEditor/'
      },
//methods
ready(editorInstance)  // 富文本初始化完成觸發(fā)
  this.editor = editorInstance
},
// 添加自定義按鈕
    addCustomButtom(editorId) {
      let _this = this
      window.UE.registerUI('test-button', function (editor, uiName) {
        // 注冊按鈕執(zhí)行時(shí)的 command 命令，使用命令默認(rèn)就會(huì)帶有回退操作
        editor.registerCommand(uiName, {
          execCommand: function () {
            let html = `<img src='https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80' />`
            editor.execCommand('inserthtml', html);
          }
        });

        // 創(chuàng)建一個(gè) button
        var btn = new window.UE.ui.Button({
          // 按鈕的名字
          name: uiName,
          // 提示
          title: '上傳圖片',
          // 需要添加的額外樣式，可指定 icon 圖標(biāo)，圖標(biāo)路徑參考常見問題 2
          cssRules: "background-image: url('http://erkong.ybc365.com/2644220200815163758435.png') !important;background-size: cover;",
          // 點(diǎn)擊時(shí)執(zhí)行的命令
          onclick: function () {
            // 這里可以不用執(zhí)行命令，做你自己的操作也可
            _this.editor.execCommand('inserthtml', '插入到編輯器的內(nèi)容');
          }
        });

        // 當(dāng)點(diǎn)到編輯內(nèi)容上時(shí)，按鈕要做的狀態(tài)反射
        editor.addListener('selectionchange', function () {
          var state = editor.queryCommandState(uiName);
          if (state === -1) {
            btn.setDisabled(true);
            btn.setChecked(false);
          } else {
            btn.setDisabled(false);
            btn.setChecked(state);
          }
        });

        // 因?yàn)槟闶翘砑?button，所以需要返回這個(gè) button
        return btn;
      }/* 指定添加到工具欄上的哪個(gè)位置，默認(rèn)時(shí)追加到最后 */ /* 指定這個(gè) UI 是哪個(gè)編輯器實(shí)例上的，默認(rèn)是頁面上所有的編輯器都會(huì)添加這個(gè)按鈕 */);
    },
    // 添加自定義彈窗
    addCustomDialog(editorId) {
      window.UE.registerUI('test-dialog', function (editor, uiName) {
        // 創(chuàng)建 dialog
        var dialog = new window.UE.ui.Dialog({
          // 指定彈出層中頁面的路徑，這里只能支持頁面，路徑參考常見問題 2
          iframeUrl: '/customizeDialogPage.html',
          // 需要指定當(dāng)前的編輯器實(shí)例
          editor: editor,
          // 指定 dialog 的名字
          name: uiName,
          // dialog 的標(biāo)題
          title: '這是一個(gè)自定義的 Dialog 浮層',
          // 指定 dialog 的外圍樣式
          cssRules: 'width:500px;height:200px;',
          // 如果給出了 buttons 就代表 dialog 有確定和取消
          buttons: [
            {
              className: 'edui-okbutton',
              label: '確定',
              onclick: function () {
                dialog.close(true);
              }
            },
            {
              className: 'edui-cancelbutton',
              label: '取消',
              onclick: function () {
                dialog.close(false);
              }
            }
          ]
        });

        // 參考上面的自定義按鈕
        var btn = new window.UE.ui.Button({
          name: 'dialog-button',
          title: '打開秀米',
          cssRules: `background-image: url('/test-dialog.png') !important;background-size: cover;`,
          onclick: function () {
            // 渲染dialog
            dialog.render();
            dialog.open();
          }
        });

        return btn;
      } /* 指定添加到工具欄上的那個(gè)位置，默認(rèn)時(shí)追加到最后 */ /* 指定這個(gè)UI是哪個(gè)編輯器實(shí)例上的，默認(rèn)是頁面上所有的編輯器都會(huì)添加這個(gè)按鈕 */);
    },
//main.js
//引入這兩個(gè)文件，否則自定義的按鈕不出現(xiàn)圖標(biāo)
import '../public/UEditor/ueditor.config'
import '../public/UEditor/ueditor.all.js'

這樣就出現(xiàn)了自定義的按鈕

image.png

在這里你可以寫你的邏輯，彈窗同理，就不多說了

image.png

image.png
6.下面開始集成秀米
第一步：下載文件 xiumi-ue-dialog-v5.js和xiumi-ue-v5.css和xiumi-ue-dialog-v5.html和 xiumi-ue-internal.js,點(diǎn)這里可以打包下載
第二步：將下載的壓縮文件解壓，把里面的文件丟到UEditor/dialogs里
image.png
第三步：修改 xiumi-ue-dialog-v5.html，引入 xiumi-ue-internal.js
image.png
第四步：修改ueditor.config.js

 xssFilterRules: false  //本來是true，改成false
 inputXssFilter: false  //本來是true，改成false
 outputXssFilter: false  //本來是true，改成false
 article: ['style'],   //本來是[ ]，改成  ['style']
 section: ['class',"style"], //本來是[ ] ，改成  ['class',"style"]
 img: ['style', 'src', 'alt', 'title', 'width', 'height', 'id', '_src', '_url', 'loadingclass', 'class', 'data-latex','style','word_img']  //后面多加兩個(gè)值'style','word_img'

 還有其他的，看自己需求更改配置
第五步： 在main.js中引入基本文件
//引入必要的文件 集成秀米所需

import '../public/UEditor/dialogs/xiumi-ue-dialog-v5'
import '../public/UEditor/dialogs/xiumi-ue-v5.css'

最后是這樣

image.png

image.png

image.png

教程到此結(jié)束，交流+v 1115009958

補(bǔ)充 ：ueditor.all.js

options.cssRules = '.edui-notadd  .edui-for-'+ btnName +' .edui-icon {'+ cssRules +'}' //.edui-default 改成  .edui-notadd

options.cssRules = '.edui-notadd .edui-for-'+ name +' .edui-dialog-content  {'+ cssRules +'}' //.edui-default 改成  .edui-notadd
//notadd/css
注釋掉
/* .edui-notadd .edui-toolbar .edui-button .edui-icon::before,
.edui-notadd .edui-toolbar .edui-menubutton .edui-icon::before,
.edui-notadd .edui-toolbar .edui-splitbutton .edui-icon::before {
    display: none;
} */
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容