Tastenkombinationen CKEditor - Bedingter Trennstrich

[Yetiie]

Gesucht wird eine Möglichkeit, den bedingten Trennstrich (­) durch Button oder (besser) Tasteneingabe über den CKEditor durchzuführen.

Oder weiß jemand alternativ, wie man solche Eingaben für einzelne Tastenkombinationen im CKEditor realisieren kann?

In der Config des Editors bin ich leider nicht fündig worden ...
Google selbst gibt für die Suchanfrage "bedingter Trennstrich" und CKEditor ganze 9 Treffer aus ...

Also: Jede Hilfe willkommen.

-----
Ja, der bedingte Trennstrich wird nicht so häufig benutzt, da ihn ältere Browser teilweise gar nicht unterstützen ... Hilfe zu der Erstellung (auch anderer) Tastenkombinationen im CKEditor wären trotzdem von Interesse. 

[lausianne]

Gibt's hier inzwischen was Neues? Könnte ich ebenfalls dringend gebrauchen...

Gruss, Ralf.

[kweitzel]

Hier gibt es leider nichts außer einem Link: http://docs.cksource.com/ 

Gruß

Klaus

[Stefek]

Es gibt da dieses Plugin im CKE, das man über das Omega Symbol aufruft. Die Tabelle mit Sonderzeichen.
Das Plugin befindet sich im CKE selbst.
Diese Datei muss angepasst werden:
\modules\ckeditor\ckeditor\plugins\specialchar\dialogs\specialchar.js
Und hier sollte dann sowas rein:
suche nach: charColumns:17,chars:['!','"'
und ersetze mit: charColumns:17,chars:['­(Bedingtes Trennzeichen)','!','"'

Ist aber nicht soo der Arbeitsgenuß, weil &shy im Editor nicht ausgegeben wird (wohl aber im Quellcode).
Und somit sieht man das ganze nicht einmal in der Tabelle selbst, weil die Tabelle nur sichtbare Zeichen anzeigt. Ein kleines Paradoxon der Computerwelt 
Einfach ausprobieren.
Wenn jemand eine andere Idee hat, immer her damit.

Gruß,
Stefek

[instantflorian]

Hallo,

als Droplet...
[[ts]]

Code:

return "­";

_florian.

[lausianne]

Stumpf ist Trumpf. Die Droplet-Idee finde ich gut. Mit den Sonderzeichen finde ich auch gut, ist nur Kunden schwieriger zu vermitteln, auf "nichts" zu klicken, und dann "nichts" zu sehen ...

Jetzt müsste man nur noch [[ts]] mit einem Knopf einfügen können. -> specialchar.js!

[Stefek]

Mit den Sonderzeichen finde ich auch gut, ist nur Kunden schwieriger zu vermitteln, auf "nichts" zu klicken, und dann "nichts" zu sehen ...

Ich schmeiß mich weg.

Stumpf ist Trumpf. Die Droplet-Idee finde ich gut.
...
Jetzt müsste man nur noch [[ts]] mit einem Knopf einfügen können. -> specialchar.js!

Auf die gleiche Art wie oben.
und ersetze mit: charColumns:17,chars:[[[ts]](Bedingter Trennstrich)','!','"'

Man kann sich da seine Lieblingsdroplets auch reintun, wenn man will.

[lausianne]

Ja, ich hab's.

charColumns:17,chars:['!','"' konnte ich nicht finden. Das muss eine ältere Version sein. Ich bin jetzt bei 3.6.2 (glaube ich ...)

Aber ich fand in /modules/ckeditor/ckeditor/ckeditor.js dies hier:
i.specialChars=['!', usw.

und ganz ans Ende habe ich ,'[[ts]]' gesetzt. Geht!

Gruss, Ralf.

[Stefek]

Hallo, super.
Ja, ich habe hier eine etwas ältere Version.

Übrigens, wenn Du dahinter noch in Klammern einen Hinweis-Text angibst, wird er beim Drüberfahren angezeigt.
(Zumindest sollte.)

Gruß,
Stefek

[lausianne]

Der Hinweis-Text muss in /modules/ckeditor/ckeditor/plugins/specialchar/lang/en.js

,'[[ts]]':'Bedingter Trennstrich'

[NorHei]

Man könnte das Droplet sogar [[-]] nennen Soweit ich das überblicke.

[NorHei]

So, einen bedingten Zeilenumbruch mit  Tastaturkürzel und Button:   

http://my-baker.net/pages/topics/ein-shy-button-bedingter-trennstrich-fuer-den-ckeditor.php

[Stefek]

Wenn Du das so machst, wofür brauchst Du dann noch das Droplet?
Gib doch direkt ­ aus.
Oder ist meine Augenrinde krumm?

[NorHei]

Ginge auch, aber ­ ist leider im Editor unsichtbar. Das heist man kann nicht sehen ob es Richtig plaziert ist. Ich habe aber leider noch keine Möglichkeit gefunden das in der WYSIWYG Ansicht irgendwie zu maskieren. Ok, man kann das Editorfenster groß und klein ziehen und schauen wo er umbricht.
Also wenn einem das reicht klar, dann gehts auch ohne das Droplet. Ich denke das ist Geschmackssache.
Der Vorteil wenn man aufs Droplet verzichtet ist allerdings das dann die Blockansicht mit Umbrüchen auch schon richtig funktioniert. Vieleicht bau ich mir einfach beides ein das Droplet wenn ich was sehen möchte und das CKE Plugin wenn ich darauf verzichten kann. Ein potentieller Kunde hat dann auch noch beie Möglichkeiten offen.   

[Stefek]

Ah, ich verstehe.

Gibt es nicht irgendeine Möglichkeit, dass er im Editor das "shy" in einen span plus ein "-" packt?
Also etwa so: <span class="shy">-&shy;</span>
So aber, dass es in der DB einfach nur &shy; ist und wenn man den Editor aufmacht, macht er daraus eben den obigen Code. Und auch wenn man grade ein neues SHY einsetzt.
Der vorteil ist dann, dass man das - immer sieht, dass umgebrochen wird, dass das ganze aber nicht in der DB ist.
(Der Vorteil gegenüber Dropletlösung ist Dir ja klar )

Vielleicht geht es irgendwie browserbasiert mit js (direkt im CKE).

Edit:
Ich mag Deine Pluginlösung auf jeden Fall.
Könnte, wenn es fertig ist, sogar in das CKE Package. Dietmar arbeitet im Moment an einer neuen CKE Version.

[Stefek]

Hallo Norbert,

ich hoffe das hier ist eine gute Ergänzung.

Man kann die editor css verwenden und das dort einfügen:
span.shy {background-color:rgb(239, 240, 242);color:rgb(136, 136, 136)} /* lightgrey/grey */
span.shy:before {content: "-";}

In der plugin.js
editor.insertHtml( '<span class="shy">&shy</span>' );

Das <span... kommt zwar mit in die Datenbank aber im Frontend wird es normal ausgegeben.

Wie es dann im CKEditor aussieht, habe ich angehängt.

Gruß,
Stefek

[Stefek]

Ich habe das als komplettes Plugin gepackt, mit icon und language files (EN und NL müßten angepasst werden).

TO DO:
1) den Ordner in den Pluginsordner des CKEditors

2) wb_config.js
config.extraPlugins          = '....   ,shybutton'; //hinzufügen
config.toolbar_WB_F ull = [....  ,[ 'Shybutton' ]       //hinzufügen


3) in die editor css folgende einfügen:
span.shy {background-color:rgb(239, 240, 242);color:rgb(136, 136, 136)} /* lightgrey/grey */
span.shy:before {content: "-";}


Vielleicht mag das jemand ausprobieren und wenn's klappt, frage ich Dietmar, ob er das Plugin mit in den WB CKE mir rein tut. (Ob aktiv oder inaktiv kann man dann noch besprechen, aber gut, wenn das Plugin an sich schon mal drin ist.)

Gruß,
Stefek

Download enfernt, neue Version weiter im Thread

[Luisehahne]

Na klar machen wir das. Im Moment bekomme ich den Button nicht angezeigt. Vielleicht ist es einfach auch schon zu spät. Wir werden skypen.

Dietmar

[NorHei]

@stefek : gute Idee!

Aber ich frage mich wird :

Code:

span.shy:before {content: "-";}

Von den Browsern gut unterstützt ?

Laut Selfhtml macht der IE das garnicht ?

[Stefek]

Ah ja, der gute alte IE.

Nun, für den Fall kann man dann (bzw. allgemein angeben) das folgende anfügen:
span.shy {background-color:rgb(239, 240, 242);color:rgb(136, 136, 136)} /* lightgrey/grey */
span.shy {padding-right:1px;padding-left:1px;}

Dann gibt es zwar keinen "-" aber ein "Leerzeichen" mit einem grauen Hintergrund im IE.
Somit sind die &shy; Dinger immer noch sichtbar.

Gruß,
Christian

[NorHei]

Vor allem ist dann das Zeichen nicht so Breit, damit ergibt sich bei Blocksatz eine Darstellung die näher am eigendlichen Ergebniss ist.

Mein Favorit für die Formatierung wäre:
span.shy {background:#0f0 ; padding: 0 1px;}

Dann haben wir endlich einen richtigen &shy; Button , das gefällt mir .

[NorHei]

Schon mal versucht das Zeichen zu löschen mit Backspace, das scheint mir ein wenig hakelig ?
So als wenn er das span trotz des gelöschetn &shy; stehen läst?

[Stefek]

Schon mal versucht das Zeichen zu löschen mit Backspace, das scheint mir ein wenig hakelig ?

Nicht so sehr bei mir. Meistens löscht man die Dinger auch nicht mehr. Wenn man die angrenzenden Buchstaben mit weglöscht und dann wieder einfügt, scheint alles OK.

Mein Favorit für die Formatierung wäre:
span.shy {background:#0f0 ; padding: 0 1px;}

Dann haben wir endlich einen richtigen &shy; Button , das gefällt mir .

Ja. Geht gut.
Den würde ich dann auch noch mit drin haben:
span.shy:before {content: "-";}

Und an sonsten, ja. Gute Sache das.

Gruß,
Stefek

[NorHei]

Nicht so sehr bei mir. Meistens löscht man die Dinger auch nicht mehr. Wenn man die angrenzenden Buchstaben mit weglöscht und dann wieder einfügt, scheint alles OK.

Das erklär mal nem Kunden... 

Habe schon mal rungetestet, wenn man z.B. den <i> Tag nimmt , dann funzt es eindandfrei. Ich denke CKE hat da wieder Sonderregeln für <span> Elemente.

span.shy:before {content: "-";}

Dann werden aber die Worte deutlich länger, und damit stimmt die Vorschau bei Blöcken mit Blocksatz nicht mehr. Deswegen würde ich sowas eher als auskommentierte Option in die Editor.css mit übernehmen. Also sozusagen zum anschalten.

[Stefek]

Zu dem ersten Problem und Kunden. Nun, der CKE hat weitaus größere Probleme. All diese Inline Editoren haben sie.
Erklär z.B. einem Kunden, wie er wieder aus dem <blockquote> Mode wieder rauskommen kann um die nächst Zeile zu machen.
Einiges lernen die eben durch Übung nur.

Zu dem CSS.
Hm... das CSS kann sich ja eh jeder überschreiben wie er will. Einfach eine editor.css im Template Ordner anlegen und gut.
Das mit dem Strich kann man sicherlich weglassen. Mir gefällt auch die Lösung mit nur
span.shy {background:#0f0 ; padding: 0 1px;}
Das war auch mein erster Ansatz, so in dieser Art.

Vielleicht kann jemand noch die Sprachdateien für EN und NL anpassen?

Gruß,
Stefek