Ergebnis 1 bis 2 von 2

Thema: Markdown Editor: Linebreak parsen funktioniert nicht

  1. #1
    Großmeister(in) Avatar von MyXoToD
    Registriert seit
    07.11.2007
    Ort
    Mainz
    Alter
    24
    Beiträge
    507
    Danke
    0
    Bekam 1 mal "Danke" in 1 Posting

    Frage Markdown Editor: Linebreak parsen funktioniert nicht

    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:

    Code:
    function formatText() {  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; }
    Was passiert wenn man return drückt? In dem Div wird an der aktuellen Curserposition folgendes hinzugefügt:

    Code:
    <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
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Don't follow me, I run into walls.

  2. #2
    HTML Newbie
    Registriert seit
    21.05.2014
    Beiträge
    2
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Markdown Editor: Linebreak parsen funktioniert nicht

    Hier hab ich mal sowas gebastelt..... look - viel Spas

Ähnliche Themen

  1. Seite funktioniert und funktioniert nicht
    Von parcifal83 im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 24.05.2010, 15:24
  2. Forum Editor geht nicht mehr im Firefox
    Von Darkxor im Forum Forum-Hilfe.de intern
    Antworten: 3
    Letzter Beitrag: 24.01.2010, 17:10
  3. iframe geht nicht im html editor
    Von rammstein im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 07.12.2009, 21:53
  4. External Editor funktioniert nur teilweise
    Von im Forum Zope & Plone - das deutsche Hilfeforum
    Antworten: 4
    Letzter Beitrag: 23.08.2007, 14:36

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •