React使用CKEditor全网最详细讲解(三)

上两篇文章讲解了CKEditor5的基本使用&＃xff0c;本文主要讲解CKEditor的高级使用&＃xff0c;包括自定义编辑栏插件、自定义上传图片、插件的详细配置。

一、环境介绍

博主用到的React框架是react-app-rewired&＃43;customize-cra配置&＃xff0c;这一点和webpack有所不同&＃xff0c;webpack的配置方式可以参照CKEditor5的官网配置&＃xff0c;官网给出的配置是根据webpack来配置的&＃xff0c;链接为&＃xff1a;https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html&＃xff0c;本文就react-app-rewired&＃43;customize-cra进行讲解

二、依赖下载

这里主要讲解CKEditor5插件依赖下载

yarn add &＃64;ckeditor/ckeditor5-adapter-ckfinder&＃64;ckeditor/ckeditor5-autoformat&＃64;ckeditor/ckeditor5-basic-styles&＃64;ckeditor/ckeditor5-block-quote&＃64;ckeditor/ckeditor5-build-classic&＃64;ckeditor/ckeditor5-ckfinder&＃64;ckeditor/ckeditor5-code-block&＃64;ckeditor/ckeditor5-dev-webpack-plugin&＃64;ckeditor/ckeditor5-easy-image&＃64;ckeditor/ckeditor5-editor-classic&＃64;ckeditor/ckeditor5-essentials&＃64;ckeditor/ckeditor5-heading&＃64;ckeditor/ckeditor5-highlight&＃64;ckeditor/ckeditor5-indent&＃64;ckeditor/ckeditor5-link&＃64;ckeditor/ckeditor5-list&＃64;ckeditor/ckeditor5-media-embed&＃64;ckeditor/ckeditor5-paragraph&＃64;ckeditor/ckeditor5-paste-from-office&＃64;ckeditor/ckeditor5-react&＃64;ckeditor/ckeditor5-table&＃64;ckeditor/ckeditor5-theme-lark


三、config-overrides.js配置

const path &＃61; require(&＃39;path&＃39;)
const { styles } &＃61; require(&＃39;&＃64;ckeditor/ckeditor5-dev-utils&＃39;);
const CKEditorWebpackPlugin &＃61; require(&＃39;&＃64;ckeditor/ckeditor5-dev-webpack-plugin&＃39;);const {override,fixBabelImports,addLessLoader,addWebpackAlias,addWebpackModuleRule,addWebpackPlugin
} &＃61; require(&＃39;customize-cra&＃39;)module.exports &＃61; override(fixBabelImports(&＃39;import&＃39;, {libraryName: "antd", libraryDirectory: "lib",style: "css"}),addLessLoader({JavascriptEnabled: true,modifyVars: {"font-size-base": "12px","text-color": &＃39;rgba(0, 0, 0, .85)&＃39;,"btn-height-base": &＃39;24px&＃39;,"input-height-base": &＃39;24px&＃39;,"form-item-margin-bottom": &＃39;8px&＃39;}}),addWebpackAlias({&＃39;&＃64;&＃39;: path.resolve(__dirname, &＃39;src&＃39;),&＃39;components&＃39;: path.resolve(__dirname, &＃39;src/components&＃39;),&＃39;utils&＃39;: path.resolve(__dirname, &＃39;src/utils&＃39;),&＃39;views&＃39;: path.resolve(__dirname, &＃39;src/views&＃39;),&＃39;img&＃39;: path.resolve(__dirname, &＃39;src/img&＃39;)}),addWebpackModuleRule({ test: /ckeditor5-[^/\\]&＃43;[/\\]theme[/\\]icons[/\\][^/\\]&＃43;\.svg$/, use: [&＃39;raw-loader&＃39;] }),addWebpackModuleRule({test: /ckeditor5-[^/\\]&＃43;[/\\]theme[/\\].&＃43;\.css$/,use: [{ loader: &＃39;style-loader&＃39; },//{ loader: "css-loader" },{loader: &＃39;postcss-loader&＃39;,options: styles.getPostCssConfig({themeImporter: {themePath: require.resolve(&＃39;&＃64;ckeditor/ckeditor5-theme-lark&＃39;)},minify: true})}]}),addWebpackModuleRule({test: /\.html$/, use: [&＃39;html-loader&＃39;]}),addWebpackPlugin(new CKEditorWebpackPlugin({//See https://ckeditor.com/docs/ckeditor5/latest/features/ui-language.htmllanguage: &＃39;zh-cn&＃39;})))

四、编辑器配置

这里不能直接使用&＃64;ckeditor/ckeditor5-build-classic这个包了&＃xff0c;因为这个包已经包含了很多插件&＃xff0c;我们需要加入的代码编辑器插件与其冲突&＃xff0c;所以只能用&＃64;ckeditor/ckeditor5-editor-classic/src/classiceditor&＃xff0c;然后把插件一个个加载

import React from &＃39;react&＃39;
import CKEditor from &＃39;&＃64;ckeditor/ckeditor5-react&＃39;;
import ClassicEditor from &＃39;&＃64;ckeditor/ckeditor5-editor-classic/src/classiceditor&＃39;
import Essentials from &＃39;&＃64;ckeditor/ckeditor5-essentials/src/essentials&＃39;;
import UploadAdapter from &＃39;&＃64;ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter&＃39;;
import Autoformat from &＃39;&＃64;ckeditor/ckeditor5-autoformat/src/autoformat&＃39;;
import Bold from &＃39;&＃64;ckeditor/ckeditor5-basic-styles/src/bold&＃39;;
import Italic from &＃39;&＃64;ckeditor/ckeditor5-basic-styles/src/italic&＃39;;
import BlockQuote from &＃39;&＃64;ckeditor/ckeditor5-block-quote/src/blockquote&＃39;;
import Heading from &＃39;&＃64;ckeditor/ckeditor5-heading/src/heading&＃39;;
import Image from &＃39;&＃64;ckeditor/ckeditor5-image/src/image&＃39;;
import ImageCaption from &＃39;&＃64;ckeditor/ckeditor5-image/src/imagecaption&＃39;;
import ImageStyle from &＃39;&＃64;ckeditor/ckeditor5-image/src/imagestyle&＃39;;
import ImageToolbar from &＃39;&＃64;ckeditor/ckeditor5-image/src/imagetoolbar&＃39;;
import ImageUpload from &＃39;&＃64;ckeditor/ckeditor5-image/src/imageupload&＃39;;
import Indent from &＃39;&＃64;ckeditor/ckeditor5-indent/src/indent&＃39;;
import Link from &＃39;&＃64;ckeditor/ckeditor5-link/src/link&＃39;;
import List from &＃39;&＃64;ckeditor/ckeditor5-list/src/list&＃39;;
import Paragraph from &＃39;&＃64;ckeditor/ckeditor5-paragraph/src/paragraph&＃39;;
import PasteFromOffice from &＃39;&＃64;ckeditor/ckeditor5-paste-from-office/src/pastefromoffice&＃39;;
import Table from &＃39;&＃64;ckeditor/ckeditor5-table/src/table&＃39;;
import TableToolbar from &＃39;&＃64;ckeditor/ckeditor5-table/src/tabletoolbar&＃39;;
import CodeBlock from &＃39;&＃64;ckeditor/ckeditor5-code-block/src/codeblock&＃39;
import Highlight from &＃39;&＃64;ckeditor/ckeditor5-highlight/src/highlight&＃39;;
import ImageResize from &＃39;&＃64;ckeditor/ckeditor5-image/src/imageresize&＃39;import MyCustomUploadAdapterPlugin from &＃39;./MyUploadAdapter&＃39;//图片上传插件&＃xff0c;下一个章节会讲解export default class BCKEditor extends React.Component {constructor(props) {super(props)this.state &＃61; {}}render() {return (

自定义图片上传插件

五、自定义图片上传插件

这里用到的文件名为MyUploadAdapter.js&＃xff0c;导出的方法为&＃xff1a;MyCustomUploadAdapterPlugin&＃xff0c;在上一个步骤的&＃xff0c;extraPlugins已经配置

import { uploadFile } from &＃39;&＃64;/api&＃39;
import { message } from &＃39;antd&＃39;export default function MyCustomUploadAdapterPlugin( editor ) {editor.plugins.get( &＃39;FileRepository&＃39; ).createUploadAdapter &＃61; ( loader ) &＃61;> {return new MyUploadAdapter( loader );};
}class MyUploadAdapter {constructor(loader) {this.loader &＃61; loader;}upload() {return this.loader.file.then(file &＃61;> new Promise(async (resolve, reject) &＃61;> {var data &＃61; new FormData();data.append("files", file);let res &＃61; await uploadFile(data); //axios上传图片的Actionif (res) {let { errno } &＃61; res;if (errno &＃61;&＃61;&＃61; 0) {resolve({ default: res.data[0] });
//res.data[0]为图片的URL,格式为http://127.0.0.1/image/1.jpg} else { reject(message) }} else {message.error(&＃39;图片上传失败&＃39;)}}));}abort() {console.log(&＃39;暂停上传&＃39;)}}


axios中uploadFile 方法

export function uploadFile(params) {return request.post(&＃39;/file/upload&＃39;, params, fileHeaders)
}


到这里了还需要添加SpringBoot后台上传依赖&＃xff0c;具体Action代码为

&＃64;PostMapping(value &＃61; "/file/upload")public Map<String, Object> fileUpload(&＃64;RequestParam(value &＃61; "files") MultipartFile file, Model model,
HttpServletRequest request) {Map<String, Object> map &＃61; new HashMap<String, Object>();List<String> list &＃61; new ArrayList<String>();if (file.isEmpty()) {System.out.println("文件为空");}String fileName &＃61; file.getOriginalFilename(); // 文件名String suffixName &＃61; fileName.substring(fileName.lastIndexOf(".")); // 后缀名fileName &＃61; UUID.randomUUID() &＃43; suffixName; // 新文件名File dest &＃61; new File(ApplicationAutoConfiguration.filePath &＃43; fileName);if (!dest.getParentFile().exists()) {dest.getParentFile().mkdirs();}try {file.transferTo(dest);} catch (IOException e) {e.printStackTrace();}String prefix &＃61; Utils.getUrlPrefix(domainName, port);String filename &＃61; prefix &＃43; ApplicationAutoConfiguration.filePrefix &＃43; "/" &＃43; fileName;//filename为文件的全路径&＃xff0c;格式为http://127.0.0.1/images/1.jpglist.add(filename);map.put("errno", 0);map.put("data", list);return map;}


六、效果查看

七、样式修改

CKEditor5的编辑器高度是自动的&＃xff0c;需要自己设置指定的高度&＃xff0c;找到CKEditor5的css样式来修改&＃xff0c;如下

.myckeditor .ck-editor__main{height: 500px;
}.myckeditor .ck-content{height: 500px;
}


八、总结

CKEditor5是通过插件来进行菜单栏的配置和扩展&＃xff0c;不能沿用原来的&＃64;ckeditor/ckeditor5-build-classic&＃xff0c;需要使用新的编辑器&＃64;ckeditor/ckeditor5-editor-classic/src/classiceditor&＃xff0c;并且把菜单的依赖插件一个个加载并且导入&＃xff0c;比较重要的是webpack的配置以及自定义上传文件。今天的分析就到这里&＃xff0c;遇到什么问题解决不了可以给我留言。