React 呼叫百度富文字 及存在的問題
實現：
var React = require('react');
// 將下載的百度富文字檔案包匯入到合適位置；這裡放入的是dist目錄下面
require('../../dist/ueditor/ueditor.config.js');
require('../../dist/ueditor/ueditor.all.min.js');
require('../../dist/ueditor/lang/zh-cn/zh-cn.js');
var UEditor = React.createClass({
displayName: 'UEditor',
// 設定預設的屬性值
getDefaultProps: function () {
return {
disabled: false,
height: 500,
content: '',
id: 'editor'
};
},
render: function () {
return (
<div>
<script id={this.props.id} name="content" type="text/plain">
</script>
</div>
);
},
呼叫初始化方法
componentDidMount: function () {
this.initEditor();
},
// 編輯器配置項初始化
initEditor: function () {
var id = this.props.id;
var ue = UE.getEditor(id, {
// 工具欄，不配置有預設專案
toolbars: [[
'fullscreen', 'source', '|', 'undo', 'redo', '|',
'bold', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch',
'|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
'indent', '|',
'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
'emotion',
'horizontal', '|', 'date', 'time', '|', 'insertimage'
]],
lang: 'zh-cn',
// 字型
'fontfamily': [
{label: '', name: 'songti', val: '宋體,SimSun'},
{label: '', name: 'kaiti', val: '楷體,楷體_GB2312, SimKai'},
{label: '', name: 'yahei', val: '微軟雅黑,Microsoft YaHei'},
{label: '', name: 'heiti', val: '黑體, SimHei'},
{label: '', name: 'lishu', val: '隸書, SimLi'},
{label: '', name: 'andaleMono', val: 'andale mono'},
{label: '', name: 'arial', val: 'arial, helvetica,sans-serif'},
{label: '', name: 'arialBlack', val: 'arial black,avant garde'},
{label: '', name: 'comicSansMs', val: 'comic sans ms'},
{label: '', name: 'impact', val: 'impact,chicago'},
{label: '', name: 'timesNewRoman', val: 'times new roman'}
],
// 字號
'fontsize': [10, 11, 12, 14, 16, 18, 20, 24, 36],
// 為編輯器例項新增一個路徑，必需項
'UEDITOR_HOME_URL': '/react/dist/ueditor/',
// 上傳圖片時後端提供的介面
serverUrl: window.api_host + '/innerMessage/uploadImage',
enableAutoSave: false,
autoHeightEnabled: false,
initialFrameHeight: this.props.height,
initialFrameWidth: '100%',
// 是否允許編輯
readonly: this.props.disabled
});
this.editor = ue;
var self = this;
this.editor.ready(function (ueditor) {
if (!ueditor) {
// 如果初始化後ueditor不存在刪除後重新呼叫
UE.delEditor(self.props.id);
self.initEditor();
}
});
},
// 獲取編輯器的內容
getContent: function () {
if (this.editor) {
return this.editor.getContent();
}
return '';
},
/**
* 寫入內容｜追加內容
* @param {Boolean} isAppendTo [是否是追加]
* @param {String} appendContent [內容]
*/
setContent: function (appendContent, isAppendTo) {
if (this.editor) {
this.editor.setContent(appendContent, isAppendTo);
}
},
// 獲取純文字
getContentTxt: function () {
if (this.editor) {
return this.editor.getContentTxt();
}
return '';
},
// 獲得帶格式的純文字
getPlainTxt: function () {
if (this.editor) {
return this.editor.getPlainTxt();
}
return '';
},
// 判斷是否有內容
hasContent: function () {
if (this.editor) {
return this.editor.hasContents();
}
return false;
},
// 插入給定的html
insertHtml: function (content) {
if (this.editor) {
this.editor.execCommand('insertHtml', content);
}
},
// 使編輯器獲得焦點
setFocus: function () {
if (this.editor) {
this.editor.focus();
}
},
// 設定高度
setHeight: function (height) {
if (this.editor) {
this.editor.setHeight(height);
}
}
});
module.exports = UEditor;
實現中的問題及解決方法
1.上傳圖片時的跨域問題
在原始碼裡 有 header['X_Requested_With'] = 'XMLHttpRequest';
後端需要配置 header('Access-Control-Allow-Headers', 'AccessToken, Content-Type, WebOrigin,X-Requested-With,X_Requested_With');
2. 進入文字編輯介面編輯器沒有加載出來
可能原因： 放置編輯器的容器id, 容器下的編輯器已經存在
解決方法如程式碼所示
this.editor.ready(function (ueditor) {
if (!ueditor) {
// 如果初始化後ueditor不存在刪除後重新呼叫
UE.delEditor(self.props.id);
self.initEditor();
}
})
3.注意這兩個引數配置
'UEDITOR_HOME_URL': '/react/dist/ueditor/', // 編輯器例項路徑,即ueditor檔案包所放置的位置
serverUrl: window.api_host + '/innerMessage/uploadImage', // 後端提供載入圖片介面，這是個共同介面介面包括了後端配置的config.json檔案 通過url中action
值不同來區分（config|uploaimage 等）