|
@@ -1,17 +1,20 @@
|
|
|
---
|
|
---
|
|
|
category: features
|
|
category: features
|
|
|
|
|
+menu-title: Word and character count
|
|
|
---
|
|
---
|
|
|
|
|
|
|
|
{@snippet features/build-word-count-source}
|
|
{@snippet features/build-word-count-source}
|
|
|
|
|
|
|
|
-# Word count
|
|
|
|
|
|
|
+# Word count and character count
|
|
|
|
|
|
|
|
-The {@link module:word-count/wordcount~WordCount} feature provides a possibility to track the number of words and characters written in the editor.
|
|
|
|
|
|
|
+The {@link module:word-count/wordcount~WordCount} feature provides a possibility to track the number of words and characters written in the rich-text editor.
|
|
|
|
|
|
|
|
## Demo
|
|
## Demo
|
|
|
|
|
|
|
|
{@snippet features/word-count}
|
|
{@snippet features/word-count}
|
|
|
|
|
|
|
|
|
|
+The example above was created by using the following HTML page structure:
|
|
|
|
|
+
|
|
|
```html
|
|
```html
|
|
|
<div id="editor">
|
|
<div id="editor">
|
|
|
<p>Hello world.</p>
|
|
<p>Hello world.</p>
|
|
@@ -20,6 +23,8 @@ The {@link module:word-count/wordcount~WordCount} feature provides a possibility
|
|
|
</div>
|
|
</div>
|
|
|
```
|
|
```
|
|
|
|
|
|
|
|
|
|
+You can use the code below to set up the WYSIWYG editor with the word and character count features as in the example above.
|
|
|
|
|
+
|
|
|
```js
|
|
```js
|
|
|
ClassicEditor
|
|
ClassicEditor
|
|
|
.create( document.querySelector( '#editor' ), {
|
|
.create( document.querySelector( '#editor' ), {
|
|
@@ -36,26 +41,29 @@ ClassicEditor
|
|
|
|
|
|
|
|
## Configuration options
|
|
## Configuration options
|
|
|
|
|
|
|
|
-There are two options which change the output container. If the {@link module:word-count/wordcount~WordCountConfig#displayWords} is set to to `false`, then the section with word count is hidden. Similarly, when the {@link module:word-count/wordcount~WordCountConfig#displayCharacters} is set to `false` it will hide the character counter.
|
|
|
|
|
|
|
+There are two configuration options available that change the output container of the word count and character count features:
|
|
|
|
|
+
|
|
|
|
|
+* If the {@link module:word-count/wordcount~WordCountConfig#displayWords} option is set to to `false`, the word counter will be hidden.
|
|
|
|
|
+* If the {@link module:word-count/wordcount~WordCountConfig#displayCharacters} option is set to `false`, the character counter will be hidden.
|
|
|
|
|
|
|
|
## Update event
|
|
## Update event
|
|
|
|
|
|
|
|
-Word count feature emits an {@link module:word-count/wordcount~WordCount#event:update update event} whenever there is a change in the model. This allows implementing customized behavior that reacts to word count updates.
|
|
|
|
|
|
|
+The Word count and character count feature emits an {@link module:word-count/wordcount~WordCount#event:update `update` event} whenever there is a change in the model. This allows implementing customized behaviors that react to word and character count updates.
|
|
|
|
|
|
|
|
-Below you can find an example, where the background color of a square is changed according to the number of characters in the editor. There is also a progress bar which indicates how many words is in it (the maximal value of the progress bar is set to 100, however, you can write further and progress bar remain in the maximal state).
|
|
|
|
|
|
|
+Below you can find an example where the background color of the circle is changed according to the number of characters in the editor. There is also a progress bar which indicates how many words are in it. The maximum value of the progress bar is set to 100, however, you can write further and the progress bar will remain in the maximum state.
|
|
|
|
|
|
|
|
{@snippet features/word-count-update}
|
|
{@snippet features/word-count-update}
|
|
|
|
|
|
|
|
```js
|
|
```js
|
|
|
ClassicEditor
|
|
ClassicEditor
|
|
|
.create( document.querySelector( '#editor' ), {
|
|
.create( document.querySelector( '#editor' ), {
|
|
|
- // configuration details
|
|
|
|
|
|
|
+ // Configuration details.
|
|
|
} )
|
|
} )
|
|
|
.then( editor => {
|
|
.then( editor => {
|
|
|
const wordCountPlugin = editor.plugins.get( 'WordCount' );
|
|
const wordCountPlugin = editor.plugins.get( 'WordCount' );
|
|
|
|
|
|
|
|
wordCountPlugin.on( 'update', ( evt, data ) => {
|
|
wordCountPlugin.on( 'update', ( evt, data ) => {
|
|
|
- // data is an object with "words" and "characters" field
|
|
|
|
|
|
|
+ // "data" is an object with "words" and "characters" fields.
|
|
|
doSthWithNewWordsNumber( data.words );
|
|
doSthWithNewWordsNumber( data.words );
|
|
|
doSthWithNewCharactersNumber( data.characters );
|
|
doSthWithNewCharactersNumber( data.characters );
|
|
|
} );
|
|
} );
|
|
@@ -92,8 +100,9 @@ ClassicEditor
|
|
|
## Common API
|
|
## Common API
|
|
|
|
|
|
|
|
The {@link module:word-count/wordcount~WordCount} plugin provides:
|
|
The {@link module:word-count/wordcount~WordCount} plugin provides:
|
|
|
- * {@link module:word-count/wordcount~WordCount#wordCountContainer} method. It returns a self-updating HTML element which is updated with the current number of words and characters in the editor. There is a possibility to remove "Words" or "Characters" counters with proper configuration of {@link module:word-count/wordcount~WordCountConfig#displayWords} and {@link module:word-count/wordcount~WordCountConfig#displayCharacters},
|
|
|
|
|
- * {@link module:word-count/wordcount~WordCount#event:update update event} which is fired whenever the plugins update the number of counted words and characters. There is a possibility to run own callback function with updated values. Please note that update event is throttled.
|
|
|
|
|
|
|
+
|
|
|
|
|
+ * The {@link module:word-count/wordcount~WordCount#wordCountContainer} method. It returns a self-updating HTML element which is updated with the current number of words and characters in the editor. You can remove the "Words" or "Characters" counters with a proper configuration of the {@link module:word-count/wordcount~WordCountConfig#displayWords} and {@link module:word-count/wordcount~WordCountConfig#displayCharacters} options.
|
|
|
|
|
+ * The {@link module:word-count/wordcount~WordCount#event:update `update` event}, fired whenever the plugins update the number of counted words and characters. You can run a custom callback function with updated values. Please note that the `update` event is throttled.
|
|
|
|
|
|
|
|
<info-box>
|
|
<info-box>
|
|
|
We recommend using the official {@link framework/guides/development-tools#ckeditor-5-inspector CKEditor 5 inspector} for development and debugging. It will give you tons of useful information about the state of the editor such as internal data structures, selection, commands, and many more.
|
|
We recommend using the official {@link framework/guides/development-tools#ckeditor-5-inspector CKEditor 5 inspector} for development and debugging. It will give you tons of useful information about the state of the editor such as internal data structures, selection, commands, and many more.
|