Wysiwyg editor in eigenes Modul (dojotoolkit)

UCS - Univention Corporate Server
#1

Hallo!
Ich mache gerade erste Schritte in der UCS-Modulprogrammierung. Dabei habe ich mir dem Befehl

# umc-create-module

die entprechenden Verzeichnisse und Daten erstellt. Jetzt möchte ich das “Demo” Modul so abändern, dass ich ein wysiwyg editor als Feld habe. Zur Erklärung: Später möchte ich in einem Modul Text und desses Formatierungen (html code) in einer Datenbank abspeichern.
Dijit/Editor scheint das zu sein was ich benötige, ich habe jedoch nach mehreren Versuchen immer noch keine Ahnung wie ich diesen z.B. in DetailPage.js einfüge. Kann mir jemand netterweise ein kleines Beispiel zur Verfügung stellen?

Vielen Dank !
HW

#2

Hallo,

Ich benutze hir DetailPage.js, von dem ‘grid_with_detailpage’ template von ‘umc-create-module’ als Beispiel.
Alle Code-Beispiele sind in DetailPage.js

Als erstes müssen wir den dijit/Editor laden, damit wir ihn benutzen können.
Dies machen wir in dem ersten parameter von der ‘define’ Funktion. (https://dojotoolkit.org/documentation/tutorials/1.10/modules/ “Modules Loading Modules”)

Wir fügen einfach irgendwo in der Liste “dijit/Editor” hinzu
und geben dem geladenen Modul einen Namen, unter dem wir es benutzen wollen.

define([
	"dojo/_base/declare",
	"dojo/_base/lang",
	"dijit/Editor", // load Editor
	"dijit/_editor/plugins/ViewSource", // load ViewSource Editor plugin
	"umc/dialog",
	"umc/widgets/Form",
	"umc/widgets/Page",
	"umc/widgets/TextBox",
	"umc/widgets/ComboBox",
	"umc/widgets/StandbyMixin",
	"umc/i18n!umc/modules/foo"
], function(declare, lang, /* give names */ Editor, ViewSource, dialog, Form, Page, TextBox, ComboBox, StandbyMixin, _) {

Nun können wir einen neuen Editor erstellen:

Erstmal ein Beispiel wo wir den Editor direkt erstellen und der DetailPage hinzufügen:

buildRendering: function() {
	// is called after all DOM nodes have been setup
	// (originates from dijit._Widget)

	// it is important to call the parent's postMixInProperties() method
	this.inherited(arguments);

	this.renderDetailPage();

	/*** new code ***/
	var editor = new Editor();
	this.addChild(editor);
},

Wir können den Editor auch um Funktionalität erweitern.

var editor = new Editor({
	// füge extra funktionalität hinzu
	extraPlugins: [ViewSource] 
	// toolbar Aktionen anpassen
	plugins: ['cut','copy','paste','|','bold','italic','underline','strikethrough','subscript','superscript','|', 'indent', 'outdent', 'justifyLeft', 'justifyCenter', 'justifyRight']
});

(Editor properties und Plugins:
https://dojotoolkit.org/documentation/tutorials/1.10/editor/index.html
https://dojotoolkit.org/reference-guide/1.10/dijit/Editor.html)

Jetzt ein Beispiel für die Einbettung in das bestehende Konstrukt mit “umc/widgets/Form”:

renderDetailPage: function() {
	// render the form containing all detail information that may be edited

	// specify all widgets
	var widgets = [{
		type: TextBox,
		name: 'id',
		label: _('Identifier'),
		disabled: true
	}, {
		type: TextBox,
		name: 'name',
		label: _('Displayed name'),
		description: _('Name that is displayed')
	}, {
		type: ComboBox,
		name: 'color',
		label: _('Favorite color'),
		description: _('Favorite color associated with the current entry'),
		dynamicValues: 'foo/colors'
	}, {
		type: Editor,
		name: 'text',
		label: 'Text',
		extraPlugins: [ViewSource],
		plugins: ['bold', 'cut']
	}];

	// specify the layout... additional dicts are used to group form elements
	// together into title panes
	var layout = [{
		label: _('Read-only properties'),
		layout: [ 'id' ]
	}, {
		label: _('Editable properties'),
		layout: [ 'name', 'color' ]
	}, {
		label: 'WYSIWYG',
		layout: [ 'text' ]
	}];

	// create the form
	this._form = new Form({
		widgets: widgets,
		layout: layout,
		moduleStore: this.moduleStore
	});

	// add form to page...
	this.addChild(this._form);

	// hook to onSubmit event of the form
	this._form.on('submit', lang.hitch(this, '_save'));
},

Im Endeffekt erstellt “umc/widgets/Form” den Editor wie im ersten Beispiel; mit den Optionen, die in ‘widgets’ angegeben sind.

Viele Grüße
Johannes

Mastodon