vue中ueditor使用和上傳圖片和遇到的坑


最近使用了ueditor富文本做表單提交,其他動能使用正常,上傳圖片一直都有問題,找了很久最終解決了,分享一下我的經驗.

一.下載ueditor

Ueditor項目下載地址:http://ueditor.baidu.com/website/ 

因為我使用的是vue,所以使用了這個插件vue-ueditor-wrap,安裝改插件,下載ueditor的php版本(因為后台使用的是php版本)。

二、把php版本中的如下內容添加到 /static/UEditor/ 

 

將php文件夾刪除,我這邊用不到!!!

三、在vue項目中單獨定義一個的富文本編輯器模塊: 

 

 

 在父組件中的使用方式,接收父組件傳遞過來的參數,對編輯器進行初始化賦值。 

四、在父組件中使用組件

<div>
    <vue-ueditor-wrap v-model="goods_desc" :config="myConfig" @beforeInit="addCustomButtom" :key="1"></vue-ueditor-wrap>
</div>

 

<script>
        import VueUeditorWrap from './vue-ueditor-wrap.vue'
        export default {
            data() {
                return {
                    goods_desc: '',
                    myConfig: {
                        autoHeightEnabled: false,
                        initialFrameHeight: 400,
                        initialFrameWidth: '100%',
                        UEDITOR_HOME_URL: '/static/UEditor/',
                        serverUrl: 'http://localhost:8081/controller.php', //圖片上傳的地址
                    },
                }
            },
            methods() {
                addCustomButtom(editorId) {
                    window.UE.registerUI('test-button', function (editor, uiName) {
                        // 注冊按鈕執行時的 command 命令,使用命令默認就會帶有回退操作
                        editor.registerCommand(uiName, {
                            execCommand: function () {
                                editor.execCommand('inserthtml', `<span>這是一段由自定義按鈕添加的文字</span>`);
                            }
                        });
                        // 創建一個 button
                        var btn = new window.UE.ui.Button({
                            // 按鈕的名字
                            name: uiName,
                            // 提示
                            title: '鼠標懸停時的提示文字',
                            // 需要添加的額外樣式,可指定 icon 圖標,圖標路徑參考常見問題 2
                            cssRules: "",
                            // 點擊時執行的命令
                            onclick: function () {
                                // 這里可以不用執行命令,做你自己的操作也可
                                editor.execCommand(uiName);
                            }
                        });
                        // 當點到編輯內容上時,按鈕要做的狀態反射
                        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);
                            }
                        });
                        // 因為你是添加 button,所以需要返回這個 button
                        return btn;
                    }, 0 /* 指定添加到工具欄上的哪個位置,默認時追加到最后 */, editorId /* 指定這個 UI 是哪個編輯器實例上的,默認是頁面上所有的編輯器都會添加這個按鈕 */);
                }
            }
        }
    </script>

上傳圖片時需要后台處理、將接口寫好,這樣就可以看到效果了.

 這個是單張圖片上傳的要配置后台地址,多張圖片上傳也是一樣

五.vue中使用ueditor編輯器遇見的坑

最近在項目中遇到需要提交form表單的,由於數據較多,不想新建頁面(主要是頁面傳值比較麻煩),我這邊用到的是elemen-ui中的彈框(el-dialog),將編輯器引入。

<el-dialog
      :visible.sync="showForm"
      width="80%"
      :close-on-click-modal="false"
      :append-to-body="true"
    >
    <el-form :model="formData" class="as-form-col">
        <el-form-item
            label="具體描述"
            :label-width="formLabelWidth"
        >
        <vue-ueditor-wrap
            v-model="formData.detail" //綁定的字段
            :config="myConfig"
            @beforeInit="addCustomButtom"
            :key="1"
        ></vue-ueditor-wrap>
     </el-form-item>
 </el-dialog>

<script>
import VueUeditorWrap from "../common/vue-ueditor-wrap";
export default {
    data() {
        return {
            showForm: false,
            formLabelWidth: '100px',
            formData: {
                detail:''
            },
            myConfig: {
                autoHeightEnabled: false,
                initialFrameHeight: 400,
                initialFrameWidth: "100%",
                UEDITOR_HOME_URL: "/static/UEditor/", // 目錄
                serverUrl: "圖片上傳的地址"
            }
        }
    }
    components: {
        VueUeditorWrap
    },
    methods:{
        addCustomButtom(editorId) { // 直接去網上賦值過來
             window.UE.registerUI(
            "test-button",
            function(editor, uiName) {
                 // 注冊按鈕執行時的 command 命令,使用命令默認就會帶有回退操作
                editor.registerCommand(uiName, {
                execCommand: function() {
                editor.execCommand(
                    "inserthtml",
                    `<span>這是一段由自定義按鈕添加的文字</span>`
                );
            }
          });
          // 創建一個 button
          var btn = new window.UE.ui.Button({
            // 按鈕的名字
            name: uiName,
            // 提示
            title: "鼠標懸停時的提示文字",
            // 需要添加的額外樣式,可指定 icon 圖標,圖標路徑參考常見問題 2
            cssRules: "",
            // 點擊時執行的命令
            onclick: function() {
              // 這里可以不用執行命令,做你自己的操作也可
              editor.execCommand(uiName);
            }
          });
          // 當點到編輯內容上時,按鈕要做的狀態反射
          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);
            }
          });
          // 因為你是添加 button,所以需要返回這個 button
          return btn;
        },
        0 /* 指定添加到工具欄上的哪個位置,默認時追加到最后 */,
        editorId /* 指定這個 UI 是哪個編輯器實例上的,默認是頁面上所有的編輯器都會添加這個按鈕 */
      );
    },
    }
}
</script>

打開可以正常顯示,但有些功能顯示不全

 

 最后找了很多原因,發現是層級問題,設置了編輯器的層級問題,將編輯器層級設高發現不能點擊,最后將彈框的層級設低一點才解決了這個問題

<style scope>

.el-dialog__wrapper {
  z-index: 203 !important;
}
.v-modal {
  z-index: 200 !important;
}
</style>

有待更新......


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM