WBCE CMS Forum

WBCE CMS – Way Better Content Editing.

Du bist nicht angemeldet.

#1 10.11.2018 15:12:16

stefanek
Developer

CKE, eigene Toolbar im Modul (best practice?)

Bevor ich das Rad neu erfinde, gibt es eine Anleitung oder will jemand seine Erfahrung teilen?
Es soll auch nur der CKE unterstützt werden.

Gruß,
Christian


“Success is the progressive realization of a worthy ideal.” ― Earl Nightingale

Offline

#2 10.11.2018 15:48:41

bernd
Developer

Re: CKE, eigene Toolbar im Modul (best practice?)

Gut, ob "best practice" ? Keine Ahnung  tongue

Einfach den WYSIWYG an geeigneter Stelle aufrufen und ihm die gewünschte Toolbar übergeben:

<?php show_wysiwyg_editor("desc_EN","desc_EN", $aProduct['desc_EN'],"100%","150px","MyToolbar"); ?>

und in einem script Bereich eben diese Toolbar definieren:

<script>
CKEDITOR.config.toolbar_MyToolbar = ([
	['Format'],['Bold','Italic','-','RemoveFormat'],['Link','Unlink','Anchor'],['NumberedList','BulletedList'],['Image','oembed','Table','HorizontalRule','SpecialChar','ckawesome'],['Source']
]);
CKEDITOR.toolbar = 'MyToolbar';
</script>

Der Einfachkeit halber - oder aus Faulheit (je nach Blickwinkel) hatte ich den Script-Teil bisher immer in der gleichen Datei in der sich das Editor-Feld befindet.

Beitrag geändert von bernd (10.11.2018 15:50:51)


... nein in Europa verwenden wir beim Programmieren nicht € statt $ ...

Offline

Liked by:

stefanek

#3 10.11.2018 16:01:52

stefanek
Developer

Re: CKE, eigene Toolbar im Modul (best practice?)

Super Bernd.
Vielen Dank.
Schaut einfach aus.
Werde ich später ausprobieren.

Gruß,
Christian


“Success is the progressive realization of a worthy ideal.” ― Earl Nightingale

Offline

#4 10.11.2018 21:14:09

stefanek
Developer

Re: CKE, eigene Toolbar im Modul (best practice?)

Das klappt richtig gut so.
Ich binde das Script aus einer zusätzlichen Datei ein, damit es nur einmal geladen wird (es tauchen zu/so viele Instanzen auf einer modify.php auf).

Gibt es noch einen Tipp, wie man die Formate, die sich hinter dem obigen Token [Format] (Styles DropDown) verbergen zurecht stutzen kann?

Gruß,
Christian

Beitrag geändert von stefanek (10.11.2018 21:14:43)


“Success is the progressive realization of a worthy ideal.” ― Earl Nightingale

Offline

#5 10.11.2018 21:25:20

bernd
Developer

Re: CKE, eigene Toolbar im Modul (best practice?)

in dem (Absatz)Format Dropdown sind ja die Formatierungen aus der jeweiligen editor.css
Definiere mal "zurecht stutzen" ...


... nein in Europa verwenden wir beim Programmieren nicht € statt $ ...

Offline

#6 10.11.2018 21:28:32

stefanek
Developer

Re: CKE, eigene Toolbar im Modul (best practice?)

Ich wollte die Menge an Styles beschränken, z.B. ohne H1 drin.


“Success is the progressive realization of a worthy ideal.” ― Earl Nightingale

Offline

#7 10.11.2018 21:46:04

bernd
Developer

Re: CKE, eigene Toolbar im Modul (best practice?)

Sorry, da muß ich passen, hab ich mich noch nie wirklich damit befasst ...


... nein in Europa verwenden wir beim Programmieren nicht € statt $ ...

Offline

#8 10.11.2018 21:51:12

stefanek
Developer

Re: CKE, eigene Toolbar im Modul (best practice?)

Kein Problem. Trotzdem danke.
Das ist an sich nicht so wichtig.
Nur, wenn man die Styles drin hat und da H1 drin ist, neigen die Leute dazu, alles schön groß zu machen... ohne Rücksicht auf Semantik... tongue


“Success is the progressive realization of a worthy ideal.” ― Earl Nightingale

Offline

#9 10.11.2018 21:56:54

bernd
Developer

Re: CKE, eigene Toolbar im Modul (best practice?)

Kenn ich,
was natürlich geht ist in der editor.css des Templates z.B. für h1 ein beherztes "display:none;" devil
wirkt sich halt auf alle CKE-Instanzen aus


... nein in Europa verwenden wir beim Programmieren nicht € statt $ ...

Offline

#10 10.11.2018 22:01:52

stefanek
Developer

Re: CKE, eigene Toolbar im Modul (best practice?)

Ich schau morgen nochmal, ob es irgendwie geht.
Ich weiß, dass ich es früher einmal gemacht habe. Das war aber glaube ich noch mit dem FCK Editor.


“Success is the progressive realization of a worthy ideal.” ― Earl Nightingale

Offline

#11 10.11.2018 23:06:43

colinax
Developer

Re: CKE, eigene Toolbar im Modul (best practice?)

Geht in der config.js ganz einfach:

CKEditor Documentation schrieb:
// Enable all default text formats:
config.format_tags = 'p;h1;h2;h3;h4;h5;h6;pre;address;div';

// Enable a limited set of text formats:
config.format_tags = 'p;h1;h2;pre;div';

oder über die (editor.)styles.js:

CKEditor Standard Package styles.js schrieb:
/**
 * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
 */

// This file contains style definitions that can be used by CKEditor plugins.
//
// The most common use for it is the "stylescombo" plugin which shows the Styles drop-down
// list containing all styles in the editor toolbar. Other plugins, like
// the "div" plugin, use a subset of the styles for their features.
//
// If you do not have plugins that depend on this file in your editor build, you can simply
// ignore it. Otherwise it is strongly recommended to customize this file to match your
// website requirements and design properly.
//
// For more information refer to: https://ckeditor.com/docs/ckeditor4/latest/guide/dev_styles.html#style-rules

CKEDITOR.stylesSet.add( 'default', [
	/* Block styles */

	// These styles are already available in the "Format" drop-down list ("format" plugin),
	// so they are not needed here by default. You may enable them to avoid
	// placing the "Format" combo in the toolbar, maintaining the same features.
	/*
	{ name: 'Paragraph',		element: 'p' },
	{ name: 'Heading 1',		element: 'h1' },
	{ name: 'Heading 2',		element: 'h2' },
	{ name: 'Heading 3',		element: 'h3' },
	{ name: 'Heading 4',		element: 'h4' },
	{ name: 'Heading 5',		element: 'h5' },
	{ name: 'Heading 6',		element: 'h6' },
	{ name: 'Preformatted Text',element: 'pre' },
	{ name: 'Address',			element: 'address' },
	*/

	{ name: 'Italic Title',		element: 'h2', styles: { 'font-style': 'italic' } },
	{ name: 'Subtitle',			element: 'h3', styles: { 'color': '#aaa', 'font-style': 'italic' } },
	{
		name: 'Special Container',
		element: 'div',
		styles: {
			padding: '5px 10px',
			background: '#eee',
			border: '1px solid #ccc'
		}
	},

	/* Inline styles */

	// These are core styles available as toolbar buttons. You may opt enabling
	// some of them in the Styles drop-down list, removing them from the toolbar.
	// (This requires the "stylescombo" plugin.)
	/*
	{ name: 'Strong',			element: 'strong', overrides: 'b' },
	{ name: 'Emphasis',			element: 'em'	, overrides: 'i' },
	{ name: 'Underline',		element: 'u' },
	{ name: 'Strikethrough',	element: 'strike' },
	{ name: 'Subscript',		element: 'sub' },
	{ name: 'Superscript',		element: 'sup' },
	*/

	{ name: 'Marker',			element: 'span', attributes: { 'class': 'marker' } },

	{ name: 'Big',				element: 'big' },
	{ name: 'Small',			element: 'small' },
	{ name: 'Typewriter',		element: 'tt' },

	{ name: 'Computer Code',	element: 'code' },
	{ name: 'Keyboard Phrase',	element: 'kbd' },
	{ name: 'Sample Text',		element: 'samp' },
	{ name: 'Variable',			element: 'var' },

	{ name: 'Deleted Text',		element: 'del' },
	{ name: 'Inserted Text',	element: 'ins' },

	{ name: 'Cited Work',		element: 'cite' },
	{ name: 'Inline Quotation',	element: 'q' },

	{ name: 'Language: RTL',	element: 'span', attributes: { 'dir': 'rtl' } },
	{ name: 'Language: LTR',	element: 'span', attributes: { 'dir': 'ltr' } },

	/* Object styles */

	{
		name: 'Styled Image (left)',
		element: 'img',
		attributes: { 'class': 'left' }
	},

	{
		name: 'Styled Image (right)',
		element: 'img',
		attributes: { 'class': 'right' }
	},

	{
		name: 'Compact Table',
		element: 'table',
		attributes: {
			cellpadding: '5',
			cellspacing: '0',
			border: '1',
			bordercolor: '#ccc'
		},
		styles: {
			'border-collapse': 'collapse'
		}
	},

	{ name: 'Borderless Table',		element: 'table',	styles: { 'border-style': 'hidden', 'background-color': '#E6E6FA' } },
	{ name: 'Square Bulleted List',	element: 'ul',		styles: { 'list-style-type': 'square' } },

	/* Widget styles */

	{ name: 'Clean Image', type: 'widget', widget: 'image', attributes: { 'class': 'image-clean' } },
	{ name: 'Grayscale Image', type: 'widget', widget: 'image', attributes: { 'class': 'image-grayscale' } },

	{ name: 'Featured Snippet', type: 'widget', widget: 'codeSnippet', attributes: { 'class': 'code-featured' } },

	{ name: 'Featured Formula', type: 'widget', widget: 'mathjax', attributes: { 'class': 'math-featured' } },

	{ name: '240p', type: 'widget', widget: 'embedSemantic', attributes: { 'class': 'embed-240p' }, group: 'size' },
	{ name: '360p', type: 'widget', widget: 'embedSemantic', attributes: { 'class': 'embed-360p' }, group: 'size' },
	{ name: '480p', type: 'widget', widget: 'embedSemantic', attributes: { 'class': 'embed-480p' }, group: 'size' },
	{ name: '720p', type: 'widget', widget: 'embedSemantic', attributes: { 'class': 'embed-720p' }, group: 'size' },
	{ name: '1080p', type: 'widget', widget: 'embedSemantic', attributes: { 'class': 'embed-1080p' }, group: 'size' },

	// Adding space after the style name is an intended workaround. For now, there
	// is no option to create two styles with the same name for different widget types. See https://dev.ckeditor.com/ticket/16664.
	{ name: '240p ', type: 'widget', widget: 'embed', attributes: { 'class': 'embed-240p' }, group: 'size' },
	{ name: '360p ', type: 'widget', widget: 'embed', attributes: { 'class': 'embed-360p' }, group: 'size' },
	{ name: '480p ', type: 'widget', widget: 'embed', attributes: { 'class': 'embed-480p' }, group: 'size' },
	{ name: '720p ', type: 'widget', widget: 'embed', attributes: { 'class': 'embed-720p' }, group: 'size' },
	{ name: '1080p ', type: 'widget', widget: 'embed', attributes: { 'class': 'embed-1080p' }, group: 'size' }

] );

Offline

#12 11.11.2018 01:06:22

bernd
Developer

Re: CKE, eigene Toolbar im Modul (best practice?)

Ah! Prima,
das erste Beispiel von Colinax könnte man dann auch direkt so

CKEDITOR.config.format_tags = 'p;h1;h2;pre;div';

in mein obiges Script-Schnippsel einbauen.

Ich hatte zwar auch schon mal in der Doku danach geguckt, aber wohl nach dem falschen gesucht  cry
Die Doku vom CKE ist eh etwas "gewöhnungsbedürftig" ... kann aber auch an mir liegen, vielleicht werde ich einfach langsam zu alt für den ganzen Kram  angel


... nein in Europa verwenden wir beim Programmieren nicht € statt $ ...

Offline

#13 11.11.2018 11:07:24

stefanek
Developer

Re: CKE, eigene Toolbar im Modul (best practice?)

Ah, prima, Christoph.
Das klappt, allerdings werden jetzt alle Instanzen davon beeinflusst.
Ich habe 2 Editoren, der eine hat die Toolbar "MyToolbar" und der andere "MyMiniToolbar" (mal angenommen).
Jetzt haben beide Toolbars die selben format_tags.
Meinst Du, ich kann die Format Tags auf eine bestimmte Toolbar abstimmen und für die andere Toolbar andere Format Tags?



bernd schrieb:

Ich hatte zwar auch schon mal in der Doku danach geguckt, aber wohl nach dem falschen gesucht  cry
Die Doku vom CKE ist eh etwas "gewöhnungsbedürftig" ... kann aber auch an mir liegen, vielleicht werde ich einfach langsam zu alt für den ganzen Kram  angel

... äh, ne, das zeigt nur, dass man nie auslernt. lol
Und dass manche Dokumentationen einfach zu umfangreich und nicht leicht nachzuvollziehen sind. angel

Gruß,
Christian


“Success is the progressive realization of a worthy ideal.” ― Earl Nightingale

Offline

#14 11.11.2018 11:22:26

stefanek
Developer

Re: CKE, eigene Toolbar im Modul (best practice?)

Ich habe grade das gefunden und es müsste "die" Lösung sein, aber irgendwie funktioniert es nicht und der JS Debugger gibt fehler aus....
https://ckeditor.com/docs/ckeditor4/lat … r-instance

Also übersehe ich etwas.

Gruß,
Christian


“Success is the progressive realization of a worthy ideal.” ― Earl Nightingale

Offline

#15 11.11.2018 11:58:06

colinax
Developer

Re: CKE, eigene Toolbar im Modul (best practice?)

Welche Fehler gibt die Konsole aus?

Offline

#16 11.11.2018 12:04:50

stefanek
Developer

Re: CKE, eigene Toolbar im Modul (best practice?)

Das ist der Code in der ckeCustomToolbars.js

// CustomSmall
CKEDITOR.config.toolbar_CustomSmall = ([
	['Source'],['Format'],['Bold','Italic','-','RemoveFormat'],['Link','Unlink','Anchor'],['NumberedList','BulletedList'],['Image','oembed','HorizontalRule','ckawesome']
]);
CKEDITOR.replace( 'CustomSmall', {
    height: 500,
    format_tags: 'h3;h4;div' 
});

Das ist die Fehlerausgabe:

Uncaught TypeError: Cannot read property 'getEditor' of undefined
    at a (ckeditor.js?t=B8DJ5M3:346)
    at Object.CKEDITOR.replace (ckeditor.js?t=B8DJ5M3:350)
    at ckeCustomToolbars.js?1541934078:6

Es scheint, wo ich 'CustomSmall' einsetze, das müsste irgendwie anders... aber ich komme nicht dahinter.

Christian


“Success is the progressive realization of a worthy ideal.” ― Earl Nightingale

Offline

#17 11.11.2018 12:54:06

colinax
Developer

Re: CKE, eigene Toolbar im Modul (best practice?)

dass das nichtgeht ist logisch, der code muss (in WBCE Sprache) in die view.php, modifiy.php usw. rein.

Die Definierung und der Aufruf müssen ebenfalls in derselben file sein.

Offline

#18 11.11.2018 13:02:44

stefanek
Developer

Re: CKE, eigene Toolbar im Modul (best practice?)

Ne, macht keinen Sinn.
Alles andere hat ja auch funktioniert (aus einer anderen Datei).

Die view.php hat damit schon mal gar nichts zu tun.  glasses

Beitrag geändert von stefanek (11.11.2018 13:04:16)


“Success is the progressive realization of a worthy ideal.” ― Earl Nightingale

Offline

#19 11.11.2018 13:06:15

stefanek
Developer

Re: CKE, eigene Toolbar im Modul (best practice?)

Dieses Beispiel von Bernd hier: https://forum.wbce.org/viewtopic.php?pid=20478#p20478
Funktioniert auch, wenn das JS ausgelagert ist (in einer externen Datei).
Logisch wäre es jetzt, wenn ich angeben könnte, mit welcher Toolbar meine format_tags kombiniert werden sollen.

Gruß,
Christian


“Success is the progressive realization of a worthy ideal.” ― Earl Nightingale

Offline

#20 11.11.2018 13:51:17

colinax
Developer

Re: CKE, eigene Toolbar im Modul (best practice?)

in diesem Fall vermute ich mal dass es falsch ausgelagert wurde:

https://ckeditor.com/docs/ckeditor4/lat … stomConfig

Beitrag geändert von colinax (11.11.2018 14:28:26)

Offline

#21 11.11.2018 14:20:30

stefanek
Developer

Re: CKE, eigene Toolbar im Modul (best practice?)

Vermutungen helfen  nicht weiter  wink
Ich schaue es mir später nochmal an.
Wie gesagt, es ist nicht so wichtig. Nice to have...


“Success is the progressive realization of a worthy ideal.” ― Earl Nightingale

Offline

#22 11.11.2018 19:33:16

stefanek
Developer

Re: CKE, eigene Toolbar im Modul (best practice?)

Habe es mir nochmal angeschaut und das Problem scheint zu sein, dass diese format_tags sich nicht an eine vordefinierte toolbar binden lassen.
Es macht etwas wenig Sinn, da die Formate teil der Toolbar sind... aber na ja. Wenigstens hat man was, worüber man sich wundern kann. thumb_up

Gruß,
Christian

Beitrag geändert von stefanek (11.11.2018 19:33:37)


“Success is the progressive realization of a worthy ideal.” ― Earl Nightingale

Offline

Fußzeile des Forums

up