Sfoglia il codice sorgente

Docs: Word count guide, samples and readme updated. [skip ci]

Anna Tomanek 6 anni fa
parent
commit
2fd63cbcd4

+ 3 - 3
packages/ckeditor5-word-count/README.md

@@ -1,4 +1,4 @@
-CKEditor 5 word count feature
+CKEditor 5 word count and character count feature
 ===========================
 
 [![Join the chat at https://gitter.im/ckeditor/ckeditor5](https://badges.gitter.im/ckeditor/ckeditor5.svg)](https://gitter.im/ckeditor/ckeditor5?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
@@ -10,11 +10,11 @@ CKEditor 5 word count feature
 [![Dependency Status](https://david-dm.org/ckeditor/ckeditor5-word-count/status.svg)](https://david-dm.org/ckeditor/ckeditor5-word-count)
 [![devDependency Status](https://david-dm.org/ckeditor/ckeditor5-word-count/dev-status.svg)](https://david-dm.org/ckeditor/ckeditor5-word-count?type=dev)
 
-This package implements word count support for CKEditor 5.
+This package implements word count and character count support for CKEditor 5.
 
 ## Demo
 
-Check out the demo in the [Word count feature](https://ckeditor.com/docs/ckeditor5/latest/features/word-count.html) guide.
+Check out the demo in the [Word count and character count feature](https://ckeditor.com/docs/ckeditor5/latest/features/word-count.html) guide.
 
 ## Documentation
 

+ 2 - 2
packages/ckeditor5-word-count/docs/_snippets/features/word-count-update.html

@@ -21,13 +21,13 @@
 </style>
 
 <div id="demo-editor-update">
-		<p>A <strong>black hole</strong> is a region of <a href="https://en.wikipedia.org/wiki/Spacetime">spacetime</a> exhibiting <a href="https://en.wikipedia.org/wiki/Gravitation">gravitational</a> acceleration so strong that nothing—no <a href="https://en.wikipedia.org/wiki/Particle">particles</a> or even <a href="https://en.wikipedia.org/wiki/Electromagnetic_radiation">electromagnetic radiation</a> such as <a href="https://en.wikipedia.org/wiki/Light">light</a>—can escape from it.<a href="https://en.wikipedia.org/wiki/Black_hole#cite_note-6">[6]</a> The theory of <a href="https://en.wikipedia.org/wiki/General_relativity">general relativity</a> predicts that a sufficiently compact <a href="https://en.wikipedia.org/wiki/Mass">mass</a> can deform <a href="https://en.wikipedia.org/wiki/Spacetime">spacetime</a> to form a black hole.</p>
+		<p>Tourists frequently admit that <a href="https://en.wikipedia.org/wiki/Taj_Mahal">Taj Mahal</a> “simply cannot be described with words”. And that’s probably true. The more you try the more speechless you become. Words give only a semblance of truth. The real truth about its beauty is revealed when you adore <strong>different shades of “Taj” depending on the time of the day</strong> or when you admire the exquisite inlay work in different corners of the façade.</p>
 </div>
 <div class="word-count customized-count">
 	<div class="customized-count__words">
 		<label>
 			<span>Words:</span>
-			<progress value="42" max="100"></progress>
+			<progress value="69" max="100"></progress>
 		</label>
 	</div>
 	<div class="customized-count__characters">

+ 2 - 2
packages/ckeditor5-word-count/docs/_snippets/features/word-count.html

@@ -8,8 +8,8 @@
 	}
 </style>
 <div id="demo-editor">
-	<p>The <strong>Battle of Westerplatte</strong> was one of the first battles in Germany's <a href="https://en.wikipedia.org/wiki/Invasion_of_Poland">invasion of Poland</a>, marking the start of <a href="https://en.wikipedia.org/wiki/World_War_II">World War II</a> in <a href="https://en.wikipedia.org/wiki/Europe">Europe</a>. Beginning on 1 September 1939, <a href="https://en.wikipedia.org/wiki/Nazi_Germany">German</a> <a href="https://en.wikipedia.org/wiki/German_Army_(Wehrmacht)">army</a>, <a href="https://en.wikipedia.org/wiki/Kriegsmarine">naval</a> and <a href="https://en.wikipedia.org/wiki/Luftwaffe">air forces</a> and <a href="https://en.wikipedia.org/wiki/Free_City_of_Danzig_Police">Danzig police</a> assaulted <a href="https://en.wikipedia.org/wiki/Poland">Poland</a>'s Military Transit Depot (<i>Wojskowa Składnica Tranzytowa</i>, or <i>WST</i>) on the <a href="https://en.wikipedia.org/wiki/Westerplatte">Westerplatte</a> peninsula in the harbor of the <a href="https://en.wikipedia.org/wiki/Free_City_of_Danzig">Free City of Danzig</a>. The Poles held out for seven days and repelled 13 assaults that included <a href="https://en.wikipedia.org/wiki/Dive_bomber">dive-bomber</a> attacks and naval shelling.</p>
-	<p>Westerplatte's defense served as an inspiration for the <a href="https://en.wikipedia.org/wiki/Polish_Army">Polish Army</a> and people in the face of German advances elsewhere, and is still regarded as a symbol of resistance in modern Poland.</p>
+	<p><strong>Taj Mahal</strong> is a mausoleum built in Agra between 1631 and 1648 by Emperor Shah Jahan in the memory of his beloved wife, Mumtaz Mahal, whose body lies there. It took 20 000 workers to complete and the excellence of this building is visible in every brick.</p>
+	<p>In 1983, Taj Mahal was appointed <a href="https://en.wikipedia.org/wiki/World_Heritage_Site">UNESCO World Heritage Site</a> for being “the jewel of Muslim art in India and one of the universally admired masterpieces of the world's heritage”.</p>
 </div>
 <div id="demo-word-count" class="word-count">
 </div>

+ 4 - 4
packages/ckeditor5-word-count/docs/api/word-count.md

@@ -2,19 +2,19 @@
 category: api-reference
 ---
 
-# Word count feature for CKEditor 5
+# Word count and character count feature for CKEditor 5
 
 [![npm version](https://badge.fury.io/js/%40ckeditor%2Fckeditor5-word-count.svg)](https://www.npmjs.com/package/@ckeditor/ckeditor5-word-count)
 
-This package implements the word count feature for CKEditor 5. You can use it to obtain amount of words and/or characters from the editor.
+This package implements the word count and character count features for CKEditor 5. You can use it to obtain the number of words or characters from the editor.
 
 ## Demo
 
-Check out the {@link features/word-count#demo demo in the Word count feature} guide.
+Check out the {@link features/word-count#demo demo in the Word count and character count feature} guide.
 
 ## Documentation
 
-See the {@link features/word-count Word count feature} guide and the {@link module:word-count/wordcount~WordCount} plugin documentation.
+See the {@link features/word-count Word count and character count feature} guide and the {@link module:word-count/wordcount~WordCount} plugin documentation.
 
 ## Installation
 

+ 18 - 9
packages/ckeditor5-word-count/docs/features/word-count.md

@@ -1,17 +1,20 @@
 ---
 category: features
+menu-title: Word and character count
 ---
 
 {@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
 
 {@snippet features/word-count}
 
+The example above was created by using the following HTML page structure:
+
 ```html
 <div id="editor">
 	<p>Hello world.</p>
@@ -20,6 +23,8 @@ The {@link module:word-count/wordcount~WordCount} feature provides a possibility
 </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
 ClassicEditor
 	.create( document.querySelector( '#editor' ), {
@@ -36,26 +41,29 @@ ClassicEditor
 
 ## 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
 
-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}
 
 ```js
 ClassicEditor
 	.create( document.querySelector( '#editor' ), {
-		// configuration details
+		// Configuration details.
 	} )
 	.then( editor => {
 		const wordCountPlugin = editor.plugins.get( 'WordCount' );
 
 		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 );
 			doSthWithNewCharactersNumber( data.characters );
 		} );
@@ -92,8 +100,9 @@ ClassicEditor
 ## Common API
 
 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>
 	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.

+ 1 - 1
packages/ckeditor5-word-count/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ckeditor/ckeditor5-word-count",
   "version": "10.0.1",
-  "description": "Word count feature for CKEditor 5.",
+  "description": "Word count and character count features for CKEditor 5.",
   "keywords": [
     "ckeditor",
     "ckeditor5",