CKeditor und bootstrap plugins

Hier können Probleme und alles andere in Deutscher Sprache gelöst werden.
Post Reply
reinhardl
Regular
Posts: 258
Joined: Wed Jun 20, 2007 8:54 am
Location: Germany

CKeditor und bootstrap plugins

Post by reinhardl »

Hallo,  
ich versuche gerade 3 plugins in den ckeditor einzubauen,damit dieser bootstrap unterstützt, komme aber nicht weiter.

die Plugings habe ich in folgende Verzeichnisse kopiert:
/htmlarea/ckeditor/ckeditor/plugins/bootstrapVisibility
/htmlarea/ckeditor/ckeditor/plugins/btbutton
/htmlarea/ckeditor/ckeditor/plugins/btbutton

dann habe ich die Datei
/htmlarea/ckeditor_s9y_plugin.js
nach
/templates/s9pr/admin/ckeditor_custom_plugin.js
kopiert.

Sobald ich nun
var customplugins = 'mediaembed,procurator,cheatsheet,';
in
var customplugins = 'mediaembed,procurator,cheatsheet,btbutton,';
ändere
funktioniert der ckeditor in s9y nicht mehr. Mit den beiden anderen Plugins gleiches result.

Was ich nicht verstehe ist folgende Anweisung in der ckeditor_s9y_config.js:
"Now add this name also to this files custom copy upper config.toolbarGroup, wherever you like it to have, eg. "{ name: 'mediaembed' }," if that plugin emits a button to be placed into the toolbar.
Or as { name: 'pluginname', items: 'PluginName' } eg { name: 'mediaembed', items: 'MediaEmbed' } in one of the upper toolbars, if that plugin emits a button to be placed into the toolbar.
The ckeditor plugin webpage download procedure will give information about dependency plugins and naming conventions.
After a browser reload, the newly added plugin should load into your textareas toolbars."
Was muss ich da noch machen?

Grüße
Reinhard
Timbalu
Regular
Posts: 4598
Joined: Sun May 02, 2004 3:04 pm

Re: CKeditor und bootstrap plugins

Post by Timbalu »

Das Plugin ist sehr neu: 27-28. Dez. 2015 - vielleicht noch buggy...?

Web Site http://ckeditor.com/addon/btbutton Dependencies: dialogs, lineutils, widget
und ein aktives jQuery im Backend.

Hast du wirklich alle?

Ansonsten /templates/s9pr/admin/ckeditor_custom_plugin.js:

Code: Select all

 var customplugins = 'mediaembed,procurator,cheatsheet,btbutton,';
und in der /templates/s9pr/admin/ckeditor_custom_config.js in deine in der PP gewählten Toolbar, zb hinter die links Gruppe:

Code: Select all

        { name: 'links',       items : [ 'Link','Unlink','Anchor' ] },
        { name: 'bootstraps',  items : [ 'btbutton' ] },
oder in dieser selbst als

Code: Select all

        { name: 'links',       items : [ 'Link','Unlink','Anchor','btbutton' ] },
sollte auch gehen.

Dann speichern und ein hard reload in der nächsten CKEDITOR new blog entry Instanz und der neue Button sollte da sein!
reinhardl wrote:Sobald ich nun
var customplugins = 'mediaembed,procurator,cheatsheet,';
in
var customplugins = 'mediaembed,procurator,cheatsheet,btbutton,';
ändere
funktioniert der ckeditor in s9y nicht mehr. Mit den beiden anderen Plugins gleiches result.
Dann hast du einen Fehler, irgendwo. Die Konsole müsste jaulen!
reinhardl wrote:ich versuche gerade 3 plugins in den ckeditor einzubauen,damit dieser bootstrap unterstützt, komme aber nicht weiter.

die Plugings habe ich in folgende Verzeichnisse kopiert:
/htmlarea/ckeditor/ckeditor/plugins/bootstrapVisibility
/htmlarea/ckeditor/ckeditor/plugins/btbutton
/htmlarea/ckeditor/ckeditor/plugins/btbutton
Nummer 2 und 3 unterscheiden sich nicht. Nummer 1 würde ich erst einmal ganz weglassen, ansonsten dieselbe Prozedur wie oben beschrieben (ohne Gewähr). Nummer 1 benötigt Bootstrap 3.X(?!) und die Toolbar muss forms unterstützen. Dies sind bei uns deaktiviert (config.removePlugins = 'flash,iframe,forms';) und auch in den Toolbars nicht vorhanden, außer der CKE eigenen FULL, wenn ich mich recht erinnere.
Nummer 2 benötigt jedenfalls nur die BS Icon font & CSS Definitionen, soweit ich das sehe.
Außerdem weiß man nicht ob beide Plugins sich überhaupt vertragen.

Viel Erfolg!
Regards,
Ian

Serendipity Styx Edition and additional_plugins @ https://ophian.github.io/ @ https://github.com/ophian
reinhardl
Regular
Posts: 258
Joined: Wed Jun 20, 2007 8:54 am
Location: Germany

Re: CKeditor und bootstrap plugins

Post by reinhardl »

Danke, das hat schon mal geholfen. Das meiste funktioniert jetzt. (Button, Grid etc.)

allerdings habe ich noch ein plugin welches folgende Installationshinweise hat:

config.extraPlugins = 'fontawesome';
config.contentsCss = 'path/to/your/font-awesome.css';
config.allowedContent = true;


muss das wirklich in die ckeditor/config.js oder in eine der custom Dateien?
Das Plugin läßt sich zwar aufrufen, gibt aber das auch richtig angezeigte und ausgewählte Zeichen nicht an die Editor Textbox zurück.

Grüße
Reinhard
Timbalu
Regular
Posts: 4598
Joined: Sun May 02, 2004 3:04 pm

Re: CKeditor und bootstrap plugins

Post by Timbalu »

Wenn, dann natürlich in die custom Dateien. Für die einfache Plugin addition hatte ich damals diese array push Geschichte geschrieben. Möglicherweise müsste man so etwas analog auch für das config.contentsCss entwerfen, denn diese config sammelt natürlicherweise keine multi-includes, glaube ich mich zu erinnern (wie viele dieser Konfigurationen). Und wir haben bereits eine Serendipity wysiwyg included, um die media floats im Editor korrekt auszuweisen.
Nun könnte man natürlich einfach dein awesome CSS dort einhängen, oder du probierst es einfach aus. Natürlich muss dein Pfad stimmen (immer ab Serendipity root, am besten natürlich nicht relativ). Ob die wysiwyg.css bereits so einfach wie die customs zu Klonen ist, bin ich gerade überfragt.

Edit: In der custom config kannst du natürlich einfach

Code: Select all

config.contentsCss = 'htmlarea/wysiwyg-style.css';
in

Code: Select all

config.contentsCss = '/templates/s9pr/admin/dein-wysiwyg-style.css';
ändern. Dann muss dein-wysiwyg-style.css alles Notwendige enthalten.

Über das config.allowedContent musst du einfach in der obersten "SECTION: ACF" Beschreibung nachlesen. Da liegt dann der Hase im Pfeffer, denn ACF einfach abzuschalten ist zwar einfach, aber nicht gesund, bzw generell zu empfehlen, wie bereits mehrfach hier ausgeführt.
Besser wäre es, die einzelnen tag cases - elements [attributes]{styles}(classes) in der config.extraAllowedContent sehr ausgewählt explizit zu erlauben. Man muss sich überlegen, was man eigentlich damit will. Je mehr man erlaubt, desto größer der potentielle "Mißbrauch", speziell wenn man das zb als Theme aus der eigenen Hand gibt, usw. Ich glaube wir hatten die Frage nach Erlaubnis Content für font-icon attribute, bzw classes schon einmal hier im Forum, siehe

Code: Select all

i(*);
im CKE Plugin thread. Das gilt eben auch für die Forms toolgroup Geschichte. Ich kann mir keinen Fall vorstellen, wo man das wirklich in einem S9y Blog gebrauchen muss, außer man benutzt S9y und damit den CKE als etwas, wofür es nicht vorgesehen ist. Denn wir wollen nicht einen generellen HTML Editor, sondern einen reinen entry-content-wysiwyg-Editor. Und dann hat man eventuell noch andere Baustellen. :)
Regards,
Ian

Serendipity Styx Edition and additional_plugins @ https://ophian.github.io/ @ https://github.com/ophian
Post Reply