Skip to content

Commit 104460c

Browse files
taylortomtaylortom
authored
Update: From ckeditor4 4.17.0 to ckeditor5 42.0.0 (fixes #2772) (#2773)
2 parents 6e2e738 + a1fdd65 commit 104460c

4 files changed

Lines changed: 189 additions & 48 deletions

File tree

‎frontend/src/modules/scaffold/backboneFormsOverrides.js‎

Lines changed: 67 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -84,13 +84,31 @@ define([
8484
};
8585
}
8686

87-
until(isAttached(this.$el)).then(function() {
88-
this.editor = CKEDITOR.replace(this.$el[0], {
87+
function convertStringsToRegExDeep (arr) {
88+
function processEntry ([key, value]) {
89+
value = (typeof value === "string")
90+
? new RegExp(value, 'i')
91+
: Array.isArray(value)
92+
? arr.map((value, index) => processEntry([index, value])[1])
93+
: (typeof value === "object" && value !== null)
94+
? Object.fromEntries(Object.entries(value).map(processEntry))
95+
: value;
96+
return [key, value];
97+
}
98+
return arr.map((value, index) => processEntry([index, value])[1])
99+
}
100+
101+
until(isAttached(this.$el)).then(() => {
102+
return CKEDITOR.create(this.$el[0], {
89103
dataIndentationChars: '',
90104
disableNativeSpellChecker: false,
91105
enterMode: CKEDITOR[Origin.constants.ckEditorEnterMode],
92106
entities: false,
93-
extraAllowedContent: Origin.constants.ckEditorExtraAllowedContent,
107+
htmlSupport: {
108+
// Convert all allow/disallow strings to regexp, as config is json only
109+
allow: convertStringsToRegExDeep((Origin.constants.ckEditorHtmlSupport && Origin.constants.ckEditorHtmlSupport.allow) || []),
110+
disallow: convertStringsToRegExDeep((Origin.constants.ckEditorHtmlSupport && Origin.constants.ckEditorHtmlSupport.disallow) || [])
111+
},
94112
on: {
95113
change: function() {
96114
this.trigger('change', this);
@@ -112,24 +130,50 @@ define([
112130
elements.forEach(function(element) { writer.setRules(element, rules); });
113131
}
114132
},
115-
toolbar: [
116-
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Source', '-', 'ShowBlocks' ] },
117-
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
118-
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ], items: [ 'Find', 'Replace', '-', 'SelectAll' ] },
119-
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv' ] },
120-
{ name: 'direction', items: [ 'BidiLtr', 'BidiRtl' ] },
121-
'/',
122-
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat'] },
123-
{ name: 'styles', items: [ 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ] },
124-
{ name: 'links', items: [ 'Link', 'Unlink' ] },
125-
{ name: 'colors', items: [ 'TextColor', 'BGColor' ] },
126-
{ name: 'insert', items: [ 'SpecialChar', 'Table' ] },
127-
{ name: 'tools', items: [] },
128-
{ name: 'others', items: [ '-' ] }
129-
]
130-
});
131-
}.bind(this));
132-
133+
plugins: window.CKEDITOR.pluginsConfig,
134+
toolbar: {
135+
items: [
136+
'sourceEditing',
137+
'showBlocks',
138+
'undo',
139+
'redo',
140+
'|',
141+
'findAndReplace',
142+
'selectAll',
143+
'|',
144+
'numberedList',
145+
'bulletedList',
146+
'blockQuote',
147+
'indent',
148+
'outdent',
149+
'|',
150+
'bold',
151+
'italic',
152+
'underline',
153+
'strikethrough',
154+
'subscript',
155+
'superscript',
156+
'alignment',
157+
'removeFormat',
158+
'|',
159+
'link',
160+
'fontColor',
161+
'fontBackgroundColor',
162+
'|',
163+
'specialCharacters',
164+
'insertTable'
165+
],
166+
shouldNotGroupWhenFull: true
167+
}
168+
}).then(editor => {
169+
this.editor = editor
170+
CKEDITOR.instances = CKEDITOR.instances || []
171+
CKEDITOR.instances.length = CKEDITOR.instances.length || 0;
172+
this.editor.id = CKEDITOR.instances.length
173+
CKEDITOR.instances.length++;
174+
CKEDITOR.instances[this.editor.id] = this.editor
175+
})
176+
});
133177
return this;
134178
};
135179

@@ -149,8 +193,8 @@ define([
149193

150194
// ckeditor removal
151195
Backbone.Form.editors.TextArea.prototype.remove = function() {
152-
this.editor.removeAllListeners();
153-
CKEDITOR.remove(this.editor);
196+
this.editor.stopListening()
197+
delete CKEDITOR.instances[this.editor.id]
154198
};
155199

156200
// add override to allow prevention of validation

‎frontend/src/modules/scaffold/less/textArea.less‎

Lines changed: 5 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,9 @@
11
.field-editor {
2-
.cke_chrome {
3-
border-color: #ccc;
4-
border-radius: 2px;
5-
overflow: hidden;
6-
box-shadow: none;
7-
width: 93%;
8-
}
9-
10-
.cke_top {
11-
background: #eee;
12-
border-color: #ccc;
13-
box-shadow: none;
14-
}
15-
16-
.cke_bottom {
17-
background: @white;
18-
border-color: #ccc;
19-
}
2+
.ck.ck-editor {
3+
width: 93% !important;
204

21-
.cke_toolgroup {
22-
background-image: none;
23-
background: @white;
24-
border-color: #ccc;
5+
.ck.ck-content {
6+
min-height: 200px !important;
7+
}
258
}
269
}

‎lib/configuration.js‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ var ALLOWED_CLIENT_SIDE_KEYS = [
3232
'useSmtp',
3333
'isProduction',
3434
'maxLoginAttempts',
35-
'ckEditorExtraAllowedContent',
35+
'ckEditorHtmlSupport',
3636
'ckEditorEnterMode',
3737
'maxFileUploadSize',
3838
'supportLink',
@@ -81,7 +81,20 @@ function Configuration() {
8181
this.conf = {
8282
root: this.serverRoot,
8383
maxLoginAttempts: 3,
84-
ckEditorExtraAllowedContent: 'span(*)',
84+
ckEditorHtmlSupport: {
85+
allow: [{
86+
name: "^(blockquote|ul|ol|span)$"
87+
},{
88+
name: ".*",
89+
classes: true,
90+
styles: true
91+
},{
92+
name: "^a$",
93+
attributes: {
94+
target: true
95+
}
96+
}]
97+
},
8598
maxFileUploadSize: '200MB',
8699
ckEditorEnterMode: 'ENTER_P'
87100
};

‎routes/index/index.hbs‎

Lines changed: 102 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<link rel="stylesheet" href="css/adapt.css" />
77
<link rel="stylesheet" href="font-awesome-4.5.0/css/font-awesome.min.css">
88
<script type="text/javascript" src="modernizr.js"></script>
9-
<script src="//cdn.ckeditor.com/4.17.0/full-all/ckeditor.js"></script>
9+
<link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/42.0.0/ckeditor5.css">
1010
{{#if isProduction}}
1111
<script type="text/javascript" src="require.js" data-main="js/origin.js{{#if dateStampAsString}}?{{dateStampAsString}}{{/if}}"></script>
1212
{{else}}
@@ -47,5 +47,106 @@
4747
</div>
4848
</div>
4949
</div>
50+
<script type="importmap">
51+
{
52+
"imports": {
53+
"ckeditor5": "https://cdn.ckeditor.com/ckeditor5/42.0.0/ckeditor5.js",
54+
"ckeditor5/": "https://cdn.ckeditor.com/ckeditor5/42.0.0/"
55+
}
56+
}
57+
</script>
58+
<script type="module">
59+
import {
60+
ClassicEditor,
61+
Alignment,
62+
Autoformat,
63+
AutoLink,
64+
Autosave,
65+
BalloonToolbar,
66+
BlockQuote,
67+
BlockToolbar,
68+
Bold,
69+
Clipboard,
70+
Code,
71+
Essentials,
72+
FindAndReplace,
73+
GeneralHtmlSupport,
74+
Font,
75+
Highlight,
76+
Indent,
77+
IndentBlock,
78+
Italic,
79+
Link,
80+
List,
81+
ListProperties,
82+
Paragraph,
83+
SelectAll,
84+
ShowBlocks,
85+
SourceEditing,
86+
SpecialCharacters,
87+
SpecialCharactersArrows,
88+
SpecialCharactersCurrency,
89+
SpecialCharactersEssentials,
90+
SpecialCharactersLatin,
91+
SpecialCharactersMathematical,
92+
SpecialCharactersText,
93+
Strikethrough,
94+
Subscript,
95+
Superscript,
96+
Table,
97+
TableCellProperties,
98+
TableProperties,
99+
TableToolbar,
100+
TextTransformation,
101+
Underline,
102+
Undo
103+
} from 'ckeditor5';
104+
105+
window.CKEDITOR = ClassicEditor
106+
window.CKEDITOR.pluginsConfig = [
107+
Alignment,
108+
Autoformat,
109+
AutoLink,
110+
Autosave,
111+
BalloonToolbar,
112+
BlockQuote,
113+
BlockToolbar,
114+
Bold,
115+
Clipboard,
116+
Code,
117+
Essentials,
118+
FindAndReplace,
119+
GeneralHtmlSupport,
120+
Font,
121+
Highlight,
122+
Indent,
123+
IndentBlock,
124+
Italic,
125+
Link,
126+
List,
127+
ListProperties,
128+
Paragraph,
129+
SelectAll,
130+
ShowBlocks,
131+
SourceEditing,
132+
SpecialCharacters,
133+
SpecialCharactersArrows,
134+
SpecialCharactersCurrency,
135+
SpecialCharactersEssentials,
136+
SpecialCharactersLatin,
137+
SpecialCharactersMathematical,
138+
SpecialCharactersText,
139+
Strikethrough,
140+
Subscript,
141+
Superscript,
142+
Table,
143+
TableCellProperties,
144+
TableProperties,
145+
TableToolbar,
146+
TextTransformation,
147+
Underline,
148+
Undo
149+
];
150+
</script>
50151
</body>
51152
</html>

0 commit comments

Comments
 (0)