前言
本文將介紹筆者在React的專案中使用百度的富文字編輯器Ueditor的過程。注意本文不提供一條龍式的使用方法，只是將使用過程中的一些實現思路進行總結，供以參考。react專案中匯入ueditor，會存在各種不正交的問題，需要注意。
引入
首先在ueditor官網下載最新安裝包，然後在專案入口的html中匯入（匯入方式不一，可以採用import的方式，需要自行度娘。但是無論哪種引入方式，只要想自定義功能，不正交問題就難以避免QAQ）。不管三七二十一先跑起來再說。。
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>ueditor demo</title>
</head>
<body>
<!-- 配置檔案 -->
<script type="text/javascript" src="path/ueditor.config.js"></script>
<!-- 編輯器原始碼檔案 -->
<script type="text/javascript" src="path/ueditor.all.js"></script>
······
</body>
</html>
複製程式碼在React專案中使用ueditor要注意
- 匯入的路徑，筆者使用的是專案經webpack打包之後的相對路徑。
- 匯入順序，配置檔案要先於原始碼。
- 筆者這種引入方式存在快取問題，所以修改ueditor.all.js後需要及時清理快取，測試新的程式碼。
封裝
/**
* 封裝UEditor
*/
import React from 'react';
import './index.less';
class UEditor extends React.Component {
constructor(props) {
super(props);
this.editor = {};
this.id = '';
}
······
componentDidMount() {
let UE = window.UE;
let id = this.id;
if (id) {
try {
/* 載入之前先執行刪除操作，否則如果存在頁面切換，
再切迴帶編輯器頁面重新載入時不重新整理無法渲染出編輯器 */
UE.delEditor(id);
} catch (e) {}
let ueditor = UE.getEditor(id, {
toolbars: [
['bold', 'italic', 'underline', 'kityformula', 'diyimg']
],
initialContent: '',
autoHeightEnabled: false,
autoFloatEnabled: false,
elementPathEnabled: false,
wordCount: false,
enableAutoSave: false,
initialFrameWidth: this.props.width,
initialFrameHeight: this.props.height
});
}
}
render() {
this.id = this.props.id;
return <div styleName="content" id={this.id} />;
}
}
export default UEditor;
複製程式碼筆者在專案中使用了加粗，斜體，下劃線，插入圖片，公式等功能，想要自定義配置均可參照ueditor.config.js修改。具體的將一一介紹，最後實現效果如下：
問題總結：
1. 禁止自動增高，改用滾動條
autoHeightEnabled: false
initialFrameWidth：this.props.width
initialFrameHeight：this.props.height
複製程式碼autoHeightEnabled可以阻止自動增高，然後再自定義容器寬度和高度。
2. 自定義全域性樣式，如容器的padding，p標籤的line-height等
解決方法：ueditor.all.js的第6800多行的render方法，在其中可以自定義全域性樣式。
3. 導航條切換後，無法再次渲染
解決方法：在每次ueditor例項化之前，先刪除對應的id
UE.delEditor(id);
複製程式碼原因分析：
從例項化和解除安裝例項的原始碼來看：
getEditor：
UE.getEditor = function (id, opt) {
var editor = instances[id];
if (!editor) {
editor = instances[id] = new UE.ui.Editor(opt);
editor.render(id);//渲染編輯器
}
return editor;
};
複製程式碼delEditor：
UE.delEditor = function (id) {
var editor;
if (editor = instances[id]) {
editor.key && editor.destroy();
delete instances[id]
}
};
複製程式碼UE在全域性管理了一個例項池，每次例項化都會根據id檢索，然後生成例項。從getEditor的原始碼中可以看出，ueditor的一個例項在第一次初始化時存在一個editor.render()，這是將此id的例項渲染到對應的id容器上。然而，當使用者tab切換編輯器再切回來時，此時由於該例項已在例項池中存在，於是直接執行return editor，所以少了editor.render()這一步，於是不能重新渲染。所以，在Ueditor元件每次例項化之前，先進行delEditor解除安裝。這裡需要注意，從delEditor中可以看出ueditor解除安裝例項時呼叫了例項的destroy方法。從destroy的註釋來看：銷燬編輯器例項，使用textarea代替 ，這解釋了為什麼在切換編輯器或者解除安裝編輯器時，會出現編輯器變為textarea的情況，如圖所示：
4. 模擬placeholder實現預置文案
解決方法：在UE的例項中自定義方法，實現填充文字模擬placeholder的效果，程式碼如下：
//模擬placeholder和控制toolbar顯示隱藏
UE.Editor.prototype.initDiy = function (placeholder) {
var _editor = this;
//獲取焦點
_editor.addListener("focus", function () {
UE.isEditored = true;
var Text = `<p style="color: #CDCDCD">${placeholder}</p>`
var localHtml = _editor.getContent();
if (localHtml === Text) {
_editor.setContent("");//點選時清空
_editor.focus(true);
}
//使得其他工具條display置為none
var list = document.querySelectorAll('.edui-editor-toolbarbox');
list.forEach((ele) => {
ele.style.display = 'none';
});
var toolbar = findKey(_editor.key);
toolbar.style.display = 'block';
});
// 插入圖片時存在問題
// _editor.addListener("blur", function () {
// var localHtml = _editor.getContent();
// if (localHtml === '') {
// _editor.setContent(`<p style="color: #CDCDCD">${placeholder}</p>`);
// }
// // window.activeEditor = _editor.key;
// });
_editor.ready(function () {
// _editor.fireEvent("blur");
_editor.setContent(`<p style="color: #CDCDCD">${placeholder}</p>`);//填充預置文案
});
}
//尋找工具條
function findKey(key) {
let ele = document.querySelector(`#${key}`);
let toolbar = ele.querySelector('.edui-editor-toolbarbox');
return toolbar;
}
複製程式碼原來，筆者實現的效果是點選時清空，失焦時還原。但是，在做自定義工具條時產生了bug（在5中我會細說），因此我採用了另一種方案：初始時設定預設文案，當使用者聚焦時清空預設，使用者失焦後不再恢復該預設文案。也就是將blur事件註釋了。。。
5. 工具條顯示在編輯器頭部，顯示為懸浮效果，預設隱藏，聚焦時出現
實現思路：將themes/default/css/ueditor.css中加入：
.edui-default .edui-editor-toolbarbox {
position: absolute;
······
top: -36px;
}
複製程式碼首先實現頭部偏移，然後通過控制toolbar對應dom元素的display來隱藏工具條。實現效果如下：
下面解釋一下為什麼編輯器失焦的時候不恢復預置文案：
從4中的程式碼可以看出，我們是通過觸發focus和blur事件分別清空和填充編輯器的內容。但是當我們點選工具條時，編輯器就會觸發blur事件！！於是就會出現各種bug。以百度官網的ueditor為例，控制檯輸入：
為該編輯器註冊點選事件，當點選加粗按鈕時，控制檯輸出：
為了避免點選工具條時觸發blur事件，筆者將自定義的blur事件全部註釋了。
6. 自定義按鈕和七牛雲圖片上傳
首先，在ueditor.config.js中找到toolbars陣列，增加一個diyimg字串，然後在zh-cn.js找到labelMap陣列，在末尾加上'diyimg': '插入圖片' 。最後，在ueditor.all.js中找到btnCmds陣列，加入diyimg字串。初始化時使用這個字串，工具條上就會顯示一個按鈕，但是我們發現他顯示的是這樣的：
這是因為ueditor預設使用加粗的icon作為自定義按鈕的預設icon，所以為了使用預設的插入圖片的圖示，我們需要到themes/default/css/ueditor.css中，在最後一行加入：
/*自定義圖片上傳按鈕 */
.edui-default .edui-toolbar .edui-for-diyimg .edui-icon {
background-position: -380px 0px;//這個位置是“插入圖片”的icon，其他圖示可自行調整
}
複製程式碼新增後，顯示效果如下：
圖示正常顯示後，需要為該圖示新增相應的點選事件，在ueditor.all.js中加入:
//圖片上傳
UE.commands['diyimg'] = {
execCommand : function(){
const upload = async(e) => {
······//完成圖片上傳的程式碼
}
const fileInput = document.getElementById('diyimg');//獲取dom上隱藏的一個input標籤
fileInput.onchange = upload;
fileInput.click();//觸發input標籤實現檔案上傳
return true;
},
queryCommandState:function(){
}
};
複製程式碼筆者這裡不贅述圖片上傳的程式碼，度娘上很多，我簡單說說實現的思路：
先實現一個插入圖片的按鈕，然後為該按鈕註冊相應的事件diyimg，然後在頁面中新增一個input file標籤並隱藏，diyimg事件會觸發該標籤的點選事件，彈出檔案上傳彈窗，此時選擇檔案點選後會觸發onchange事件，執行相應的圖片上傳程式碼。上傳成功到伺服器後，伺服器會返回圖片對應的url，此時拿到該url填入對應編輯器例項，執行編輯器的插入圖片的程式碼：
this.execCommand('insertimage', {
src: res.data.downloadUrl,//回撥傳來的url
width:'60'
// height:'45'
});
複製程式碼7. 給在編輯器內部的img等標籤新增內聯樣式
ueditor預設存在xss過濾！！！這裡以給img標籤新增style=“vertical-top”為例。
首先要找到ueditor.config.js，在其中搜尋xss，在第403行左右有程式碼：
img: [src', 'alt', 'title', 'width', 'height', 'id', '_src', 'loadingclass', 'class', 'data-latex'],
複製程式碼往陣列裡加入style字串，然後在ueditor.all.js中搜尋UE.commands['insertimage'] ，在第約11172行找到str，往裡面加入內聯樣式即可。