前言
本文將簡單講述CKEditor5的配置、使用，以及如何自定義plugin，第一次寫文章，如果有錯誤，希望大家?guī)兔χ赋霾⑶叶喽喟?/p>
CKEditor5簡介
CKEditor經歷多年的風吹雨打，已相對較為成熟，而我們要講的CKEditor5版本不僅在用法上做出了很大的改變，最重要的是已不再兼容IE，因此有IE需求的同學請使用CKEditor4。
開始
CKEditor5可以分為Classic editor、Inline editor、Balloon editor、Balloon block editor、Document editor五類，本文以Classic Editor為例：
script引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CKEditor 5 – Classic editor</title>
<script src="https://cdn.ckeditor.com/ckeditor5/21.0.0/classic/ckeditor.js"></script>
</head>
<body>
<h1>Classic editor</h1>
<div id="editor">
<p>This is some sample content.</p>
</div>
<script>
ClassicEditor
.create( document.querySelector( '#editor' ), {
// config
} )
.then( editor => {
// do something
} )
.catch( error => {
console.error( error );
} );
</script>
</body>
</html>
npm：
npm install --save @ckeditor/ckeditor5-build-classic
代碼如下：
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
ClassicEditor
.create( document.querySelector( '#editor' ), {
// config
} )
.then( editor => {
// get data
console.log(editor.getData());
// set data
editor.setData('<span>test</span>')
} )
.catch( error => {
console.log( error );
} );
此時，已經可以使用基礎的editor了。如代碼所示，獲取內容和設置內容的方法分別為editor.getData()和editor.setData()。
Webpack配置
當使用前端框架時，可能需要配置webpack，具體配置詳見：
自定義CKEditor
之前引入的包是官方構建好的包，一般可以滿足基本需求，但有時需求并不能如你所愿，所以需要自定義CKEditor功能。
安裝依賴：
npm install --save @ckeditor/ckeditor5-editor-classic
npm install --save @ckeditor/ckeditor5-essentials
npm install --save @ckeditor/ckeditor5-paragraph
npm install --save @ckeditor/ckeditor5-basic-styles
npm install --save @ckeditor/ckeditor5-image
安裝的依賴中第一項'@ckeditor/ckeditor5-editor-classic'為基礎Classic editor；后四項為官方提供的plugin（還有很多，詳見https://ckeditor.com/docs/ckeditor5/latest/api）。
代碼如下：
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
import Image from '@ckeditor/ckeditor5-image/src/image';
import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption';
ClassicEditor
.create( document.querySelector( '#editor' ), {
plugins: [ Essentials, Paragraph, Bold, Italic, Image, ImageCaption ],
toolbar: [ 'bold', 'italic' ]
} )
.then( editor => {
console.log( 'Editor was initialized', editor );
} )
.catch( error => {
console.error( error.stack );
} );
此時需要注意引入Classic editor并不是在開始中引入的構建好的@ckeditor/ckeditor5-build-classic，而是@ckeditor/ckeditor5-editor-classic，并且在imprort引用時，并不是全引用，而是@ckeditor/ckeditor5-editor-classic/src/classiceditor，否則都會報“ckeditor-duplicated-modules”的錯，這個報錯的原因是由于CKEditor中有重復引用的情況。
在這里說一下我碰到的百年難得一遇的坑，在npm安裝依賴時，正趕上CKEditor5更新npm包，導致前幾個包是20.0.0版本，后安裝的是21.0.0，導致了“ckeditor-duplicated-modules”報錯，wtf！?。∷源蠹胰绻龅竭@個錯，也檢查一下版本，如果版本有問題，建議刪除node-modules內文件和package-lock.json，重新執(zhí)行npm install。
新建plugin
安裝依賴
npm install --save @ckeditor/ckeditor5-core
npm install --save @ckeditor/ckeditor5-ui
代碼如下：
import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
import imageIcon from '@ckeditor/ckeditor5-core/theme/icons/image.svg';
class InsertImage extends Plugin {
init() {
const editor = this.editor;
editor.ui.componentFactory.add( 'insertImage', locale => {
const view = new ButtonView( locale );
view.set( {
label: 'Insert image',
icon: imageIcon,
tooltip: true
} );
// Callback executed once the image is clicked.
view.on( 'execute', () => {
const imageUrl = prompt( 'Image URL' );
editor.model.change( writer => {
const imageElement = writer.createElement( 'image', {
src: imageUrl
} );
// Insert the image in the current selection location.
editor.model.insertContent( imageElement, editor.model.document.selection );
} );
} );
return view;
} );
}
}
合并代碼
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
import Image from '@ckeditor/ckeditor5-image/src/image';
import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption';
import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
import imageIcon from '@ckeditor/ckeditor5-core/theme/icons/image.svg';
class InsertImage extends Plugin {
init() {
const editor = this.editor;
editor.ui.componentFactory.add( 'insertImage', locale => {
const view = new ButtonView( locale );
view.set( {
label: 'Insert image',
icon: imageIcon,
tooltip: true
} );
// Callback executed once the image is clicked.
view.on( 'execute', () => {
const imageUrl = prompt( 'Image URL' );
editor.model.change( writer => {
const imageElement = writer.createElement( 'image', {
src: imageUrl
} );
// Insert the image in the current selection location.
editor.model.insertContent( imageElement, editor.model.document.selection );
} );
} );
return view;
} );
}
}
ClassicEditor
.create( document.querySelector( '#editor' ), {
plugins: [ Essentials, Paragraph, Bold, Italic, Image, InsertImage, ImageCaption ],
toolbar: [ 'bold', 'italic', 'insertImage' ]
} )
.then( editor => {
console.log( 'Editor was initialized', editor );
} )
.catch( error => {
console.error( error.stack );
} );
這就是添加了insertImage plugin最終代碼了，實際項目中建議將plugin和editor實現文件分離，這個plugin較為簡單，官方建議將plugin拆分為editing和ui兩個模塊，如果有時間再給大家更新一個有command個widget的plugin以及寫plugin的一些細節(jié)介紹。
結語
首次發(fā)文，水平有限，大家多多批評，雖然我不一定改，hahahahahahahah...
