Heyho liebe Community,
seit ein paar Tagen bin ich dabei einen Online-Editor zu erstellen. Vielleicht kennt einer von euch editorially.com dort wird ein Editor verwendet, der genauso funktioniert. Relativ simple:
Der User tippt zB: Lorem Ipsum **dolor* sit amet
Nun bekommt er in Echtzeit genau dasselbe angezeigt, einziger Unterschied: Die Markdown Tags sind hellgrau und das Wort wird tatsächlich fett dargestellt.
Um ein besseres Bild davon zu bekommen, könnt ihr euch meinen aktuellen Stand hier anschauen: http://md-editor.herokuapp.com/
Bold, Italic, h1, h2, usw funktioniert bereits wie ich es gerne hätte. Das einzige Problem was ich habe: Linebreaks und Absätze funktionieren nicht. Für den Editor verwende ich ein ganz normales DIV mit contenteditable=true. Das Markdown wird mittels dieser Funktion geparsed:
[COLOR=#000000]function formatText() {[/COLOR] var el = document.getElementById('editor');
console.log(el.innerHTML);
var savedSel = saveSelection(el);
el.innerHTML = el.innerHTML.replace(/(<([^>]+)>)/gi, ""); // Remove HTML tags
el.innerHTML = el.innerHTML.replace(/^# (.*)$/gi, create_tag_html("# ", "", "<h1>$1</h1>")); // H1
el.innerHTML = el.innerHTML.replace(/^## (.*)$/gi, create_tag_html("## ", "", "<h2>$1</h2>")); // H2
el.innerHTML = el.innerHTML.replace(/^### (.*)$/gi, create_tag_html("### ", "", "<h3>$1</h3>")); // H3
el.innerHTML = el.innerHTML.replace(/\*\*(.*?)\*\*/gi, create_tag_html("**", "**", "<strong>$1</strong>")); // Bold
el.innerHTML = el.innerHTML.replace(/\*(.*?)\*/gi, create_tag_html("*", "*", "<em>$1</em>")); // Italic
el.innerHTML = el.innerHTML.replace(/\~\~(.*?)\~\~/gi, create_tag_html("~~", "~~", "<s>$1</s>")); // Strike
el.innerHTML = el.innerHTML.replace(/\r\n\r\n([a-z])/gi, create_tag_html("", "", "\r\n\r\n<p>\r\n$1")); // Paragraph Open
el.innerHTML = el.innerHTML.replace(/([^>])\r\n\r\n/gi, create_tag_html("", "", "$1\r\n</p>\r\n")); // Paragraph Close
el.innerHTML = el.innerHTML.replace(/\[(.*)\]\((.*) "(.*)"\)/gi, create_tag_html("", "", "<a href='$2' title='$3'>[$1]($2 \"$3\")</a>")); // Link
el.innerHTML = el.innerHTML.replace(/\r\n\r\n>/gi, create_tag_html("", "", "\r\n\r\n<quote>\r\n>")); // Quote
el.innerHTML = el.innerHTML.replace(/(> .*)\r\n\r\n/gi, create_tag_html("", "", "$1\r\n</quote>\r\n\r\n")); // Quote
el.innerHTML = el.innerHTML.replace(/> (.*)$/gi, create_tag_html("", "", "$1")); // Quote
// Restore the original selection
restoreSelection(el, savedSel);
}
function create_tag_html(before, after, content) {
var tag = "<div class='tag'>";
tag += "<span class='before'>" + before + "</span>";
tag += content
tag += "<span class='after'>" + after + "</span>";
return tag; [COLOR=#000000]}[/COLOR]Was passiert wenn man return drückt? In dem Div wird an der aktuellen Curserposition folgendes hinzugefügt:
<div><br></div>Danach springt der Curser an Position 0 in dem Editor Element (DIV). Um die Curser Position zwischenzuspeichern und wieder auszugeben habe ich ein Framework names "Rangy" eingefüt, welches bei allen anderen Markdown Tags sehr gut funktioniert. Das komische: Selbst wenn ich alle replace Funktionen aus der format Funktion entferne, wird dieses div mit einem break hinzugefügt. Allerdings wird dies im eigentlich Div nicht angezeigt. Ich bin langsam ratlos und weiß nicht wie ich das Problem beheben soll.
Hat sich schonmal jemand mit diesem Thema auseinandergesetzt? Ich würde mich sehr über Hilfe freuen.
Cheers,
Max
