zoukankan      html  css  js  c++  java
  • ckeditor5 增加居中alignment

    https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/installing-plugins.html

    克隆下来

    git clone -b stable https://github.com/ckeditor/ckeditor5-build-classic.git
    cd ckeditor5-build-classic
    npm install
    

    安装插件

    npm install --save-dev @ckeditor/ckeditor5-alignment
    

    修改src/ckeditor.js文件
    增加

    /**
     * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
     * For licensing, see LICENSE.md.
     */
    
    // 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 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 Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';     // <--- ADDED
    
    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,
    	Link,
    	List,
    	MediaEmbed,
    	Paragraph,
    	PasteFromOffice,
    	Table,
    	TableToolbar,
    
    	 Alignment                                                            // <--- ADDED
    ];
    
    // Editor configuration.
    ClassicEditor.defaultConfig = {
    	toolbar: {
    		items: [
    			'heading',
    			'|',
    			'alignment',                                                 // <--- ADDED
    			'bold',
    			'italic',
    			'link',
    			'bulletedList',
    			'numberedList',
    			'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: 'zh-cn'
    };
    

    打包

    yarn run build
    

    toolbar: ["undo", "redo", "|", "alignment", "bold", "italic", "blockQuote", "imageTextAlternative", "imageUpload", "heading", "link", "numberedList", "bulletedList"],
    
  • 相关阅读:
    保证在浏览器上word/图片/Excel的下载的表现形式一样
    C学习笔记 知识集锦(二)
    函数返回值
    C++ 四种新式类型转换
    构造&析构
    指针与引用
    C++三大特性 封装 继承 多态
    Git stash 常见用法
    Git branch && Git checkout常见用法
    linux Vi使用
  • 原文地址:https://www.cnblogs.com/jiqing9006/p/10679249.html
Copyright © 2011-2022 走看看