最近使用了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>
有待更新......