Skip to content
This repository has been archived by the owner on Jun 26, 2020. It is now read-only.

Commit

Permalink
Merge pull request #25 from ckeditor/t/ckeditor5/1457
Browse files Browse the repository at this point in the history 
t/ckeditor5/1457: Implemented Font Color and Font Background Color features
  • Loading branch information
@mlewand
mlewand committed Mar 29, 2019
2 parents d9f0a51 + e153ead commit c456b2a
Show file tree
Hide file tree
Showing 44 changed files with 3,173 additions and 26 deletions.
7 changes: 6 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,12 @@ CKEditor 5 font feature
[![Dependency Status](https://david-dm.org/ckeditor/ckeditor5-font/status.svg)](https://david-dm.org/ckeditor/ckeditor5-font)
[![devDependency Status](https://david-dm.org/ckeditor/ckeditor5-font/dev-status.svg)](https://david-dm.org/ckeditor/ckeditor5-font?type=dev)

This package implements font size and font family support for CKEditor 5.
This package implements support for the following CKEditor 5 features:

* font size,
* font family,
* font color,
* font background color.

## Demo

Expand Down
3 changes: 3 additions & 0 deletions docs/_snippets/features/custom-font-color-and-background-color-options.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<div id="snippet-custom-font-color-and-background-color-options">
<p><span style="color:yellow;background-color:hsl(0,0%,0%);">Text</span> in this <span style="color:white;background-color:hsl(0,100%,50%);">sample</span> <span style="color:aqua;background-color:hsl(240,100%,50%);">has</span> <span style="color:lime;background-color:hsl(300,100%,20%);">m</span><span style="color:lime;background-color:hsl(300,100%,30%);">u</span><span style="color:lime;background-color:hsl(300,100%,40%);">l</span><span style="background-color:hsl(300,100%,50%);">t</span><span style="background-color:hsl(300,100%,60%);">i</span><span style="background-color:hsl(300,100%,70%);">p</span><span style="background-color:hsl(300,100%,80%);">l</span><span style="background-color:hsl(300,100%,90%);">e</span> <span style="color:purple;">font colors</span> and <span style="background-color:hsl(120,100%,90%);">font background</span> <span style="color:red;background-color:hsl(0,0%,62.50%);">colors</span>.</p>
</div>
209 changes: 209 additions & 0 deletions docs/_snippets/features/custom-font-color-and-background-color-options.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,209 @@
/**
* @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md.
*/

import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';

/* globals ClassicEditor, console, window, document */
ClassicEditor
.create( document.querySelector( '#snippet-custom-font-color-and-background-color-options' ), {
cloudServices: CS_CONFIG,
toolbar: {
items: [
'heading', '|', 'fontColor', 'fontBackgroundColor', 'bulletedList', 'numberedList', 'undo', 'redo'
],
viewportTopOffset: window.getViewportTopOffsetConfig()
},
fontBackgroundColor: {
colors: [
'hsl(0,0%,0%)',
'hsl(0,0%,12.5%)',
'hsl(0,0%,25%)',
'hsl(0,0%,37.5%)',
'hsl(0,0%,50%)',
'hsl(0,0%,62.50%)',
'hsl(0,0%,75%)',
'hsl(0,0%,87.5%)',
{
color: 'hsl(0,0%,100%)',
hasBorder: true
},
'hsl(0,100%,10%)',
'hsl(0,100%,20%)',
'hsl(0,100%,30%)',
'hsl(0,100%,40%)',
'hsl(0,100%,50%)',
'hsl(0,100%,60%)',
'hsl(0,100%,70%)',
'hsl(0,100%,80%)',
{
color: 'hsl(0,100%,90%)',
hasBorder: true
},
'hsl(30,100%,10%)',
'hsl(30,100%,20%)',
'hsl(30,100%,30%)',
'hsl(30,100%,40%)',
'hsl(30,100%,50%)',
'hsl(30,100%,60%)',
'hsl(30,100%,70%)',
'hsl(30,100%,80%)',
{
color: 'hsl(30,100%,90%)',
hasBorder: true
},
'hsl(60,100%,10%)',
'hsl(60,100%,20%)',
'hsl(60,100%,30%)',
'hsl(60,100%,40%)',
'hsl(60,100%,50%)',
'hsl(60,100%,60%)',
'hsl(60,100%,70%)',
'hsl(60,100%,80%)',
{
color: 'hsl(60,100%,90%)',
hasBorder: true
},
'hsl(90,100%,10%)',
'hsl(90,100%,20%)',
'hsl(90,100%,30%)',
'hsl(90,100%,40%)',
'hsl(90,100%,50%)',
'hsl(90,100%,60%)',
'hsl(90,100%,70%)',
'hsl(90,100%,80%)',
{
color: 'hsl(90,100%,90%)',
hasBorder: true
},
'hsl(120,100%,10%)',
'hsl(120,100%,20%)',
'hsl(120,100%,30%)',
'hsl(120,100%,40%)',
'hsl(120,100%,50%)',
'hsl(120,100%,60%)',
'hsl(120,100%,70%)',
'hsl(120,100%,80%)',
{
color: 'hsl(120,100%,90%)',
hasBorder: true
},
'hsl(150,100%,10%)',
'hsl(150,100%,20%)',
'hsl(150,100%,30%)',
'hsl(150,100%,40%)',
'hsl(150,100%,50%)',
'hsl(150,100%,60%)',
'hsl(150,100%,70%)',
'hsl(150,100%,80%)',
{
color: 'hsl(150,100%,90%)',
hasBorder: true
},
'hsl(180,100%,10%)',
'hsl(180,100%,20%)',
'hsl(180,100%,30%)',
'hsl(180,100%,40%)',
'hsl(180,100%,50%)',
'hsl(180,100%,60%)',
'hsl(180,100%,70%)',
'hsl(180,100%,80%)',
{
color: 'hsl(180,100%,90%)',
hasBorder: true
},
'hsl(210,100%,10%)',
'hsl(210,100%,20%)',
'hsl(210,100%,30%)',
'hsl(210,100%,40%)',
'hsl(210,100%,50%)',
'hsl(210,100%,60%)',
'hsl(210,100%,70%)',
'hsl(210,100%,80%)',
{
color: 'hsl(210,100%,90%)',
hasBorder: true
},
'hsl(240,100%,10%)',
'hsl(240,100%,20%)',
'hsl(240,100%,30%)',
'hsl(240,100%,40%)',
'hsl(240,100%,50%)',
'hsl(240,100%,60%)',
'hsl(240,100%,70%)',
'hsl(240,100%,80%)',
{
color: 'hsl(240,100%,90%)',
hasBorder: true
},
'hsl(270,100%,10%)',
'hsl(270,100%,20%)',
'hsl(270,100%,30%)',
'hsl(270,100%,40%)',
'hsl(270,100%,50%)',
'hsl(270,100%,60%)',
'hsl(270,100%,70%)',
'hsl(270,100%,80%)',
{
color: 'hsl(270,100%,90%)',
hasBorder: true
},
'hsl(300,100%,10%)',
'hsl(300,100%,20%)',
'hsl(300,100%,30%)',
'hsl(300,100%,40%)',
'hsl(300,100%,50%)',
'hsl(300,100%,60%)',
'hsl(300,100%,70%)',
'hsl(300,100%,80%)',
{
color: 'hsl(300,100%,90%)',
hasBorder: true
},
'hsl(330,100%,10%)',
'hsl(330,100%,20%)',
'hsl(330,100%,30%)',
'hsl(330,100%,40%)',
'hsl(330,100%,50%)',
'hsl(330,100%,60%)',
'hsl(330,100%,70%)',
'hsl(330,100%,80%)',
{
color: 'hsl(330,100%,90%)',
hasBorder: true
},
],
columns: 9
},
fontColor: {
colors: [
'black',
'gray',
'silver',
{
color: 'white',
hasBorder: true
},
'maroon',
'red',
'purple',
'fuchsia',
'green',
'lime',
'olive',
'yellow',
'navy',
'blue',
'teal',
'aqua'
],
columns: 4
}
} )
.then( editor => {
window.editor = editor;
} )
.catch( err => {
console.error( err.stack );
} );
8 changes: 8 additions & 0 deletions docs/_snippets/features/font.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,4 +15,12 @@
<span style="font-family: 'Courier New', Courier, monospace;">This text has the "Courier New, Courier, monospace" family set.</span>
</p>

<p>
<span style="color:hsl(90,75%,60%);background-color:hsl(240,75%,60%)">This text has light green color and blue background.</span>
</p>

<p>
<span style="color:hsl(0,0%,100%);background-color:hsl(0,0%,0%)">This text has white color and black background.</span>
</p>

</div>
12 changes: 11 additions & 1 deletion docs/_snippets/features/font.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,17 @@ ClassicEditor
cloudServices: CS_CONFIG,
toolbar: {
items: [
'heading', '|', 'fontSize', 'fontFamily', '|', 'bulletedList', 'numberedList', 'undo', 'redo'
'heading',
'|',
'fontSize',
'fontFamily',
'fontColor',
'fontBackgroundColor',
'|',
'bulletedList',
'numberedList',
'undo',
'redo'
],
viewportTopOffset: window.getViewportTopOffsetConfig()
}
Expand Down
7 changes: 5 additions & 2 deletions docs/api/font.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,11 @@ Check out the {@link features/font#demo demo in the Font feature} guide.

## Documentation

See the {@link features/font Font feature} guide
and {@link module:font/fontfamily~FontFamily} and {@link module:font/fontsize~FontSize} plugins documentation.
See the {@link features/font Font feature} guide and plugins documentation:
- {@link module:font/fontfamily~FontFamily}.
- {@link module:font/fontsize~FontSize}.
- {@link module:font/fontcolor~FontColor}.
- {@link module:font/fontbackgroundcolor~FontBackgroundColor}.

## Installation

Expand Down
Loading

0 comments on commit c456b2a

Please sign in to comment.