Revision 23074944
Von Sven Schöling vor etwa 1 Jahr hinzugefügt
| js/kivi.js | ||
|---|---|---|
| 268 | 268 |
}; |
| 269 | 269 |
|
| 270 | 270 |
ns.focus_ckeditor_when_ready = function(element) {
|
| 271 |
$(element).data('ckeditorInstance').on('instanceReady', function() { ns.focus_ckeditor(element); });
|
|
| 271 |
$(element).on('ckeditor-ready', () => ns.focus_ckeditor(element));
|
|
| 272 | 272 |
}; |
| 273 | 273 |
|
| 274 | 274 |
ns.focus_ckeditor = function(element) {
|
| 275 |
$(element).data('ckeditorInstance').focus();
|
|
| 276 |
}; |
|
| 277 |
|
|
| 278 |
ns.selectall_ckeditor = function(element) {
|
|
| 279 |
var editor = $(element).ckeditorGet(); |
|
| 280 |
var editable = editor.editable(); |
|
| 281 |
if (editable.is('textarea')) {
|
|
| 282 |
var textarea = editable.$; |
|
| 283 |
|
|
| 284 |
if (CKEDITOR.env.ie) |
|
| 285 |
textarea.createTextRange().execCommand('SelectAll');
|
|
| 286 |
else {
|
|
| 287 |
textarea.selectionStart = 0; |
|
| 288 |
textarea.selectionEnd = textarea.value.length; |
|
| 289 |
} |
|
| 275 |
const editor = $(element).data('ckeditorInstance');
|
|
| 276 |
if (editor) {
|
|
| 277 |
editor.editing.view.focus(); |
|
| 290 | 278 |
} else {
|
| 291 |
if (editable.is('body'))
|
|
| 292 |
editor.document.$.execCommand('SelectAll', false, null);
|
|
| 293 |
|
|
| 294 |
else {
|
|
| 295 |
var range = editor.createRange(); |
|
| 296 |
range.selectNodeContents(editable); |
|
| 297 |
range.select(); |
|
| 298 |
} |
|
| 299 |
|
|
| 300 |
editor.forceNextSelectionCheck(); |
|
| 301 |
editor.selectionChange(); |
|
| 279 |
ns.focus_ckeditor_when_ready(element); |
|
| 302 | 280 |
} |
| 303 |
} |
|
| 281 |
};
|
|
| 304 | 282 |
|
| 305 | 283 |
ns.init_tabwidget = function(element) {
|
| 306 | 284 |
var $element = $(element); |
| ... | ... | |
| 322 | 300 |
$element.tabs(tabsParams); |
| 323 | 301 |
}; |
| 324 | 302 |
|
| 325 |
ns.init_text_editor = function(element) {
|
|
| 326 |
var layouts = {
|
|
| 327 |
all: [ [ 'Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript' ], [ 'BulletedList', 'NumberedList' ], [ 'RemoveFormat' ] ], |
|
| 328 |
default: [ [ 'Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript' ], [ 'BulletedList', 'NumberedList' ], [ 'RemoveFormat' ] ] |
|
| 329 |
}; |
|
| 330 |
|
|
| 331 |
var $e = $(element); |
|
| 332 |
var buttons = layouts[ $e.data('texteditor-layout') || 'default' ] || layouts['default'];
|
|
| 333 |
var config = {
|
|
| 334 |
entities: false, |
|
| 335 |
language: 'de', |
|
| 336 |
removePlugins: 'resize', |
|
| 337 |
extraPlugins: 'inline_resize', |
|
| 338 |
toolbar: buttons, |
|
| 339 |
disableAutoInline: true, |
|
| 340 |
title: false, |
|
| 341 |
disableNativeSpellChecker: false |
|
| 342 |
}; |
|
| 343 |
|
|
| 344 |
config.height = $e.height(); |
|
| 345 |
config.width = $e.width(); |
|
| 346 |
|
|
| 347 |
var editor = CKEDITOR.inline($e.get(0), config); |
|
| 348 |
$e.data('ckeditorInstance', editor);
|
|
| 349 |
|
|
| 350 |
if ($e.hasClass('texteditor-space-for-toolbar'))
|
|
| 351 |
editor.on('instanceReady', function() {
|
|
| 352 |
var editor = $e.ckeditorGet(); |
|
| 353 |
var editable = editor.editable(); |
|
| 354 |
$(editable.$).css("margin-top", "30px");
|
|
| 355 |
}); |
|
| 356 |
|
|
| 357 |
|
|
| 358 |
if ($e.hasClass('texteditor-autofocus'))
|
|
| 359 |
editor.on('instanceReady', function() { ns.focus_ckeditor($e); });
|
|
| 303 |
ns.init_text_editor5 = function($element) {
|
|
| 304 |
ClassicEditor |
|
| 305 |
.create($element.get(0), {
|
|
| 306 |
toolbar: [ |
|
| 307 |
'bold', 'italic', 'underline', 'strikethrough', |
|
| 308 |
'|', |
|
| 309 |
'subscript', 'superscript', |
|
| 310 |
'|', |
|
| 311 |
'bulletedList', 'numberedList', 'horizontalLine', |
|
| 312 |
'|', |
|
| 313 |
'undo', 'redo', 'removeFormat', |
|
| 314 |
'|', |
|
| 315 |
'sourceEditing' |
|
| 316 |
], |
|
| 317 |
language: {
|
|
| 318 |
ui: kivi.myconfig.countrycode, |
|
| 319 |
content: kivi.myconfig.countrycode |
|
| 320 |
} |
|
| 321 |
}) |
|
| 322 |
.then(editor => {
|
|
| 323 |
$element.data('ckeditorInstance', editor);
|
|
| 324 |
|
|
| 325 |
if ($element.hasClass('texteditor-autofocus'))
|
|
| 326 |
ns.focus_ckeditor($element); |
|
| 327 |
|
|
| 328 |
$element.trigger('ckeditor-ready');
|
|
| 329 |
|
|
| 330 |
if ($element.attr('disabled'))
|
|
| 331 |
editor.enableReadOnlyMode('disabled')
|
|
| 332 |
|
|
| 333 |
const element = $element.get(0); |
|
| 334 |
if (element.style.height) |
|
| 335 |
editor.editing.view.change((writer) => {
|
|
| 336 |
writer.setStyle( |
|
| 337 |
"height", |
|
| 338 |
element.style.height, |
|
| 339 |
editor.editing.view.document.getRoot() |
|
| 340 |
); |
|
| 341 |
}); |
|
| 342 |
}) |
|
| 343 |
.catch(err => {
|
|
| 344 |
console.error(err); |
|
| 345 |
}); |
|
| 360 | 346 |
}; |
| 361 | 347 |
|
| 362 | 348 |
ns.filter_select = function() {
|
| ... | ... | |
| 415 | 401 |
}); |
| 416 | 402 |
|
| 417 | 403 |
ns.run_once_for('.tabwidget', 'tabwidget', kivi.init_tabwidget);
|
| 418 |
ns.run_once_for('.texteditor', 'texteditor', kivi.init_text_editor);
|
|
| 404 |
ns.run_once_for('.texteditor', 'texteditor', kivi.init_text_editor5);
|
|
| 419 | 405 |
}; |
| 420 | 406 |
|
| 421 | 407 |
ns.submit_ajax_form = function(url, form_selector, additional_data) {
|
| ... | ... | |
| 510 | 496 |
dialog = |
| 511 | 497 |
$('#' + id)
|
| 512 | 498 |
.bind('dialogopen', function() {
|
| 513 |
ns.run_once_for('.texteditor-in-dialog,.texteditor-dialog', 'texteditor', kivi.init_text_editor);
|
|
| 499 |
ns.run_once_for('.texteditor-in-dialog,.texteditor-dialog', 'texteditor', kivi.init_text_editor5);
|
|
| 514 | 500 |
}) |
| 515 | 501 |
.dialog(dialog_params); |
| 516 | 502 |
return true; |
Auch abrufbar als: Unified diff
ckeditor5: ckeditor5 Update
ckeditor4 ist seit Juni 2022 End Of Life, und wurde deshalb upgedatet.
Dieser Commit fügt den neuen ckeditor5 parallel zum alten ein, und
ändert die automatischen Mechanismen auf den neuen Editor. Die alten
Scripte werden in einem späteren Commit entfernt.
Das Bundle in js/ckeditor5/ ist erstellt mit dem Online Packager:
https://ckeditor.com/ckeditor-5/online-builder/
Siehe Doku unter:
https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/quick-start-other.html#creating-custom-builds-with-online-builder
Modus:
- Classic
Plugins:
- bold
- italic
- list
- horizontal line
- remove format
- source editing
- strikethrough
- subscript
- superscript
- underline
Defaultsprache:
- Englisch
Die Dateien unter js/ckeditor5/ sind der Inhalt von build/ im package
Featureabgleich mit ckeditor4:
- die folgenden Features sind alle weiterhin verfügbar, können aus alten
Daten gelesen werden und funktionieren in Export und Print
- bold
- italic
- strikethrough
- underline
- superscript
- subscript
- numbered list
- bulleted list
- remove format
- zusätzlich sind in der neuen Konfiguration noch:
- undo/redo (for free)
- horizontal line (wurde in ein paar Kundenprojekten verwendet, ist
default konfiguriert)
- source editor (wurde in einigen Anpassungen verwendet, ist jetzt
default konfiguriert)
wenn etwas davon nicht gewünscht ist, einfach in js/kivi.js aus der
toolbar entfernen.
- mehr als eine Instanz in der gleichen Seite funktioniert
- Lokalisierung des Editors auf die Benutzersprache
(myconfig.countrycode) funktioniert für de und en.
- cut/copy/paste aus dem alten Editor gibt es nicht mehr
- Enter events im Editor werden nicht an umliegende Forms gebubblet
- Focus, initial Fokus und focus_when_ready funktionieren wie vorher
auch
- die folgenden Attribute im unterliegenden <textarea> werden korrekt
interpretiert:
- disabled
- style: height
- clientjs fokus funktioniert
Wichtige Änderungen:
- die funktion kivi.selectall_ckeditor wurde nicht mehr verwendet und
wurde entfernt.
- Der neue Editor ist jetzt wieder Classic und NICHT Inline. Der Grund
dafür ist:
- Inline funktioniert nicht auf <textarea> Tags sondern brauch
zwingend <div> tags. Das würde deutlich mehr Migrationsaufwand
bedeuten.
- Inline kopiert nicht automatisch den Inhalt des ckeditors zurück in
das originale DOM Element, was zu versteckten Bugs führen könnte.
Wenn Inline gewünscht ist, bitte separat bauen.
- CSS Theme Anpassungen sind nicht mehr kompatibel. Die Klassen und der
DOM Aufbau haben sich geändert. Die Standardversion sieht aber in
allen Stylesheets gut genug aus, dass das erstmal so bleiben kann.
- Das "width" Attribut im unterliegenden <textarea> wird nicht mehr
benutzt um den Editor zu dimensionieren. Der ckeditor nimmt sich immer
die volle Breite des umliegenden Containers.
- dymanisches resize ist nicht mehr unterstützt.
- es gibt keinen jquery adapter mehr. Interaktion mit dem editor müssen
mit der API des ckeditors passieren. Das Editor Objekt ist weiterhin
im data-ckeditorInstance des unterliegenden <textarea>.