ckeditor5 右缩进插件扩展（三）

淡淡的烟草味﹌ 2022-05-16 10:21 240阅读 0赞

ckeditor5 竟然没用左右缩进操作，部门领导要我加上，只能硬着老皮上咯。  
ck5 虽然有文档，但如果扩展插件还是一团雾水，搞了半天才搞定。  
目录结构：  
![这里写图片描述][70]

里面用到几个关键方法：

// Get only those blocks from selected that can have alignment set
    const blocks = Array.from( doc.selection.getSelectedBlocks() );
    //获取顶层元素 是否存在右缩进属性
    const currentAlignment = blocks[ 0 ].getAttribute( INDENT );
    //如果不存在 则表示第一次点击 则进行右缩进20像素
    	if(currentAlignment==null){
    		 setIndentOnSelection( blocks, writer, 20 );
    	}else{
    		 //如果存在缩进，则每点击一次 则进行右缩进增加20像素
        setIndentOnSelection( blocks, writer, parseFloat(currentAlignment)+20 );
    }

//setIndentOnSelection函数就是设置相应属性变化

// Sets the alignment attribute on blocks.
    // @private
    function setIndentOnSelection( blocks, writer, alignment ) {
    	for ( const block of blocks ) {
    		writer.setAttribute( INDENT, alignment, block );
    	}
    }

**command==>conversion==>view试图变化**

command的execute里面去执行

writer.setAttribute( INDENT, alignment, block );

这里会去触发这里注册的属性变化，从而达到编辑器内容变更

editor.conversion.attributeToAttribute( {
    			model: {
    				key: INDENT,
    				values: valueArys
    			},
    			view: _getViewConfigs(valueArys)
    		} );

废话不多说了，文件内容大概如下，有不懂的或者需要源代码的可以qq我【289028210】，

indent.js文件内容：

import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
    
    import IndentEditing from './indentediting';
    import IndentUI from './indentui';
     
    export default class Indent extends Plugin {
    	/**
    	 * @inheritDoc
    	 */
    	static get requires() {
    		return [ IndentEditing, IndentUI ];
    	}
    
    	/**
    	 * @inheritDoc
    	 */
    	static get pluginName() {
    		return 'indent';
    	}
    }

indentcommand.js文件内容：

import Command from '@ckeditor/ckeditor5-core/src/command';
    import first from '@ckeditor/ckeditor5-utils/src/first';
    
    const INDENT = 'indent';
    
    export default class Indentcommand extends Command {
    
    	/**
    	 * Updates the command's {@link #value} and {@link #isEnabled} based on the current selection.
    	 */
    	refresh() {
    		const firstBlock = first( this.editor.model.document.selection.getSelectedBlocks() );
    
    		this.isEnabled = true;
    		/**
    		 * A value of the current block's alignment.
    		 *
    		 * @observable
    		 * @readonly
    		 * @member {String} #value
    		 */
    		this.value = ( this.isEnabled && firstBlock.hasAttribute( INDENT ) ) ? firstBlock.getAttribute( INDENT ) : '0px';
    	}
     
    	execute() {
    		const editor = this.editor;
    		const model = editor.model;
    		const doc = model.document;
    
    		model.change( writer => {
    			// Get only those blocks from selected that can have alignment set
    			const blocks = Array.from( doc.selection.getSelectedBlocks() );
    			const currentAlignment = blocks[ 0 ].getAttribute( INDENT );
    			if(currentAlignment==null){
    				setIndentOnSelection( blocks, writer, 20 );
    			}else{
    				setIndentOnSelection( blocks, writer, parseFloat(currentAlignment)+20 );
    			}
    		} );
    
    	}
    
    
    	/**
    	 * Checks whether a block can have alignment set.
    	 *
    	 * @private
    	 * @param {module:engine/model/element~Element} block The block to be checked.
    	 * @returns {Boolean}
    	 */
    	_canBeAligned( block ) {
    		return this.editor.model.schema.checkAttribute( block, INDENT );
    	}
    }
    
    // Sets the alignment attribute on blocks.
    // @private
    function setIndentOnSelection( blocks, writer, indentValue ) {
    	for ( const block of blocks ) {
    		writer.setAttribute( INDENT, indentValue, block );
    	}
    }

indentui.js文件内容：

import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
    import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
    
    import IndentIcon from '../theme/icons/indent.svg';
    
     
    
    const INDENT = 'indent';
    
    export default class IndentUI extends Plugin {
    	/**
    	 * @inheritDoc
    	 */
    	init() {
    		const editor = this.editor;
    		const t = editor.t;
    
    		// Add bold button to feature components.
    		editor.ui.componentFactory.add( INDENT, locale => {
    			const command = editor.commands.get( INDENT );
    			const view = new ButtonView( locale );
    
    			view.set( {
    				label: t( 'Indent' ),
    				icon: IndentIcon,
    				keystroke: 'CTRL+I',
    				tooltip: true
    			} );
    
    			view.bind( 'isEnabled' ).to( command );
    			// view.bind( 'isOn' ).to( command, 'value', value =>{return true;});
    			// Execute command.
    			this.listenTo( view, 'execute', ()=>{
    				editor.execute( INDENT );
    				editor.editing.view.focus();
    			} );
    
    			return view;
    		} );
    	}
    }
    
    // Sets the alignment attribute on blocks.
    // @private
    function setIndentOnSelection( blocks, writer, alignment ) {
    	for ( const block of blocks ) {
    		writer.setAttribute( "margin", alignment, block );
    	}
    }

[Gitee源码下载地址][Gitee]

[70]: /images/20220516/f7b6e72be48744a3bd90d1810138f693.png
[Gitee]: https://gitee.com/going100/ckeditorExtend