1. Objective: To achieve a rich text editor with the following functions
Undo, redo, Bold, underline, italic, Align left, center, Align right, clear styles, insert imagesCopy the codeThe target effect picture is as follows:
In the CKEditor website example, click switch on Builds in the left navigation bar to see several rich text editor types. Take classic as an example.
2. Get started
Select Classic Editor in the left menu, you can see the Classic versionThe default UIDisplay, as shown below:
Inside the toolbar tools and display order is the default classic model.
According to the official document:
- Installing dependency packages
npm install --save @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic
Copy the code- For use in projects
import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
const MyEditor = () = > {
return (
<CKEditor
editor={ClassicEditor}
data="Hello from CKEditor 5!
"
onReady={editor= >{ console.log('Editor is ready to use! ', editor); }} / >
);
}
export default MyEditor;
Copy the codeThe project is running with the default editor displayed intact. If all the tools you want are included in the default editor, you can add a configuration to the CKEditor component. In the configuration, specify the tool names and order you want:
<CKEditor
editor={ClassicEditor}
data="Hello from CKEditor 5!
"
config={{
toolbar: ['undo'.'redo'.'|'.'bold']
}}
/>
Copy the code3. How to achieve the target effect
CKEditor has a number of plugins that you can support off the shelf. In the classic editor, the default package is a bunch of plugins, such as Bold, Italic, etc. What other plugins are packaged by default? We can check it like this:
CKEditor allows you to build your code online according to your needs. Click on the Online Builder in the navigation bar of the official website. The first step is to select the Classic type. “Picked Plugins” is a classic version of a plugin. You can also add plugins you need and remove them.
Returning to our target, we can see that the tools we need Underline, left align, center align, right align, and Remove format are not in the default editor. To achieve our goal, we have two ways:
- Method 1: Use online Builder to customize compilation and packaging
Open online Builder;
- Choose Editor type: Select Classic;
- Choose editor plugins: add Underline, Alignment and Remove format to Remove plugins that we do not need.
- Choose Toolbar items: Adjust the display order of tools in the toolbar, and click to delete unnecessary tools.
- Choose the default Editor Language: Select the editor’s default language (find the other language files in the Translations directory), and we’ll check Chinese;
- Click Start to build our custom editor and download it after completion.
Unzip the downloaded files and we get a folder like this:
Open the browser to sample/index.html to see the editor effect of our custom configuration. Next, we move our custom compilation packaged components to our own project:
- Create a new add component folder in your project, such as CKEditor;
- Copy the build/ckeditor. Js file to ckeditor /index.js.
- Copy the required translation. We just checked Chinese, so we need to copy build/translations/zh-cn.js to CKEditor/translations/zh-cn.js.
Used in the project:
import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@/components/CKEditor';
const MyEditor = () = > {
return (
<CKEditor
editor={ClassicEditor}
data="Hello from CKEditor 5!
"
config={{
language: 'zh-cn',
toolbar:['undo',
'redo',
'|',
'bold',
'underline',
'italic',
'alignment',
'removeFormat',
'|',
'imageUpload']}} / >
);
}
export default MyEditor;
Copy the codeRun and see what we need 🙂
- Method 2: Local custom build package
Steps:
- Cloning source
git clone -b stable https://github.com/ckeditor/ckeditor5
Copy the code- Install the source code first already has dependencies
cd ckeditor5/packages/ckeditor5-build-classic
npm install
Copy the code- Install the dependencies that need to be added
According to our goal, we need to add plug-in Alignment and Remove format, installed in sequence. Underlinede is included in the installed @ckeditor/ckeditor5-basic-styles.
npm install --save-dev @ckeditor/ckeditor5-alignment
npm install --save-dev @ckeditor/ckeditor5-remove-format
Copy the code- Edit the SRC/ckeditor js
ClassicEditor. Plug-in ClassicEditor builtinPlugins configuration needed. DefaultConfig default configuration
ClassicEditor.defaultConfig = {
toolbar: {
items: [
'undo'.'redo'.'|'.'bold'.'underline'.'italic'.'numberedList'.'bulletedList'.'outdent'.'indent'.'alignment'.'removeFormat'.'|'.'imageUpload',]},image: {
toolbar: [
'imageStyle:full'.'imageStyle:side'.'|'.'imageTextAlternative',]},language: 'zh-cn'
};
Copy the codeThe plugin reference should be the same as the SRC /ckeditor.js file you downloaded online.
- Local building
npm run build
Copy the codeAfter the build, build/ckeditor.js will be regenerated. At this point, the local build package is complete.
- For use in projects
- Project use can be used in the same way, directly generated as downloaded source code.
- If there is a private library, you can also upload it to the private library, and then install and use it in the project, which is the same as the classical style in the second picture above.
To note, however, the custom packaging, can write to the configuration of the direct ClassicEditor. DefaultConfig default configuration, therefore, when using, and if the default configuration is consistent, can need not repeat configuration.
At this point, we have achieved the effect of the target UI. We tried it out and everything on the toolbar worked, but uploading photos didn’t work. The revolution is not yet complete.
4. Upload pictures
Here I made a custom upload adapter:
class MyUploadAdapter {
constructor(loader) {
this.loader = loader;
}
upload() {
return this.loader.file.then(file= > new Promise((resolve, reject) = > {
const data = new FormData();
const config = {
headers: { 'content-type': 'multipart/form-data'}}; data.append('file', file);
axios.post(`${file_prefix}/uploadimage`, data, config).then(res= > {
if (res.data && res.data.status === 0) {
resolve({
default: res.data.data.key
});
} else {
reject(res.data && res.data.message);
}
}).catch(err= >{ reject(err); }); }}))abort(){}}Copy the codeThen apply the adapter to our editor:
const MyCustomUploadAdapterPlugin = (editor) => { editor.plugins.get('FileRepository').createUploadAdapter = (loader) => { return new MyUploadAdapter(loader); }; };Copy the code// Add a plugin to the configuration
extraPlugins: [ MyCustomUploadAdapterPlugin ]
Copy the codeAnd here we are