ckeditor5 右缩进插件扩展 （三）

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

里面用到几个关键方法：

// 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源码下载地址