瀏覽代碼

Docs: Documented the feature config.

Aleksander Nowodzinski 6 年之前
父節點
當前提交
12475790cb
共有 1 個文件被更改,包括 87 次插入0 次删除
  1. 87 0
      packages/ckeditor5-code-block/src/codeblock.js

+ 87 - 0
packages/ckeditor5-code-block/src/codeblock.js

@@ -36,3 +36,90 @@ export default class CodeBlock extends Plugin {
 		return 'CodeBlock';
 	}
 }
+
+/**
+ * The configuration of the {@link module:code-block/codeblock~CodeBlock} feature.
+ *
+ * Read more in {@link module:code-block/codeblock~CodeBlockConfig}.
+ *
+ * @member {module:code-block/codeblock~CodeBlockConfig} module:core/editor/editorconfig~EditorConfig#codeBlock
+ */
+
+/**
+ * The configuration of the {@link module:code-block/codeblock~CodeBlock code block feature}.
+ *
+ *		ClassicEditor
+ *			.create( editorElement, {
+ * 				codeBlock:  ... // Code block feature configuration.
+ *			} )
+ *			.then( ... )
+ *			.catch( ... );
+ *
+ * See {@link module:core/editor/editorconfig~EditorConfig all editor options}.
+ *
+ * @interface CodeBlockConfig
+ */
+
+/**
+ * The code block language descriptor. See {@link module:code-block/codeblock~CodeBlockConfig#languages} to learn more.
+ *
+ *		{
+ *			 class: 'javascript',
+ *			 label: 'JavaScript'
+ *		}
+ *
+ * @typedef {Object} module:code-block/codeblock~CodeBlockLanguageDefinition
+ * @property {String} label The human–readable label associated with the language displayed in the UI.
+ * @property {String} class The CSS class associated with the language.
+ */
+
+/**
+ * The list of code languages available in the user interface to choose for a particular code block.
+ * The language of the code block is represented as a CSS class set on the `<code>` element, both
+ * when editing and in the editor data:
+ *
+ *		<pre><code class="javascript">window.alert( 'Hello world!' )</code></pre>
+ *
+ * The CSS class associated with the language can be then used by third–party code syntax
+ * highlighters to detect and apply the correct highlighting. Use this configuration
+ * to match requirements of your integration:
+ *
+ *		ClassicEditor
+ *			.create( editorElement, {
+ *				codeBlock: {
+ *					languages: [
+ * 						{ class: 'plaintext', label: 'Plain text' }, // The default language.
+ *						{ class: 'php', label: 'PHP' },
+ *						{ class: 'java', label: 'Java' },
+ *						{ class: 'javascript', label: 'JavaScript' },
+ *						{ class: 'python', label: 'Python' }
+ *					]
+ *				}
+ *		} )
+ *		.then( ... )
+ *		.catch( ... );
+ *
+ * The default value is as follows:
+ *
+ *		languages: [
+ *			{ class: 'plaintext', label: 'Plain text' }, // The default language.
+ *			{ class: 'c', label: 'C' },
+ *			{ class: 'cs', label: 'C#' },
+ *			{ class: 'cpp', label: 'C++' },
+ *			{ class: 'css', label: 'CSS' },
+ *			{ class: 'diff', label: 'Diff' },
+ *			{ class: 'xml', label: 'HTML/XML' },
+ *			{ class: 'java', label: 'Java' },
+ *			{ class: 'javascript', label: 'JavaScript' },
+ *			{ class: 'php', label: 'PHP' },
+ *			{ class: 'python', label: 'Python' },
+ *			{ class: 'ruby', label: 'Ruby' },
+ *			{ class: 'typescript', label: 'TypeScript' },
+ *		]
+ *
+ * **Note**: The first language defined in the configuration is considered the default one. This means it will be
+ * applied to code blocks loaded from data that have no CSS `class` specified (or no matching `class` in the config).
+ * It will also be used when creating new code blocks using the main UI button. By default it is "Plain text".
+ *
+ * @member {Array.<module:code-block/codeblock~CodeBlockLanguageDefinition>} module:code-block/codeblock~CodeBlockConfig#languages
+ */