欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Ckedit5 + Base64图片上传

程序员文章站 2022-03-21 08:32:27
核心步骤安装npm(如已经安装可忽略)Clone the build repository.Install the plugin package.Add it to the build configuration.Bundle the build.安装npmClone the build repository.修改\ckeditor5-build-classic-master\src\ckdeit.js包重复问题按照官方文档说明,build后Ckedit编译提示包重复,无法使用ckedit...

核心步骤

安装npm(如已经安装可忽略)
Clone the build repository.
Install the plugin package.
Add it to the build configuration.
Bundle the build.

安装npm

http://nodejs.cn/download/

Clone the build repository.

  1. 下载:
    直接下载
    https://codeload.github.com/ckeditor/ckeditor5/zip/stable
    或者:
    git clone -b stable https://github.com/ckeditor/ckeditor5

注意:

此处不要因素速度慢,直接下载
https://github.com/ckeditor/ckeditor5-build-classic/archive/master.zip

该版本为v19版本,而依赖包为23版本,会因为版本不一致提示包重复。**

  1. 转到下载目录 安装依赖包
cd ckeditor5/packages/ckeditor5-build-classic
npm install

下面提示信息可忽略
Ckedit5 + Base64图片上传

Install the plugin package

npm install --save @ckeditor/ckeditor5-upload

Add it to the build configuration.

  1. 修改\ckeditor5-build-classic-master\src\ckedit.js
  2. 增加下面代码
import Base64UploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/base64uploadadapter';
  1. ckeditor-duplicated-modules when installing SimpleUploadAdapter 处理
    (在最新版本23中此步骤省略)
    如出现build后Ckedit编译提示包重复,无法使用ckedit。
    需要将四行代码注释。
//import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder'; 
//import EasyImage from '@ckeditor/ckeditor5-easy-image/src/easyimage'; 
... ....
//CKFinder,  
//EasyImage, 
  1. 具体代码如下:
/**
 * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
 */

// The editor creator to use.
import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';

import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import UploadAdapter from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter';
import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote';
import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder';
import EasyImage from '@ckeditor/ckeditor5-easy-image/src/easyimage';
import Heading from '@ckeditor/ckeditor5-heading/src/heading';
import Image from '@ckeditor/ckeditor5-image/src/image';
import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption';
import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle';
import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar';
import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload';
import Indent from '@ckeditor/ckeditor5-indent/src/indent';
import Link from '@ckeditor/ckeditor5-link/src/link';
import List from '@ckeditor/ckeditor5-list/src/list';
import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice';
import Table from '@ckeditor/ckeditor5-table/src/table';
import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar';
import TextTransformation from '@ckeditor/ckeditor5-typing/src/texttransformation';
//ADD
import Base64UploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/base64uploadadapter';


export default class ClassicEditor extends ClassicEditorBase {}

// Plugins to include in the build.
ClassicEditor.builtinPlugins = [
	Essentials,
	UploadAdapter,
	Autoformat,
	Bold,
	Italic,
	BlockQuote,
	CKFinder,
	EasyImage,
	Heading,
	Image,
	ImageCaption,
	ImageStyle,
	ImageToolbar,
	ImageUpload,
	Indent,
	Link,
	List,
	MediaEmbed,
	Paragraph,
	PasteFromOffice,
	Table,
	TableToolbar,
	TextTransformation,
	//ADD
	Base64UploadAdapter
];

// Editor configuration.
ClassicEditor.defaultConfig = {
	toolbar: {
		items: [
			'heading',
			'|',
			'bold',
			'italic',
			'link',
			'bulletedList',
			'numberedList',
			'|',
			'indent',
			'outdent',
			'|',
			'imageUpload',
			'blockQuote',
			'insertTable',
			'mediaEmbed',
			'undo',
			'redo'
		]
	},
	image: {
		toolbar: [
			'imageStyle:full',
			'imageStyle:side',
			'|',
			'imageTextAlternative'
		]
	},
	table: {
		contentToolbar: [
			'tableColumn',
			'tableRow',
			'mergeTableCells'
		]
	},
	// This value must be kept in sync with the language defined in webpack.config.js.
	language: 'en'
};

Bundle the build.

npm run build

执行结果:
Ckedit5 + Base64图片上传

测试

用浏览器打开
ckeditor5-build-classic-master\sample\index 页面尝试增加图片,增加成功。
Ckedit5 + Base64图片上传

问题

ckeditor-duplicated-modules when installing SimpleUploadAdapter 处理
按照官方文档npm build无错误,但无法浏览器解析。
解决方法:

  1. google浏览器,开发者工具,查看错误提示。
  2. 确定classic版本和导入的Base64UploadAdapter包一致均为23版本后解决问题。
  3. 删除部分import包(23.0.1 版本不需删除),

参考链接

  1. https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/installing-plugins.html
  2. https://ckeditor.com/docs/ckeditor5/latest/features/image-upload/base64-upload-adapter.html
  3. plugin重复处理
    https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-ckeditor-duplicated-modules

本文地址:https://blog.csdn.net/m0_53361773/article/details/110850448