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 40
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
19 changed files
with
1,585 additions
and
0 deletions.
There are no files selected for viewing
Empty file.
15 changes: 15 additions & 0 deletions
15
docs/_snippets/framework/build-extending-content-source.js
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,15 @@ | ||
/** | ||
* @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. | ||
* For licensing, see LICENSE.md. | ||
*/ | ||
|
||
/* globals window */ | ||
|
||
import ClassicEditor from '@ckeditor/ckeditor5-build-classic/src/ckeditor'; | ||
import Code from '@ckeditor/ckeditor5-basic-styles/src/code'; | ||
import Font from '@ckeditor/ckeditor5-font/src/font'; | ||
|
||
ClassicEditor.builtinPlugins.push( Code ); | ||
ClassicEditor.builtinPlugins.push( Font ); | ||
|
||
window.ClassicEditor = ClassicEditor; |
11 changes: 11 additions & 0 deletions
11
docs/_snippets/framework/extending-content-add-external-link-target.html
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,11 @@ | ||
<style> | ||
#snippet-link-external + .ck-editor .ck-content a[target="_blank"]::after { | ||
content: '\29C9'; | ||
} | ||
</style> | ||
|
||
<div id="snippet-link-external"> | ||
<p>External links in this <a href="https://ckeditor.com">editor</a> have a <code>target="_blank"</code> | ||
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes">attribute</a> and will open in a new | ||
<a href="https://developer.mozilla.org/en-US/docs/Web/API/Window">window</a>.</p> | ||
</div> |
47 changes: 47 additions & 0 deletions
47
docs/_snippets/framework/extending-content-add-external-link-target.js
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,47 @@ | ||
/** | ||
* @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. | ||
* For licensing, see LICENSE.md. | ||
*/ | ||
|
||
/* globals ClassicEditor, console, window, document */ | ||
|
||
import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config'; | ||
|
||
function AddTargetToExternalLinks( editor ) { | ||
editor.conversion.for( 'downcast' ).add( dispatcher => { | ||
dispatcher.on( 'attribute:linkHref', ( evt, data, conversionApi ) => { | ||
const viewWriter = conversionApi.writer; | ||
const viewSelection = viewWriter.document.selection; | ||
const viewElement = viewWriter.createAttributeElement( 'a', { | ||
target: '_blank' | ||
}, { | ||
priority: 5 | ||
} ); | ||
|
||
if ( data.attributeNewValue.match( /ckeditor\.com/ ) ) { | ||
viewWriter.unwrap( conversionApi.mapper.toViewRange( data.range ), viewElement ); | ||
} else { | ||
if ( data.item.is( 'selection' ) ) { | ||
viewWriter.wrap( viewSelection.getFirstRange(), viewElement ); | ||
} else { | ||
viewWriter.wrap( conversionApi.mapper.toViewRange( data.range ), viewElement ); | ||
} | ||
} | ||
}, { priority: 'low' } ); | ||
} ); | ||
} | ||
|
||
ClassicEditor | ||
.create( document.querySelector( '#snippet-link-external' ), { | ||
cloudServices: CS_CONFIG, | ||
extraPlugins: [ AddTargetToExternalLinks ], | ||
toolbar: { | ||
viewportTopOffset: window.getViewportTopOffsetConfig() | ||
} | ||
} ) | ||
.then( editor => { | ||
window.editor = editor; | ||
} ) | ||
.catch( err => { | ||
console.error( err.stack ); | ||
} ); |
14 changes: 14 additions & 0 deletions
14
docs/_snippets/framework/extending-content-add-heading-class.html
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 @@ | ||
<style> | ||
.ck-content h2.my-heading { | ||
font-family: Georgia, Times, Times New Roman, serif; | ||
border-left: 6px solid #fd0000; | ||
padding-left: .8em; | ||
padding: .1em .8em; | ||
} | ||
</style> | ||
|
||
<div id="snippet-heading-class"> | ||
<h2>Heading with <code>.my-heading</code> class</h2> | ||
<h3>Regular heading</h3> | ||
<p>Some content.</p> | ||
</div> |
33 changes: 33 additions & 0 deletions
33
docs/_snippets/framework/extending-content-add-heading-class.js
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,33 @@ | ||
/** | ||
* @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. | ||
* For licensing, see LICENSE.md. | ||
*/ | ||
|
||
/* globals ClassicEditor, console, window, document */ | ||
|
||
import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config'; | ||
|
||
function AddClassToAllHeading1( editor ) { | ||
editor.conversion.for( 'downcast' ).add( dispatcher => { | ||
dispatcher.on( 'insert:heading1', ( evt, data, conversionApi ) => { | ||
const viewWriter = conversionApi.writer; | ||
|
||
viewWriter.addClass( 'my-heading', conversionApi.mapper.toViewElement( data.item ) ); | ||
}, { priority: 'low' } ); | ||
} ); | ||
} | ||
|
||
ClassicEditor | ||
.create( document.querySelector( '#snippet-heading-class' ), { | ||
cloudServices: CS_CONFIG, | ||
extraPlugins: [ AddClassToAllHeading1 ], | ||
toolbar: { | ||
viewportTopOffset: window.getViewportTopOffsetConfig() | ||
} | ||
} ) | ||
.then( editor => { | ||
window.editor = editor; | ||
} ) | ||
.catch( err => { | ||
console.error( err.stack ); | ||
} ); |
14 changes: 14 additions & 0 deletions
14
docs/_snippets/framework/extending-content-add-link-class.html
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 @@ | ||
<style> | ||
.my-green-link { | ||
color: #209a25; | ||
border: 1px solid #209a25; | ||
border-radius: 2px; | ||
padding: 0 3px; | ||
box-shadow: 1px 1px 0 0 #209a25; | ||
} | ||
</style> | ||
|
||
<div id="snippet-link-classes"> | ||
<p>All links in this <a href="https://ckeditor.com">editor</a> have a custom <code>.my-green-link</code> | ||
CSS <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class">class</a> attribute.</p> | ||
</div> |
43 changes: 43 additions & 0 deletions
43
docs/_snippets/framework/extending-content-add-link-class.js
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,43 @@ | ||
/** | ||
* @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. | ||
* For licensing, see LICENSE.md. | ||
*/ | ||
|
||
/* globals ClassicEditor, console, window, document */ | ||
|
||
import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config'; | ||
|
||
function AddClassToAllLinks( editor ) { | ||
editor.conversion.for( 'downcast' ).add( dispatcher => { | ||
dispatcher.on( 'attribute:linkHref', ( evt, data, conversionApi ) => { | ||
const viewWriter = conversionApi.writer; | ||
const viewSelection = viewWriter.document.selection; | ||
const viewElement = viewWriter.createAttributeElement( 'a', { | ||
class: 'my-green-link' | ||
}, { | ||
priority: 5 | ||
} ); | ||
|
||
if ( data.item.is( 'selection' ) ) { | ||
viewWriter.wrap( viewSelection.getFirstRange(), viewElement ); | ||
} else { | ||
viewWriter.wrap( conversionApi.mapper.toViewRange( data.range ), viewElement ); | ||
} | ||
}, { priority: 'low' } ); | ||
} ); | ||
} | ||
|
||
ClassicEditor | ||
.create( document.querySelector( '#snippet-link-classes' ), { | ||
cloudServices: CS_CONFIG, | ||
extraPlugins: [ AddClassToAllLinks ], | ||
toolbar: { | ||
viewportTopOffset: window.getViewportTopOffsetConfig() | ||
} | ||
} ) | ||
.then( editor => { | ||
window.editor = editor; | ||
} ) | ||
.catch( err => { | ||
console.error( err.stack ); | ||
} ); |
12 changes: 12 additions & 0 deletions
12
docs/_snippets/framework/extending-content-add-unsafe-link-class.html
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,12 @@ | ||
<style> | ||
.unsafe-link { | ||
padding: 0 2px; | ||
outline: 2px dashed red; | ||
background: #ffff00; | ||
} | ||
</style> | ||
|
||
<div id="snippet-link-unsafe-classes"> | ||
<p>All links in this <a href="https://ckeditor.com">editor</a> that do not use the <a href="http://developer.mozilla.org/en-US/docs/Glossary/https">HTTPS</a> protocol | ||
have a custom <code>.unsafe-link</code> CSS <a href="http://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class">class</a> that marks them red.</p> | ||
</div> |
43 changes: 43 additions & 0 deletions
43
docs/_snippets/framework/extending-content-add-unsafe-link-class.js
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,43 @@ | ||
/** | ||
* @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. | ||
* For licensing, see LICENSE.md. | ||
*/ | ||
|
||
/* globals ClassicEditor, console, window, document */ | ||
|
||
import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config'; | ||
|
||
function AddClassToUnsafeLinks( editor ) { | ||
editor.conversion.for( 'downcast' ).add( dispatcher => { | ||
dispatcher.on( 'attribute:linkHref', ( evt, data, conversionApi ) => { | ||
const viewWriter = conversionApi.writer; | ||
const viewSelection = viewWriter.document.selection; | ||
const viewElement = viewWriter.createAttributeElement( 'a', { class: 'unsafe-link' }, { priority: 5 } ); | ||
|
||
if ( data.attributeNewValue.match( /http:\/\// ) ) { | ||
if ( data.item.is( 'selection' ) ) { | ||
viewWriter.wrap( viewSelection.getFirstRange(), viewElement ); | ||
} else { | ||
viewWriter.wrap( conversionApi.mapper.toViewRange( data.range ), viewElement ); | ||
} | ||
} else { | ||
viewWriter.unwrap( conversionApi.mapper.toViewRange( data.range ), viewElement ); | ||
} | ||
}, { priority: 'low' } ); | ||
} ); | ||
} | ||
|
||
ClassicEditor | ||
.create( document.querySelector( '#snippet-link-unsafe-classes' ), { | ||
cloudServices: CS_CONFIG, | ||
extraPlugins: [ AddClassToUnsafeLinks ], | ||
toolbar: { | ||
viewportTopOffset: window.getViewportTopOffsetConfig() | ||
} | ||
} ) | ||
.then( editor => { | ||
window.editor = editor; | ||
} ) | ||
.catch( err => { | ||
console.error( err.stack ); | ||
} ); |
12 changes: 12 additions & 0 deletions
12
docs/_snippets/framework/extending-content-allow-div-attributes.html
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,12 @@ | ||
<div id="snippet-div-attributes"> | ||
<div id="special-section-a" style="background: #eafbd7;padding:.8em .8em 0;margin-bottom:.8em;border:1px solid #8bc34a;"> | ||
<p><strong>Special section A</strong>: it has set "style" and "id" attributes.</p> | ||
</div> | ||
|
||
<p>Regular content of the editor.</p> | ||
|
||
<div id="special-section-b" style="background: #ffeed0;padding:.8em .8em 0;margin-bottom:.8em;border:1px solid #ff8f00;" spellcheck="false"> | ||
<p><strong>Special section B</strong>: it has set "style", "id" and spellcheck="false" attributes.</p> | ||
<p>This section disables native browser spellchecker.</p> | ||
</div> | ||
</div> |
74 changes: 74 additions & 0 deletions
74
docs/_snippets/framework/extending-content-allow-div-attributes.js
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,74 @@ | ||
/** | ||
* @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. | ||
* For licensing, see LICENSE.md. | ||
*/ | ||
|
||
/* globals ClassicEditor, console, window, document */ | ||
|
||
import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config'; | ||
|
||
function ConvertDivAttributes( editor ) { | ||
// Allow divs in the model. | ||
editor.model.schema.register( 'div', { | ||
allowWhere: '$block', | ||
allowContentOf: '$root' | ||
} ); | ||
|
||
// Allow divs in the model to have all attributes. | ||
editor.model.schema.addAttributeCheck( context => { | ||
if ( context.endsWith( 'div' ) ) { | ||
return true; | ||
} | ||
} ); | ||
|
||
// View-to-model converter converting a view div with all its attributes to the model. | ||
editor.conversion.for( 'upcast' ).elementToElement( { | ||
view: 'div', | ||
model: ( viewElement, modelWriter ) => { | ||
return modelWriter.createElement( 'div', viewElement.getAttributes() ); | ||
} | ||
} ); | ||
|
||
// Model-to-view convert for the div element (attrbiutes are converted separately). | ||
editor.conversion.for( 'downcast' ).elementToElement( { | ||
model: 'div', | ||
view: 'div' | ||
} ); | ||
|
||
// Model-to-view converter for div attributes. | ||
// Note that we use a lower-level, event-based API here. | ||
editor.conversion.for( 'downcast' ).add( dispatcher => { | ||
dispatcher.on( 'attribute', ( evt, data, conversionApi ) => { | ||
// Convert div attributes only. | ||
if ( data.item.name != 'div' ) { | ||
return; | ||
} | ||
|
||
const viewWriter = conversionApi.writer; | ||
const viewDiv = conversionApi.mapper.toViewElement( data.item ); | ||
|
||
// In the model-to-view conversion we convert changes. An attribute can be added or removed or changed. | ||
// The below code handles all 3 cases. | ||
if ( data.attributeNewValue ) { | ||
viewWriter.setAttribute( data.attributeKey, data.attributeNewValue, viewDiv ); | ||
} else { | ||
viewWriter.removeAttribute( data.attributeKey, viewDiv ); | ||
} | ||
} ); | ||
} ); | ||
} | ||
|
||
ClassicEditor | ||
.create( document.querySelector( '#snippet-div-attributes' ), { | ||
cloudServices: CS_CONFIG, | ||
extraPlugins: [ ConvertDivAttributes ], | ||
toolbar: { | ||
viewportTopOffset: window.getViewportTopOffsetConfig() | ||
} | ||
} ) | ||
.then( editor => { | ||
window.editor = editor; | ||
} ) | ||
.catch( err => { | ||
console.error( err.stack ); | ||
} ); |
33 changes: 33 additions & 0 deletions
33
docs/_snippets/framework/extending-content-allow-link-target.html
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,33 @@ | ||
<style> | ||
#snippet-link-target + .ck-editor .ck-content a[target]::after { | ||
content: "target=\"" attr(target) "\""; | ||
font-size: 0.6em; | ||
position: relative; | ||
left: 0em; | ||
top: -1em; | ||
background: #00ffa6; | ||
color: #000; | ||
padding: 1px 3px; | ||
border-radius: 10px; | ||
} | ||
|
||
#snippet-link-target-content { | ||
width: 100%; | ||
height: 8em; | ||
font-family: monospace; | ||
} | ||
</style> | ||
|
||
<div id="snippet-link-target"> | ||
<p>This <a href="https://ckeditor.com" target="_blank">editor</a> allows <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a" target="_parent">links</a> with a <code>target</code> attribute to be loaded into the content.</p> | ||
</div> | ||
|
||
<p><b>Note</b>: You can play with the content to see that different link <code>target</code> values are also handled.</p> | ||
|
||
<textarea id="snippet-link-target-content"> | ||
<p>A couple of links with different targets:</p> <ul> 	<li><a href="https://ckeditor.com" target="_blank">CKEditor</a></li> 	<li><a href="https://ckeditor.com/ckfinder/">CKFinder</a></li> 	<li><a href="https://cksource.com" target="_parent">CKSource</a></li> 	<li><a href="https://cksource.com/team/" target="_top">Team</a></li> </ul> | ||
</textarea> | ||
|
||
<p> | ||
<button type="button" id="snippet-link-target-content-update">Set editor data</button> | ||
</p> |
Oops, something went wrong.