SimpleMDE um eigene Funktion erweitern
- 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
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
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
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
Der Techi
- 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:
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):
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.
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(...)
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.
- 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.
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
- CrazyBread
- Master Bludit
- Posts: 73
- Joined: Tue Jan 19, 2016 9:51 pm
- Location: Germany
- Has thanked: 4 times
- Been thanked: 5 times
- Contact:
Habe ich gesehen.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.
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.
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.
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
Der Techi
- CrazyBread
- Master Bludit
- Posts: 73
- Joined: Tue Jan 19, 2016 9:51 pm
- Location: Germany
- Has thanked: 4 times
- Been thanked: 5 times
- Contact:
Was für einen WYSIWYG Editor meinst du? Ziel ist es, dass der Benutzer den Beitrag komplett im Bludit-Editor verfassen kann.Ist es für den Benutzer nicht einfacher, Zitate (oder was auch immer) mit dem WYSIWG Editor zu bearbeiten
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
Und da ist es bequemer, das Wort/Satz zu markieren und auf den Knopf zu drücken.
Genau das habe ich ja gesucht aber leider nicht gefunden.Der Editor kann doch in seiner config den Funktionen und Aussehen angepasst werden.
Stimmt ja,
Ich war beim TinyMCE, in der Überschrift steht auch SimpleMDE.
Bei dem Handbuch kann man schon was übersehen. https://www.tinymce.com/docs/
Ich war beim TinyMCE, in der Überschrift steht auch SimpleMDE.
Bei dem Handbuch kann man schon was übersehen. https://www.tinymce.com/docs/
Gruß,
Der Techi
Der Techi