SimpleMDE um eigene Funktion erweitern

Post Reply
User avatar
CrazyBread
Master Bludit
Posts: 73
Joined: Tue Jan 19, 2016 9:51 pm
Location: Germany
Has thanked: 4 times
Been thanked: 5 times
Contact:

Ich habe jetzt schon eine Weile das Forum durchsucht, aber noch nichts passendes gefunden.
Ich würde gerne das Plugin SimpleMDE erweitern, da ich jemanden von Nibbleblog auf Bludit umziehen will.
Alllerdings verwendet dieser Benutzer öfter Zitate und färbt diese entsprechend ein. Hierzu muss bei Markdown ja auf HTML zurückgegriffen werden, soweit ich mich informiert habe.
Nun ist ja im Plugin die simplemde.min.js verbaut. Mit dem Notepad++ kann man die ja wieder schön formatieren, allerdings ist die Lesbarkeit trotzdem sehr bescheiden, da natürlich auch alle Variablen entsprechend gekürzt wurden.

Gibt es eine Anleitung / bestimmte Methode, den Editor um eine eigene Funktion zu erweitern?

Danke und beste Grüße,

CrazyBread
Techi
Ssr. Bludit
Posts: 10
Joined: Thu Sep 29, 2016 9:40 am

Am Anfang hatte ich auch mit Notepad++ gearbeitet.
Zum Glück (sage ich jetzt) lief es nicht unter Linux und ich fing an mit Geany zu arbeiten. Seit dem bin ich dabei geblieben.

Zu finden ist es hier: http://www.geany.org/ und die Seite der Plugins hier: http://plugins.geany.org/

Nur als Idee
Gruß,
Der Techi
User avatar
CrazyBread
Master Bludit
Posts: 73
Joined: Tue Jan 19, 2016 9:51 pm
Location: Germany
Has thanked: 4 times
Been thanked: 5 times
Contact:

Danke, den werde ich mir mal anschauen.
Im Prinzip habe ich das Tool ja nur gebraucht, um die js-Datei wieder schön zu formatieren.

Ich habe jetzt eine Lösung gefunden, die soweit funktioniert:

1. Man sucht in der simplemde.min.js die Stelle "K={bold" (Zeile 15, 64te Stelle).
Nun fügt man folgendes (in meinem Beispiel Textfarbe auf rot stellen) direkt nach der ersten geschweiften Klammer und "bold" ein:

Code: Select all

(...)K={
//Name, wie man ihn auch in den Plugineinstellungen angeben kann
redfont : {
	name: "redfont",
	action: function customFunction(editor){
		var cm = editor.codemirror;
		
		var startTag = '<font color="red">';
		var endTag = '</font>';
		
		//Die Selektion des Benutzers wird in einer Variablen gespeichert
		var selection = cm.getSelection();
		//User hat nichts ausgewählt
		if (selection.length == 0)
		{
			//Start und Endtag an die aktuelle Cursorposition setzen
			cm.replaceSelection(startTag+endTag);
			//Neue Cursorposition abfragen
			var cursorPosition = cm.getCursor("start");
			//Den Cursor zwischen die neuen Tags setzen
			cm.setCursor({line: cursorPosition.line, ch: cursorPosition.ch-endTag.length});
		}
		//User hat etwas ausgewählt
		else {
			cm.replaceSelection(startTag + selection + endTag);
			var cursorPositionStart = cm.getCursor("start");
			var cursorPositionEnd = cm.getCursor("end");
			//Zeichen zwischen den neuen Tags selektieren
			var startCursor = {line: cursorPositionStart.line, ch: cursorPositionStart.ch-endTag.length-selection.length};
			var endCursor = {line: cursorPositionEnd.line, ch: cursorPositionEnd.ch-endTag.length};
			cm.setSelection(startCursor, endCursor);
		}
		//Fokus wieder auf das Textfeld!
		cm.focus();
	},
	className: "fa fa-star red",
	title: "Rote Schrift",
},
bold(...)
In meinem Fall würde dann im SimpleMDE ein Stern als Button erscheinen. Dieser ist allerdings noch nicht rot. Deshalb im Array (siehe Code oben) unter "className" die Klasse um "red" erweitern.
Jetzt kann man in der "simplemde.min.css" noch folgendes anfügen (einfach in eine neue Zeile packen):

Code: Select all

a.fa.fa-star.red{color:red!important}

Das funktioniert. Die Schrift wird rot dargestellt und anhand dieser Funktion kann man alles andere ableiten (Schrift zentriert o.ä.).

Eine genauere Beschreibung hab ich auf meiner Homepage veröffentlicht.
http://itwerkstatt.omdriebigs-gspann.de ... -erweitern

Allerdings handelt es sich hier klar um einen Hack, nach einem Update ist das alles wieder weg.
Vielleicht gibt es also noch eine elegantere Methode, die hier vielleicht jemand kennt.
User avatar
Edi
Site Admin
Posts: 3121
Joined: Sun Aug 09, 2015 5:01 pm
Location: Zurich
Has thanked: 54 times
Been thanked: 77 times
Contact:

Ich nehme an, dass Du das gesehen hast:

http://stackoverflow.com/questions/3460 ... -simplemde

Und selbstverständlich:

https://github.com/NextStepWebs/simplem ... own-editor

Bezüglich Updates nach Anpassungen habe ich da auf die Schnelle allerdings nichts gesehen.
Clickwork - Websites mit Bludit | Planet Bludit - Tipps und Snippets
User avatar
CrazyBread
Master Bludit
Posts: 73
Joined: Tue Jan 19, 2016 9:51 pm
Location: Germany
Has thanked: 4 times
Been thanked: 5 times
Contact:

Edi wrote:Ich nehme an, dass Du das gesehen hast:

http://stackoverflow.com/questions/3460 ... -simplemde

Und selbstverständlich:

https://github.com/NextStepWebs/simplem ... own-editor

Bezüglich Updates nach Anpassungen habe ich da auf die Schnelle allerdings nichts gesehen.
Habe ich gesehen.
Zu Link 1: Da im Plugin offensichtlich eine angepasste simplemde.min.js vorliegt, sind die Funktionen alle sehr gekürzt. Ich habe daher alles an eine Stelle im Array zusammen gezogen.

Link zwei habe ich auch gesehen. Wie schon erwähnt funktioniert die Erweiterung recht simpel bei der normalen simplemde.js, nicht aber bei der minimierten.

Testen könnte ich noch die originale zu verwenden. Dann würde ich quasi das original Plugin nach schreiben. Aber die Möglichkeit der einfachen Erweiterung ist denke ich für viele interessant.
Techi
Ssr. Bludit
Posts: 10
Joined: Thu Sep 29, 2016 9:40 am

Mal ganz dumm gefragt, nur um es zu verstehen:

Ist es für den Benutzer nicht einfacher, Zitate (oder was auch immer) mit dem WYSIWG Editor zu bearbeiten, markieren usw. als ein Plugin zu ändern?
Der Editor kann doch in seiner config den Funktionen und Aussehen angepasst werden.
Gruß,
Der Techi
User avatar
CrazyBread
Master Bludit
Posts: 73
Joined: Tue Jan 19, 2016 9:51 pm
Location: Germany
Has thanked: 4 times
Been thanked: 5 times
Contact:

Ist es für den Benutzer nicht einfacher, Zitate (oder was auch immer) mit dem WYSIWG Editor zu bearbeiten
Was für einen WYSIWYG Editor meinst du? Ziel ist es, dass der Benutzer den Beitrag komplett im Bludit-Editor verfassen kann.


Bei Zitaten mag das stimmen, da hier bei Markdown nur eine spitze Klammer an den Anfang gesetzt werden muss:

Code: Select all

Normale Zeile

> Zitat
Aber ich brauche den Fall, dass ich Wörter oder Sätze in roter Schrift haben will. Dies ist mit Markdown nicht möglich.
Und da ist es bequemer, das Wort/Satz zu markieren und auf den Knopf zu drücken.
Der Editor kann doch in seiner config den Funktionen und Aussehen angepasst werden.
Genau das habe ich ja gesucht aber leider nicht gefunden.
Techi
Ssr. Bludit
Posts: 10
Joined: Thu Sep 29, 2016 9:40 am

Stimmt ja,

Ich war beim TinyMCE, in der Überschrift steht auch SimpleMDE. :oops:
Bei dem Handbuch kann man schon was übersehen. https://www.tinymce.com/docs/
Gruß,
Der Techi
Post Reply