近期在做前端項目，需要用到富文本編輯器。因為團隊提出的是使用百度Ueditor，所以也就沒有再去看其他的富文本編輯器。
百度編輯器誕生比較久，沒有使用模塊化，不修改一下不能直接在React中使用。而我對前端模塊化那些東西并沒有研究過，所以直接參考的EdmundChen的react+ueditor。
通過看他的文章和他的源碼再加上控制臺那些報錯一步步就調(diào)試改正到最后可以正常使用基本功能。
這里在這里寫下做個記錄，以便后續(xù)使用不用從頭再調(diào)試。
開始純凈的React項目
我自己建了一個只引用了webpack的項目，加入了babel loader，其他loader都沒有引入，github
git clone git@github.com:Wyii/react-starter.git
git fetch
git checkout react
切換到react分支就是前面講的基礎(chǔ)的react項目。
下載百度編輯器
去百度編輯器GitHub直接clone最新項目
git clone git@github.com:fex-team/ueditor.git
npm install
grunt default
按照官方的步驟執(zhí)行就行了，沒有g(shù)runt的先裝grunt
npm install -g grunt-cli
這時候會生成一個dist文件夾，
將dist文件夾中包含ueditor.all.js文件的那一級目錄全部復(fù)制到React項目的根目錄的ueditor文件夾中，名字隨意，demo.html是我自己建著嘗試的，不用理會。
然后把百度editor項目下的lang文件夾也復(fù)制到react項目的ueditor文件夾中。
修改ueditor.all.js
這里的修改就是使其的導(dǎo)出方式為模塊化，并且以import的方式引入其他文件依賴。
import I18N from './lang/zh-cn/zh-cn';
import UEDITOR_CONFIG from './ueditor.config';
import './themes/default/css/ueditor.css';
import './themes/iframe.css'
增加
window.UE = baidu.editor = window.UE || {};
修改原來UE對象賦值結(jié)構(gòu)
UE.plugins = {};
UE.commands = {};
UE.instants = {};
UE.I18N = {};
UE.I18N['zh-cn'] = I18N;
UE._customizeUI = {};
UE.version = "1.5.0";
底部增加導(dǎo)出語句
export default UE;
刪除頂部(function(){})，記得后面配對的括號
修改ueditor.config.js
去除(function(){}),改為導(dǎo)出
export default UEDITOR_CONFIG;
修改zh-cn.js
同樣采用模塊導(dǎo)出方式，整體對象賦值給一個變量，導(dǎo)出變量即可
export default i18N;
到這里幾個文件的模塊化方式就完成了，我這里是直接修改沒有壓縮的js，也是為了方便讀代碼，之后可以研究怎么壓縮成min.js。
如果還有遺漏的地方，可以根據(jù)console的報錯自行研究。
引入Loader
完成這里之后啟動項目，前端報了很多css、png、gif引用相關(guān)的錯誤，后來查閱之后才知道需要引入這些loader，使react項目有處理這些文件的能力。
npm install --save-dev style-loader css-loader file-loader
//在webpack.config.js中增加如下規(guī)則：
{
test: /\.css$/,
use: [
{
loader: "style-loader"
}, {
loader: "css-loader"
}
]
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {}
}
]
}
結(jié)尾
基本上到這里之后就可以在react項目中直接import UE了，具體的使用可以查看EdmundChen的react+ueditor中的源碼，也可以查看我寫的那個項目，傳送門，不確定之后會不會繼續(xù)擴展和改進。
