Blog

Simon Simon
21.05.2010 18:44

CKeditor Fake-Elements


Ich bin nun endlich fertig mit dem Schreiben meines Plugins für Platzhalter für den Ckeditor. Es waren einige Recherchen erfordelich, und damit kein 2ter sich das antun muss schreibe ich diesen Blogeintrag.

Es gibt Elemente wie z.B.: einen Seitenumbruch oder Seitenanker, die eigentlich nicht sichtbar sind. Um diese im WYSIWYG Editor darstellen zu können werden diese temporär für den Bearbeitungszeitraum in Fake-Elements umgewandelt. Vor dem Abspeichern werden die Fake-Elements wieder in ihre ursprünglichen Elemente umgewandelt.

Das heißt, dass ich dem CKeditor beim Parsen des Original-Htmlcodes mitteilen muss, dass ich alle TemplateModule in Fake-Elemente umwandeln will. Das wird innerhalb der plugin.js geschrieben:
 

CKEDITOR.plugins.add('TemplateModule',
	{
	....	
	afterInit : function( editor )	{
			var dataProcessor = editor.dataProcessor,		dataFilter = dataProcessor && dataProcessor.dataFilterif ( dataFilter )
			{
				dataFilter.addRules(
				{				elements :{
						templatemodule : function( element )
						{
							var FakeElement = editor.createFakeParserElement(element, "templatemoduleillustrated", "templatemodule", true); 						FakeElement.attributes.alt = element.children[0].value/* Die URL zum Bild verfälschen, um zu bewirken, dass der Text im alt-Attribut angezeigt wird */
							FakeElement.attributes.src = ""return FakeElement;					}
					}
				});		}
		},........
	});

Wichtig ist, dass beim Parsen des Codes die createFakeParserElement Methode verwendet wird, nicht die createFakeElement Methode. Als Argument erhält man ein CKeditor.htmlParser.element, kein Ckeditor.dom.element. Leider habe ich das nicht in der Dokumentation gefunden was mich sehr ärgert.

Innerhalb des Dialogs füge ich dann das FakeElement folgendermaßen ein:

CKEDITOR.dialog.add( 'TemplateModule', function( editor )
	{
	... return
	{
	...		onOk: function()
			{
				/* Erstellen eines neuen <TemplateModule /> Objekts */
				var element = new CKEDITOR.dom.element("TemplateModule");			
	                         element.setAttributes({ 'class': SelectedModule.class, 'file': SelectedModule.File })var dialog = CKEDITOR.dialog.getCurrent();			var OptionsBox = dialog.getContentElement('ModuleOptions', 'ModuleOptionsBox');  			element.appendText(eval("SelectedModule.Name." + navigator.language))var editor = this.getParentEditor();			var FakeElement = editor.createFakeElement(element, "templatemoduleillustrated", "templatemodule");			FakeElement.unselectable();			FakeElement.setAttribute("alt", eval("SelectedModule.Name." + navigator.language))/* Die URL zum Bild verfälschen, um zu bewirken, dass der Text im alt-Attribut angezeigt wird */
				FakeElement.setAttribute("src", "");			editor.insertElement(FakeElement);		},... }});

Schlüsselwörter: Fake-Element, CKeditor, fakeelement, Dialog, createFakeParserElement
zuletzt geändert: 29. September 2010 02:17
Link zu diesem Artikel: (in die Zwischenablage)