This repository has been archived by the owner on Jun 26, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 9
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #6 from ckeditor/t/3
Feature: Implemented the user interface of the highlight feature. Closes #3. Closes #4.
- Loading branch information
Showing
33 changed files
with
1,395 additions
and
247 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| <style> | ||
| .marker-yellow { | ||
| background-color: #fdfd77; | ||
| } | ||
|
|
||
| .marker-green { | ||
| background-color: #63f963; | ||
| } | ||
|
|
||
| .marker-pink { | ||
| background-color: #fc7999; | ||
| } | ||
|
|
||
| .marker-blue { | ||
| background-color: #72cdfd; | ||
| } | ||
|
|
||
| .pen-red { | ||
| background-color: transparent; | ||
| color: #e91313; | ||
| } | ||
|
|
||
| .pen-green { | ||
| background-color: transparent; | ||
| color: #118800; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| /** | ||
| * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved. | ||
| * For licensing, see LICENSE.md. | ||
| */ | ||
|
|
||
| /* globals window */ | ||
|
|
||
| import ClassicEditor from '@ckeditor/ckeditor5-build-classic/src/ckeditor'; | ||
|
|
||
| import Highlight from '@ckeditor/ckeditor5-highlight/src/highlight'; | ||
|
|
||
| ClassicEditor.build.plugins.push( Highlight ); | ||
|
|
||
| window.ClassicEditor = ClassicEditor; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| <div id="snippet-custom-highlight-options"> | ||
| <p> | ||
| Here are defined highlighters: <mark class="marker-green">green one</mark> and <mark class="pen-red">red one</mark>. | ||
| </p> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| /** | ||
| * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved. | ||
| * For licensing, see LICENSE.md. | ||
| */ | ||
|
|
||
| /* globals ClassicEditor, console, window, document */ | ||
| ClassicEditor | ||
| .create( document.querySelector( '#snippet-custom-highlight-options' ), { | ||
| toolbar: { | ||
| items: [ | ||
| 'headings', '|', 'bulletedList', 'numberedList', 'highlightDropdown', 'undo', 'redo' | ||
| ], | ||
| viewportTopOffset: 60 | ||
| }, | ||
| highlight: { | ||
| options: [ | ||
| { model: 'greenMarker', class: 'marker-green', title: 'Green marker', color: '#66ff00', type: 'marker' }, | ||
| { model: 'redPen', class: 'pen-red', title: 'Red pen', color: '#e91313', type: 'pen' }, | ||
| ] | ||
| } | ||
| } ) | ||
| .then( editor => { | ||
| window.editor = editor; | ||
| } ) | ||
| .catch( err => { | ||
| console.error( err.stack ); | ||
| } ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| <div id="snippet-highlight-buttons"> | ||
| <p>Highlight feature example.</p> | ||
| <p> | ||
| Here are some markers: | ||
| </p> | ||
| <ul> | ||
| <li>the <mark class="marker-yellow">yellow</mark> one,</li> | ||
| <li>the <mark class="marker-pink">pink</mark> one,</li> | ||
| <li>the <mark class="marker-green">green</mark> one,</li> | ||
| <li>the <mark class="marker-blue">blue</mark> one</li> | ||
| </ul> | ||
| <p> | ||
| Here are some pens: | ||
| <mark class="pen-red">red pen</mark> and <mark class="pen-green">green one</mark>. | ||
| </p> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| /** | ||
| * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved. | ||
| * For licensing, see LICENSE.md. | ||
| */ | ||
|
|
||
| /* globals ClassicEditor, console, window, document */ | ||
|
|
||
| ClassicEditor | ||
| .create( document.querySelector( '#snippet-highlight-buttons' ), { | ||
| toolbar: { | ||
| items: [ | ||
| 'headings', '|', 'highlight:marker', 'highlight:greenMarker', 'highlight:pinkMarker', | ||
| 'highlight:greenPen', 'highlight:redPen', 'removeHighlight', '|', 'undo', 'redo' | ||
| ], | ||
| viewportTopOffset: 60 | ||
| } | ||
| } ) | ||
| .then( editor => { | ||
| window.editor = editor; | ||
| } ) | ||
| .catch( err => { | ||
| console.error( err.stack ); | ||
| } ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| <div id="snippet-highlight"> | ||
| <p>Highlight feature example.</p> | ||
| <p> | ||
| Here are some markers: | ||
| </p> | ||
| <ul> | ||
| <li>the <mark class="marker-yellow">yellow</mark> one,</li> | ||
| <li>the <mark class="marker-pink">pink</mark> one,</li> | ||
| <li>the <mark class="marker-green">green</mark> one,</li> | ||
| <li>the <mark class="marker-blue">blue</mark> one</li> | ||
| </ul> | ||
| <p> | ||
| Here are some pens: | ||
| <mark class="pen-red">red pen</mark> and <mark class="pen-green">green one</mark>. | ||
| </p> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| /** | ||
| * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved. | ||
| * For licensing, see LICENSE.md. | ||
| */ | ||
|
|
||
| /* globals ClassicEditor, console, window, document */ | ||
|
|
||
| ClassicEditor | ||
| .create( document.querySelector( '#snippet-highlight' ), { | ||
| toolbar: { | ||
| items: [ | ||
| 'headings', '|', 'bulletedList', 'numberedList', 'highlightDropdown', 'undo', 'redo' | ||
| ], | ||
| viewportTopOffset: 60 | ||
| } | ||
| } ) | ||
| .then( editor => { | ||
| window.editor = editor; | ||
| } ) | ||
| .catch( err => { | ||
| console.error( err.stack ); | ||
| } ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| --- | ||
| category: api-reference | ||
| --- | ||
|
|
||
| # CKEditor 5 highlight feature | ||
|
|
||
| [](https://www.npmjs.com/package/@ckeditor/ckeditor5-highlight) | ||
|
|
||
| This package implements the highlight feature for CKEditor 5. | ||
|
|
||
| ## Documentation | ||
|
|
||
| See the {@link features/highlight Highlight feature} guide and the {@link module:highlight/highlight~Highlight} plugin documentation. | ||
|
|
||
| ## Installation | ||
|
|
||
| ```bash | ||
| npm install --save @ckeditor/ckeditor5-highlight | ||
| ``` | ||
|
|
||
| ## Contribute | ||
|
|
||
| The source code of this package is available on GitHub in https://github.com/ckeditor/ckeditor5-highlight. | ||
|
|
||
| ## External links | ||
|
|
||
| * [`@ckeditor/ckeditor5-highlight` on npm](https://www.npmjs.com/package/@ckeditor/ckeditor5-highlight) | ||
| * [`ckeditor/ckeditor5-highlight` on GitHub](https://github.com/ckeditor/ckeditor5-highlight) | ||
| * [Issue tracker](https://github.com/ckeditor/ckeditor5-highlight/issues) | ||
| * [Changelog](https://github.com/ckeditor/ckeditor5-highlight/blob/master/CHANGELOG.md) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,140 @@ | ||
| --- | ||
| title: Highlight | ||
| category: features | ||
| --- | ||
|
|
||
| {@snippet features/build-highlight-source} | ||
|
|
||
| The {@link module:highlight/highlight~Highlight} feature offers a text marking tools that help content authors speed up their work, e.g. reviewing content or marking it for the future reference. It uses inline `<marker>` elements in the view, supports both markers (background color) and pens (text color), and comes with a flexible configuration. | ||
|
|
||
| ## Demo | ||
|
|
||
| {@snippet features/highlight} | ||
|
|
||
| ## Configuring the highlight options | ||
|
|
||
| It is possible to configure which highlight options are supported by the editor. | ||
| You can use the {@link module:highlight/highlight~HighlightConfig#options `highlight.options`} configuration and define your own highlight styles. | ||
|
|
||
| For example, the following editor supports only two styles (a green marker and a red pen): | ||
|
|
||
| ```js | ||
| ClassicEditor | ||
| .create( document.querySelector( '#editor' ), { | ||
| highlight: { | ||
| options: [ | ||
| { | ||
| model: 'greenMarker', | ||
| class: 'marker-green', | ||
| title: 'Green marker', | ||
| color: '#63f963', | ||
| type: 'marker' | ||
| }, | ||
| { | ||
| model: 'redPen', | ||
| class: 'pen-red', | ||
| title: 'Red pen', | ||
| color: '#e91313', | ||
| type: 'pen' | ||
| } | ||
| ] | ||
| }, | ||
| toolbar: [ | ||
| 'headings', '|', 'bulletedList', 'numberedList', 'highlightDropdown', 'undo', 'redo' | ||
| ] | ||
| } ) | ||
| .then( ... ) | ||
| .catch( ... ); | ||
| ``` | ||
|
|
||
| {@snippet features/custom-highlight-options} | ||
|
|
||
| Instead of using the (default) `highlightDropdown`, the feature also supports a configuration with separate buttons directly in the toolbar: | ||
|
|
||
| ```js | ||
| ClassicEditor | ||
| .create( document.querySelector( '#editor' ), { | ||
| toolbar: { | ||
| items: [ | ||
| 'headings', '|', 'highlight:marker', 'highlight:greenMarker', | ||
| 'highlight:pinkMarker', 'highlight:greenPen', | ||
| 'highlight:redPen', 'removeHighlight', 'undo', 'redo' | ||
| ] | ||
| } | ||
| } ) | ||
| .then( ... ) | ||
| .catch( ... ); | ||
| ``` | ||
|
|
||
| {@snippet features/highlight-buttons} | ||
|
|
||
| ## Installation | ||
|
|
||
| To add this feature to your editor install the [`@ckeditor/ckeditor5-highlight`](https://www.npmjs.com/package/@ckeditor/ckeditor5-highlight) package: | ||
|
|
||
| ``` | ||
| npm install --save @ckeditor/ckeditor5-highlight | ||
| ``` | ||
|
|
||
| And add it to your plugin list and the toolbar configuration: | ||
|
|
||
| ```js | ||
| import Highlight from '@ckeditor/ckeditor5-highlight/src/highlight'; | ||
|
|
||
| ClassicEditor | ||
| .create( document.querySelector( '#editor' ), { | ||
| plugins: [ Highlight, ... ], | ||
| toolbar: [ 'highlightDropdown', ... ] | ||
| } ) | ||
| .then( ... ) | ||
| .catch( ... ); | ||
| ``` | ||
|
|
||
| <info-box info> | ||
| Read more about {@link builds/guides/development/installing-plugins installing plugins}. | ||
| </info-box> | ||
|
|
||
| ## Common API | ||
|
|
||
| The {@link module:highlight/highlight~Highlight} plugin registers: | ||
|
|
||
| * The `'highlightDropdown'` dropdown, | ||
| * The {@link module:highlight/highlightcommand~HighlightCommand `'highlight'`} command. | ||
|
|
||
| The number of options and their names correspond to the {@link module:highlight/highlight~HighlightConfig#options `highlight.options`} configuration option. | ||
|
|
||
| You can change the highlight of the current selection by executing the command with a desired value: | ||
|
|
||
| ```js | ||
| editor.execute( 'highlight', { value: 'yellowMarker' } ); | ||
| ``` | ||
|
|
||
| The `value` corresponds to the `model` property in configuration object. For the default configuration: | ||
| ```js | ||
| highlight.options = [ | ||
| { model: 'yellowMarker', class: 'marker-yellow', title: 'Yellow Marker', color: '#fdfd77', type: 'marker' }, | ||
| { model: 'greenMarker', class: 'marker-green', title: 'Green marker', color: '#63f963', type: 'marker' }, | ||
| { model: 'pinkMarker', class: 'marker-pink', title: 'Pink marker', color: '#fc7999', type: 'marker' }, | ||
| { model: 'blueMarker', class: 'marker-blue', title: 'Blue marker', color: '#72cdfd', type: 'marker' }, | ||
| { model: 'redPen', class: 'pen-red', title: 'Red pen', color: '#e91313', type: 'pen' }, | ||
| { model: 'greenPen', class: 'pen-green', title: 'Green pen', color: '#118800', type: 'pen' } | ||
| ] | ||
| ``` | ||
|
|
||
| the `highlight` command will accept the corresponding strings as values: | ||
| - `'yellowMarker'` – available as a `'highlight:yellowMarker'` button, | ||
| - `'greenMarker'` – available as a `'highlight:greenMarker'` button, | ||
| - `'pinkMarker'` – available as a `'highlight:pinkMarker'` button, | ||
| - `'blueMarker'` – available as a `'highlight:blueMarker'` button, | ||
| - `'redPen'` – available as a `'highlight:redPen'` button, | ||
| - `'greenPen'` – available as a `'highlight:greenPen'` button. | ||
|
|
||
| passing an empty `value` will remove any `highlight` from the selection: | ||
|
|
||
| ```js | ||
| editor.execute( 'highlight' ); | ||
| ``` | ||
|
|
||
| ## Contribute | ||
|
|
||
| The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5-highlight. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.