Kaynağa Gözat

Added Formats feature.

Szymon Kupś 9 yıl önce
ebeveyn
işleme
af19fd83e1

+ 59 - 0
packages/ckeditor5-heading/src/formats.js

@@ -0,0 +1,59 @@
+/**
+ * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+'use strict';
+
+import Feature from '../feature.js';
+import FormatsEngine from './formatsengine.js';
+import Model from '../ui/model.js';
+import ListDropdownController from '../ui/dropdown/list/listdropdown.js';
+import ListDropdownView from '../ui/dropdown/list/listdropdownview.js';
+import Collection from '../utils/collection.js';
+
+export default class Formats extends Feature {
+	static get requires() {
+		return [ FormatsEngine ];
+	}
+
+	init() {
+		const editor = this.editor;
+		const t = editor.t;
+		const command = editor.commands.get( 'format' );
+		const formats = command.formats;
+		const collection = new Collection();
+
+		// Add formats to collection.
+		for ( let format of formats ) {
+			collection.add( new Model( {
+				id: format.id,
+				label: t( format.label )
+			} ) );
+		}
+
+		// Create item list model.
+		const itemListModel = new Model( {
+			items: collection
+		} );
+
+		// Create dropdown model.
+		const dropdownModel = new Model( {
+			isEnabled: true,
+			isOn: false,
+			label: t( 'Formats' ),
+			content: itemListModel
+		} );
+
+		//Bind dropdown model to command.
+		dropdownModel.bind( 'isEnabled' ).to( command, 'isEnabled' );
+
+		// Execute command when item from dropdown is selected.
+		this.listenTo( itemListModel, 'execute', ( evtInfo, itemModel ) => {
+			editor.execute( 'format', itemModel.id );
+			dropdownModel.label = t( itemModel.label );
+		} );
+
+		editor.ui.featureComponents.add( 'formats', ListDropdownController, ListDropdownView, dropdownModel );
+	}
+}

+ 4 - 4
packages/ckeditor5-heading/src/formatsengine.js

@@ -12,10 +12,10 @@ import Paragraph from '../paragraph/paragraph.js';
 import FormatsCommand from './formatscommand.js';
 
 const formats = [
-	{ id: 'paragraph', viewElement: 'p' },
-	{ id: 'heading1', viewElement: 'h2' },
-	{ id: 'heading2', viewElement: 'h3' },
-	{ id: 'heading3', viewElement: 'h4' }
+	{ id: 'paragraph', viewElement: 'p', label: 'Paragraph' },
+	{ id: 'heading1', viewElement: 'h2', label: 'Heading 1' },
+	{ id: 'heading2', viewElement: 'h3', label: 'Heading 2' },
+	{ id: 'heading3', viewElement: 'h4', label: 'Heading 3' }
 ];
 
 export default class FormatsEngine extends Feature {