Skip to content

Commit acecc86

Browse files
JeremyCaneyJeremyCaney
committed
Merge branch 'feature/CKEditor-UI' into develop
General cleanup of CKEditor configuration. Notably, this aims to provide a cleaner, bare bones version in anticipation that most customers will implement a custom version of the `HtmlViewComponent` view in order to establish a custom configuration, style set, and stylesheet. Given that, the out-of-the-box version should be basic, without any prescriptive elements. This version introduces the following changes: - Removal of the custom style set - Removal of unused or commented out configuration properties - Removal of the Spell Check As You Type (SCAYT) plugin - Removal of unused `ontopic_toolbar` in preference for standard `toolbar` - Updating the comments and formatting of JavaScript and CSS to latest standards - Corrected implementation of Leto Light used as the default style for headers
2 parents b226a7e + 452fd19 commit acecc86

3 files changed

Lines changed: 92 additions & 167 deletions

File tree

‎OnTopic.Editor.AspNetCore/Shared/Scripts/CkEditor/CustomConfig.js‎

Lines changed: 59 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,81 +1,82 @@
1+
/*==============================================================================================================================
2+
| Author Ignia, LLC
3+
| Client Ignia, LLC
4+
| Project OnTopic Editor
5+
\=============================================================================================================================*/
16
/*
27
Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.
38
For licensing, see LICENSE.html or http://ckeditor.com/license
49
*/
510

11+
/*==============================================================================================================================
12+
| METHOD: EDITOR CONFIG
13+
\-----------------------------------------------------------------------------------------------------------------------------*/
14+
/**
15+
* Provides configuration settings for CKEditor.
16+
*/
617
CKEDITOR.editorConfig = function( config ) {
7-
//Define changes to default configuration here. For example:
8-
//config.language = 'fr';
9-
//config.uiColor = '#AADC6E';
10-
//config.extraPlugins = 'a11ychecker';
11-
config.removePlugins = 'autosave';
18+
config.removePlugins = 'autosave,scayt';
1219
config.allowedContent = true;
1320
config.baseHref = '/';
1421
config.skin = 'moono-lisa';
15-
//config.uiColor = '#CFCFCF';
16-
//config.height = '515px';
17-
//config.resize_maxHeight = '800';
1822
config.resize_maxWidth = '800';
1923
config.fillEmptyBlocks = false;
2024
config.shiftEnterMode = CKEDITOR.ENTER_BR;
2125
config.contentsCss = '/_content/OnTopic.Editor.AspNetCore/Shared/Styles/CKEditor.css';
26+
config.disableNativeSpellChecker = false;
2227
config.toolbar = [
23-
{ name: 'document', items: [ 'Source' ] },
24-
{ name: 'clipboard', items: [ 'Cut', 'Copy', 'Paste', '-', 'Undo', 'Redo' ] },
25-
{ name: 'blocks', items: [ 'ShowBlocks', 'RemoveFormat' ] },
26-
{ name: 'editing', items: [ 'Scayt' ] },
27-
{ name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
28-
{ name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule', 'SpecialChar' ] },
28+
{
29+
name : 'document',
30+
items : ['Source']
31+
},
32+
{
33+
name : 'clipboard',
34+
items : ['Undo', 'Redo', '-', 'Cut', 'Copy', 'Paste']
35+
},
36+
{
37+
name : 'blocks',
38+
items : ['ShowBlocks', 'RemoveFormat']
39+
},
40+
{
41+
name : 'links',
42+
items : ['Link', 'Unlink', 'Anchor']
43+
},
44+
{
45+
name : 'insert',
46+
items : ['Image', 'Table', 'HorizontalRule', 'SpecialChar']
47+
},
2948
'/',
30-
{ name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
31-
{ name: 'position', items: [ 'JustifyLeft', 'JustifyCenter', 'JustifyRight', '-', 'Outdent', 'Indent' ] },
32-
{ name: 'paragraph', items: [ 'NumberedList', 'BulletedList', '-', 'Blockquote' ] },
33-
'/',
34-
{ name: 'styles', items: ['Styles', 'Format'] },
35-
{ name: 'tools', items: [ 'Find', 'Replace', 'SelectAll', 'Maximize' ] }
49+
{
50+
name : 'styles',
51+
items : ['Format']
52+
},
53+
{
54+
name : 'basicstyles',
55+
items : ['Bold', 'Italic', 'Strike', 'Subscript', 'Superscript']
56+
},
57+
{
58+
name : 'position',
59+
items : ['JustifyLeft', 'JustifyCenter', 'JustifyRight']
60+
},
61+
{
62+
name : 'paragraph',
63+
items : ['NumberedList', 'BulletedList', 'Outdent', 'Indent', '-', 'Blockquote']
64+
},
65+
{
66+
name : 'tools',
67+
items : ['Find', 'Replace', 'SelectAll', 'Maximize']
68+
}
3669
];
3770
config.toolbarCanCollapse = true;
38-
config.toolbar_Full = [
39-
['Source','-','Save','NewPage','Preview','-','Templates'],
40-
['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
41-
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
42-
['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
43-
'/',
44-
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
45-
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote','CreateDiv'],
46-
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
47-
['Link','Unlink','Anchor'],
48-
['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
49-
'/',
50-
['Styles','Format','Font','FontSize'],
51-
['TextColor','BGColor'],
52-
['Maximize', 'ShowBlocks','-','About']
53-
];
54-
config.toolbar_Basic = [
55-
['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']
56-
];
57-
config.toolbar_OnTopic = [
58-
['Preview','Source','Undo','Redo','ShowBlocks','RemoveFormat'],
59-
['Bold','Italic','Cut','Copy','Paste','PasteText','Scayt'],
60-
['Styles'], //,'Format'
61-
'/',
62-
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','Outdent','Indent'],
63-
['NumberedList','BulletedList','Link','Unlink','Anchor'],
64-
['CreateDiv','Image','Table','HorizontalRule','SpecialChar'],
65-
['Find','Replace','SelectAll','Maximize'],
66-
];
67-
//Set font names
68-
config.font_names =
69-
'Tahoma/Tahoma, Arial/Arial, sans-serif;' +
70-
'Times New Roman/Times New Roman, Times, serif;' +
71-
'Verdana';
72-
//Call external styles set definition for Styles dropdown menu
73-
config.stylesCombo_stylesSet = 'OnTopicStyleSet:/_content/OnTopic.Editor.AspNetCore/Shared/Scripts/CkEditor/StylesSet.js';
74-
//Set classes for styles defined in styles set
7571
config.bodyClass = 'CKEPanel';
76-
7772
};
7873

74+
/*==============================================================================================================================
75+
| METHOD: INSTANCE READY
76+
\-----------------------------------------------------------------------------------------------------------------------------*/
77+
/**
78+
* Provides late binding rules to initialize once the editor instance is ready.
79+
*/
7980
CKEDITOR.on('instanceReady', function (ev) {
8081
var blockTags = ['div', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'pre', 'ul', 'ol', 'li', 'br'];
8182
var rules = {

‎OnTopic.Editor.AspNetCore/Shared/Scripts/CkEditor/StylesSet.js‎

Lines changed: 0 additions & 93 deletions
This file was deleted.

‎OnTopic.Editor.AspNetCore/Shared/Styles/CKEditor.scss‎

Lines changed: 33 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,50 @@
1-
@import url('https://fonts.googleapis.com/css?family=Lato:300,400');
1+
//==============================================================================================
2+
// CKEDITOR
3+
//----------------------------------------------------------------------------------------------
4+
// Custom stylesheet to be used within the CKEditor. As this implementation should be
5+
// implementation agnostic, this defines a very basic set of style preferences. In practice, we
6+
// expect most implementions will want to establish a custom configuration, style set, and style
7+
// sheet for CKEditor, thus overriding this implementation.
8+
//==============================================================================================
9+
10+
//----------------------------------------------------------------------------------------------
11+
// FONTS
12+
//----------------------------------------------------------------------------------------------
13+
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400&display=swap');
14+
15+
//----------------------------------------------------------------------------------------------
16+
// BODY
17+
//----------------------------------------------------------------------------------------------
218
body {
3-
background-color: #FFF;
4-
font-family: "Lato", Helvetica, Arial, sans-serif;
5-
font-size: 16px;
6-
color: #333;
7-
}
19+
background-color : #FFF;
20+
font-family : "Lato", Helvetica, Arial, sans-serif;
21+
font-size : 16px;
22+
color : #333;
23+
}
24+
25+
//----------------------------------------------------------------------------------------------
26+
// HEADINGS
27+
//----------------------------------------------------------------------------------------------
828
h1,
929
h2,
1030
h3 {
11-
font-family: "Lato Light", Helvetica, Arial, sans-serif;
31+
font-weight : 300;
1232
}
1333
h1 {
14-
font-size: 32px;
34+
font-size : 32px;
1535
}
1636
h2 {
17-
font-size: 28px;
37+
font-size : 28px;
1838
}
1939
h3 {
20-
font-size: 24px;
40+
font-size : 24px;
2141
}
2242
h4 {
23-
font-size: 18px;
43+
font-size : 18px;
2444
}
2545
h5 {
26-
font-size: 16px;
46+
font-size : 16px;
2747
}
2848
h6 {
29-
font-size: 14px;
30-
}
31-
.Heading {
32-
font-family: "Lato", Helvetica, Arial, sans-serif;
49+
font-size : 14px;
3350
}

0 commit comments

Comments
 (0)