沒有前言绊诲，開始講解劣挫。
使用環(huán)境： 基于react的antd-pro框架橡淑，這部分受antd的影響較泻咔（僅部分表標簽）蕊梧。CKEditor5的document 12.1.0版本.
1、 安裝與引入
cnpm install @ckeditor/ckeditor5-build-decoupled-document
可根據(jù)需求安裝對應的主題插件:
npm install --save @ckeditor/ckeditor5-build-classic
# Or:
npm install --save @ckeditor/ckeditor5-build-inline
# Or:
npm install --save @ckeditor/ckeditor5-build-balloon
# Or:
npm install --save @ckeditor/ckeditor5-build-balloon-block
# Or:
npm install --save @ckeditor/ckeditor5-build-decoupled-document
index.js
import React, { PureComponent, Fragment } from 'react';
import { Spin } from 'antd'
... ...
// 自定義圖片上傳功能
import MyUploadAdapter from './UploadAdapter';
// 引入ckeditor5插件
import DecoupledEditor from '@ckeditor/ckeditor5-build-decoupled-document';
// 引入中文包
import '@ckeditor/ckeditor5-build-classic/build/translations/zh-cn';
... ...
export default class Rich_text_editor extends PureComponent {
... ...
}
2人芽、初始化
export default class Rich_text_editor extends PureComponent {
constructor(props) {
super(props);
this.state = {
loading: false,
}
this.editor = {};
}
componentDidMount() {
// 接受傳入的初始內(nèi)容
let { value = "" } = this.props;
this.init(value);
}
init(init_value){
// 自定圖片上傳組件
const MyCustomUploadAdapterPlugin = ( editor ) => {
editor.plugins.get( 'FileRepository' ).createUploadAdapter = ( loader ) => {
// 抓取圖片上傳狀態(tài)
loader.uploadType = this.uploadType.bind(this)
return new MyUploadAdapter( loader );
};
}
// 初始化組件
DecoupledEditor
.create(
// 文本內(nèi)容所在標簽
document.querySelector( '#editor' ),
{
// 設置語言為中文望几，需引入中文包，謝謝評論區(qū)`小籠包不是包`指正萤厅。
language : 'zh-cn',
// 設置初始值
initialData: init_value,
// 加載圖片上傳組件
extraPlugins: [ MyCustomUploadAdapterPlugin ],
// 移除組件
removePlugins: [ 'Link', 'MediaEmbed' ],
// 自定字號列表
fontSize: {options: [10,12,14,16,18,20,24]},
// 自定字體列表
fontFamily:{
options: [
'default',
'Arial, Helvetica, sans-serif',
'Courier New, Courier, monospace',
'Georgia, serif',
'Lucida Sans Unicode, Lucida Grande, sans-serif',
'Tahoma, Geneva, sans-serif',
'Times New Roman, Times, serif',
'Trebuchet MS, Helvetica, sans-serif',
'Verdana, Geneva, sans-serif',
]},
// 自定heading列表
heading: {
options: [
{ model: 'paragraph', title: '正文', class: 'ck-heading_paragraph' },
{ model: 'heading1', view: 'h1', title: '標題1', class: 'ck-heading_heading1' },
{ model: 'heading2', view: 'h2', title: '標題2', class: 'ck-heading_heading2' },
{ model: 'heading3', view: 'h3', title: '標題3', class: 'ck-heading_heading3' },
{ model: 'heading4', view: 'h4', title: '標題4', class: 'ck-heading_heading4' },
]
},
// 自定圖片toolbar內(nèi)容
image: {
toolbar: [ 'imageTextAlternative' ]
}
// 還有其他的橄抹，有需要請查看官方文檔，格式基本差不多
}
)
.then( editor => {
// 選擇toolbar所在標簽
const toolbarContainer = document.querySelector( '#toolbar-container' );
toolbarContainer.appendChild( editor.ui.view.toolbar.element );
this.editor = editor;
// 內(nèi)容變更時觸發(fā)惕味，獲取內(nèi)容楼誓，因為我是寫完直接下一步的。
editor.model.document.on('change:data', (e)=>{
let richText = editor.getData();
... ...
})
})
.catch( error => {
console.error( error );
});
}
// 圖片上傳狀態(tài)
uploadType(type){
this.setState({
loading: type
})
}
render () {
return (
<Spin spinning={this.state.loading}>
<div className={stylei.editorElem} >
<div id="toolbar-container" className={stylei.container}></div>
<div id="editor" className={stylei.content} >
<p>請輸入文本內(nèi)容...</p>
</div>
</div>
</Spin>
)
}
}
以上按照官方文檔也能寫個差不多名挥，主要是圖片上傳部分
3疟羹、圖片上傳(fetch方式)
uploadType.js
// 封裝的fetch上傳組件
import { imageUpload } from '@/services/api';
export default class MyUploadAdapter {
constructor( loader ) {
this.loader = loader;
}
upload () {
/*
注意此處的uploadType方法。
這是我在index,js中 自己定義了一個uploadType函數(shù)，并放在了
loader中一起傳了過來：
const MyCustomUploadAdapterPlugin = ( editor ) => {
editor.plugins.get( 'FileRepository' ).createUploadAdapter = ( loader ) => {
// 抓取圖片上傳狀態(tài)
loader.uploadType = this.uploadType.bind(this)
return new MyUploadAdapter( loader );
};
}
*/
// 傳入開始狀態(tài)
this.loader.uploadType(true)
return this.loader.file
.then( file => new Promise( async ( resolve, reject ) => {
let userMess = localStorage.getItem('userMess');
if(userMess){
// 這一部分都是普通的數(shù)據(jù)處理榄融，根據(jù)需求自己修改
const { pucid } = JSON.parse(userMess);
var data = new FormData();
data.append("picture", file);
data.append("pucid", pucid);
let res = await imageUpload(data);
// 傳入結(jié)束狀態(tài)
this.loader.uploadType(false)
if(res){
let { message, status, data={} } = res;
if(status == 200){
/* 此格式為固定格式参淫，default表示為默認圖片，
另外還有其他格式請參考官方文檔愧杯，這部分比較容易理解涎才，不做贅述
參考此處：https://ckeditor.com/docs/ckeditor5/latest/framework/guides/deep-dive/upload-adapter.html#responsive-images-and-srcset-attribute
*/
resolve( { default: data.pictureUrl } );
} else { reject(message) }
} else { reject('圖片上傳失敗') }
} else { reject('獲取用戶信息失敗，請重新登錄') }
})
);
}
// Aborts the upload process.
abort() {
console.log('暫停上傳')
}
}
uploadType寫完之后力九，按照"初始化"部分引入即可耍铜。
