Skip to content

Commit

Permalink
Merge pull request #14277 from ckeditor/ck/14235-ability-to-display-p…
Browse files Browse the repository at this point in the history
…bc-despite-having-license-check

Other (ui): Added a configuration option that forces the "Powered by" logo to show up despite a valid license key being used. Closes #14235.
  • Loading branch information
oleq committed May 30, 2023
2 parents 4e4d9e6 + 5c28d11 commit b577283
Show file tree
Hide file tree
Showing 7 changed files with 164 additions and 3 deletions.
14 changes: 12 additions & 2 deletions docs/support/managing-ckeditor-logo.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,23 +8,33 @@ meta-description: Managing the "Powered by CKEditor" logo

## Why the "Powered by CKEditor" logo?

Starting from version v38.0.0 onwards, all **open source** installations of CKEditor 5 display a small “Powered by CKEditor” logo in the bottom-right corner of the editing area. The label links directly to the [CKEditor website](https://ckeditor.com/). The new branding approach is designed to make sure the entire community knows who is powering and modernizing their rich text editor. You can [read more about it](https://github.com/ckeditor/ckeditor5/issues/14082) on GitHub.
Starting from version v38.0.0 onwards, all **open-source** installations of CKEditor 5 display a small “Powered by CKEditor” logo in the bottom-right corner of the editing area. The label links directly to the [CKEditor website](https://ckeditor.com/). The new branding approach is designed to make sure the entire community knows who is powering and modernizing their rich text editor. You can [read more about it](https://github.com/ckeditor/ckeditor5/issues/14082) on GitHub.

{@img assets/img/powered-by-ckeditor.png Placement of the "Powered by CKEditor" logo within the editor}

This logo is only visible when the editor is focused and only in the editable. The editor needs to have a minimum size of 350px x 50px to display the logo. It will be shown in all editor types.

The logo **will not be displayed for customers with commercial licenses**, but please read on as certain actions need to be taken to white-label your CKEditor 5 installation. You can [reach out to our Technical Support team](https://ckeditor.com/contact/) if you have any questions.

However, even as a paid customer, you can [keep the logo](#how-to-keep-the-powered-by-ckeditor-logo) if you wish.

## How to remove the "Powered by CKEditor" logo?

To remove the logo, you need to obtain a commercial license and then configure the {@link module:core/editor/editorconfig~EditorConfig#licenseKey `config.licenseKey`} setting.

Refer to the {@link support/license-key-and-activation License key and activation} guide for details on where to find the license key and how to use it in your configuration.

## How to keep the "Powered by CKEditor" logo?

If you wish to keep the "Powered by CKEditor" logo in your editor even if you are a paid customer (numerous reasons can play a factor here), you can do it easily. Just set the following option to `true` (by default it is set to `false`) and enjoy the branding!

```js
config.ui.poweredBy.forceVisible: true
```

## How to configure the layout of the "Powered by CKEditor" logo?

For open source, free users, the "Powered by CKEditor" logo will always be displayed. There is, however, some degree of control over it.
For open-source, free users, the "Powered by CKEditor" logo will always be displayed. There is, however, some degree of control over it.

Complete configuration reference is available in the {@link module:core/editor/editorconfig~EditorConfig#ui API documentation}. In short, you can configure the following properties:

Expand Down
8 changes: 8 additions & 0 deletions packages/ckeditor5-core/src/editor/editorconfig.ts
Original file line number Diff line number Diff line change
Expand Up @@ -645,5 +645,13 @@ export interface UiConfig {
* @default 5
*/
horizontalOffset: number;

/**
* Allows to show the logo even if the valid commercial license is configured using
* the {@link module:core/editor/editorconfig~EditorConfig#licenseKey `config.licenseKey`} setting.
*
* @default false
*/
forceVisible?: boolean;
};
}
3 changes: 2 additions & 1 deletion packages/ckeditor5-ui/src/editorui/poweredby.ts
Original file line number Diff line number Diff line change
Expand Up @@ -108,9 +108,10 @@ export default class PoweredBy extends DomEmitterMixin() {
*/
private _handleEditorReady(): void {
const editor = this.editor;
const forceVisible = !!editor.config.get( 'ui.poweredBy.forceVisible' );

/* istanbul ignore next -- @preserve */
if ( verifyLicense( editor.config.get( 'licenseKey' ) ) === 'VALID' ) {
if ( !forceVisible && verifyLicense( editor.config.get( 'licenseKey' ) ) === 'VALID' ) {
return;
}

Expand Down
39 changes: 39 additions & 0 deletions packages/ckeditor5-ui/tests/editorui/poweredby.js
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,45 @@ describe( 'PoweredBy', () => {

expect( editor.ui.poweredBy._balloonView ).to.be.instanceOf( BalloonPanelView );
} );

it( 'should not create the balloon when a valid license key is configured', async () => {
const editor = await createEditor( element, {
// eslint-disable-next-line max-len
// https://github.com/ckeditor/ckeditor5/blob/226bf243d1eb8bae2d447f631d6f5d9961bc6541/packages/ckeditor5-utils/tests/verifylicense.js#L14
// eslint-disable-next-line max-len
licenseKey: 'dG9vZWFzZXRtcHNsaXVyb3JsbWlkbXRvb2Vhc2V0bXBzbGl1cm9ybG1pZG10b29lYXNldG1wc2xpdXJvcmxtaWRtLU1qQTBOREEyTVRJPQ=='
} );

expect( editor.ui.poweredBy._balloonView ).to.be.null;

focusEditor( editor );

expect( editor.ui.poweredBy._balloonView ).to.be.null;

await editor.destroy();
} );

it( 'should create the balloon when a valid license key is configured and `forceVisible` is set to true', async () => {
const editor = await createEditor( element, {
// eslint-disable-next-line max-len
// https://github.com/ckeditor/ckeditor5/blob/226bf243d1eb8bae2d447f631d6f5d9961bc6541/packages/ckeditor5-utils/tests/verifylicense.js#L14
// eslint-disable-next-line max-len
licenseKey: 'dG9vZWFzZXRtcHNsaXVyb3JsbWlkbXRvb2Vhc2V0bXBzbGl1cm9ybG1pZG10b29lYXNldG1wc2xpdXJvcmxtaWRtLU1qQTBOREEyTVRJPQ==',
ui: {
poweredBy: {
forceVisible: true
}
}
} );

expect( editor.ui.poweredBy._balloonView ).to.be.null;

focusEditor( editor );

expect( editor.ui.poweredBy._balloonView ).to.be.instanceOf( BalloonPanelView );

await editor.destroy();
} );
} );

describe( 'balloon management on editor focus change', () => {
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<div id="force-visible">
<h2>The three greatest things you learn from traveling</h2>
<p>Like all the great things on earth traveling teaches us by example. Here are some of the most precious lessons
I’ve
learned over the years of traveling.</p>

<blockquote>
<p>The real voyage of discovery consists not in seeking new landscapes, but having new eyes.</p>
<p><strong>Marcel Proust</strong></p>
</blockquote>
<h3>Improvisation</h3>
<p>Life doesn't allow us to execute every single plan perfectly. This especially seems to be the case when you
travel.
You plan it down to every minute with a big checklist. But when it comes to executing it, something always comes
up
and you’re left with your improvising skills. You learn to adapt as you go. Here’s how my travel checklist looks
now:</p>
<ul>
<li>buy the ticket</li>
<li>start your adventure</li>
</ul>
<figure class="image image-style-side"><img
src="https://ckeditor.com/docs/ckeditor5/latest/assets/img/umbrellas.jpg"
alt="Three monks ascending the stairs of an ancient temple."
srcset="https://ckeditor.com/docs/ckeditor5/latest/assets/img/umbrellas.jpg, https://ckeditor.com/docs/ckeditor5/latest/assets/img/umbrellas_2x.jpg 2x"
sizes="100vw">
<figcaption>Three monks ascending the stairs of an ancient temple.</figcaption>
</figure>
<h3>Confidence</h3>
<p>Going to a new place can be quite terrifying. While change and uncertainty make us scared, traveling teaches us
how
ridiculous it is to be afraid of something before it happens. The moment you face your fear and see there is
nothing
to be afraid of, is the moment you discover bliss.</p>
</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
/**
* @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
*/

/* globals console, window, document, CKEditorInspector */

import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
import { ImageResize } from '@ckeditor/ckeditor5-image';

const licenseKey = window.prompt( 'Enter valid key' ); // eslint-disable-line no-alert

window.editors = {};

function createEditor( selector ) {
ClassicEditor
.create( document.querySelector( selector ), {
plugins: [ ArticlePluginSet, ImageResize ],
toolbar: [
'heading',
'|',
'bold',
'italic',
'link',
'bulletedList',
'numberedList',
'|',
'outdent',
'indent',
'|',
'blockQuote',
'insertTable',
'mediaEmbed',
'undo',
'redo'
],
image: {
toolbar: [ 'imageStyle:inline', 'imageStyle:block', 'imageStyle:side', '|', 'imageTextAlternative' ]
},
...( licenseKey && { licenseKey } ),
table: {
contentToolbar: [
'tableColumn',
'tableRow',
'mergeTableCells'
]
},
ui: {
poweredBy: {
forceVisible: true
}
}
} )
.then( editor => {
window.editors[ selector ] = editor;

CKEditorInspector.attach( { [ selector ]: editor } );
} )
.catch( err => {
console.error( err.stack );
} );
}

createEditor( '#force-visible' );
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
# Powered by forced to be visible.

Even if a valid license key is given.

0 comments on commit b577283

Please sign in to comment.