WYSIWYG Editor in 6.2 ändern

Deutsches Forum
#1

Hallo Zusammen,

die 6.2er CE Version hat ja den WYSIWYG Editor mit an Board. Ich finde ihn gruselig, auch scheint er hier und da Probleme zu bereiten wie einige User berichten.

In der 4.10er Version hatte ich den CKEditor, gefiel mir erheblich besser. Da ich viele Texte (mit Erlaubnis) von der Homepage unseres Lieferanten kopiere, konnte ich in der alten Version über die Schaltfläche “aus MS-Word einfügen” einen Großteil überflüssiger HTML-Tags gleich eliminieren. Der WYSIWYG Editor der 6.2er Version bietet diese Möglichkeit leider nicht mehr - oder ich finde sie nicht.

Kann jemand sagen, ob der CKEditor in der 6.2er Version des Shop zum laufen zu bekommen ist?

Danke

#2

Dies geht sicherlich den CKEditor https://ckeditor.com/ über eine eigene Modullösung zu integrieren. Aber die Kosten dafür liegen wahrscheinlich realistisch bei +10.000,- Euro aufwärts.

#3

Der WYSIWYG Editor basiert auf Summernote (https://summernote.org/), welcher über ein Plugin (GitHub - DiemenDesign/summernote-cleaner: Plugin for Summernote that adds a Button and/or Paste functionality for cleaning MS Word Crud from editor text) um die gewünschte Funktionalität erweitert werden kann.

2 Likes
#4

Die Erweiterung des Summernote WYSIWYG Editor über das Plugin, welches MS Word Bestandteile rausnimmt natürlich die bessere Option und kostengünstiger.

#5

Danke! Das hört sich gut an.
Habe mir das mal angesehen, die Installationsanleitung bringt mich aber nicht wirklich weiter.

1. Include JS

Include the following code after Summernote:

<script src="summernote-cleaner.js"></script>

Habe mir die Moduldateien mal angesehen, aber ich habe keine Ahnung in welche Datei das rein muss …

#6

Für gewöhnlich gehört sowas in den Block admin_headitem_js und das Script wird mit [{oxscript include"ordner/summernote-cleaner.js"}] eingebunden.

1 Like
#7

Man muss das Plugin in den build-Prozess des Wysiwyg-Moduls einbauen.
Alle relativen Pfade gehen vom Verzeichnis source/modules/ddoe/wysiwyg aus.

  1. Datei kopieren nach build/vendor/summernote/js/plugins/summernote-cleaner.js

  2. In build/grunt/uglify.js aufnehmen:

    files: {
    “out/src/js/backend.min.js”: [
    “build/vendor/summernote/js/summernote.js”,
    “build/vendor/summernote/js/plugins/ddmedia.summernote.js”,
    “build/vendor/summernote/js/plugins/smarty.summernote.js”,
    "build/vendor/summernote/js/plugins/summernote-cleaner.js",
    “build/js/backend.js”
    ],

  3. Grunt installieren “npm install grunt”

  4. “grunt development” ausführen. Damit wird das Plugin in out/src/js/backend.min.js integriert.

Nach Änderungen immer den Browsercache löschen und im OXID-Admin die Seite neu laden.

Im summernote-cleaner.js kann man Optionen einstellen, ab Zeile 22:
$.extend($.summernote.options ...

Mit Option “keepHtml: false,” funktioniert es, es werden alle Tags entfernt.

Mit “keepHtml: true,” funktioniert es nicht richtig. Hierbei sollten eigentlich alle Tags mit Ausnahme der in “keepOnlyTags” aufgeführten entfernt werden. Es wird aber gar nichts mehr eingefügt, als wenn die Zwischenablage leer wäre. Dazu steht was in Issue 69 in dem Github-Projekt (github.com/DiemenDesign/summernote-cleaner/issues/69). Habe das aber nicht weiter verfolgt.

1 Like