Erstellen Sie ein Textfeld mit Formatierungselementen - wie man den ausgewählten Text erhält

Question

Erstellen Sie ein Textfeld mit Formatierungselementen - wie man den ausgewählten Text erhält

Gefragt el 30 de Kann, 2011: Wann wurde die Frage gestellt
6607 Ansichten: Anzahl der Besuche der Frage
4 Antworten: Anzahl der Fragenantworten
Gelöst: Aktueller Status der Frage

Nur zum Spaß möchte ich einfache Textformatierungstools für ein Textfeld erstellen. Um zu beginnen, möchte ich in der Lage sein, hervorgehobenen Text in einem Textfeld mit ** einzuschließen, wenn er im Fettdruck formatiert werden soll (genau wie der Texteditor von Stackoverflow). Ich habe den folgenden Code geschrieben, der die meiste Zeit funktioniert, aber ein Fehler hat, den ich gleich erklären werde.

var tmpText = '';
$(document).ready(function(){
        tmpText = '';
        $('#btn_bold').click(function(){bold(tmpText);});
        $('textarea').bind('mouseup', function(){
                  tmpText = '';
                  if(window.getSelection){
                    tmpText = window.getSelection().toString();
                  }else if(document.getSelection){
                    tmpText = document.getSelection().toString();
                  }else if(document.selection){
                    tmpText = document.selection.createRange().text;
                  }
        });
});

function bold(str)
{
        $('textarea').val($('textarea').val().replace(str,'**'+str+'**'));
}

fett
AA

Wenn Sie den ersten Buchstaben A markieren und fett machen, erhalten Sie das Ergebnis **A**A. Aber wenn Sie den zweiten Buchstaben A markieren und fett machen, erhalten Sie immer noch **A**A, anstatt A**A**, da die Zeile des Codes $('textarea').val($('textarea').val().replace(str,'**'+str+'**')); nicht ausreicht, um zu identifizieren, welchen Buchstaben A Sie fett haben möchten.

Was ist ein effizienter Weg, um markierten Text zu identifizieren und fett zu machen?

Gefragt el 30 de Kann, 2011 von John

Answer 1

4 Antworten

Answer 2

2voto

Tim Down Punkte 304837

Ich habe ein jQuery-Plug-in geschrieben, das dies tut, das ich als eigenständiges Skript extrahieren kann, wenn es hilfreich wäre. Ein Beispiel zur Verwendung des Plugins, um den ausgewählten Text durch das Wort "Hallo" zu ersetzen.

$(document).ready(function() {

        $('textarea').bind('mouseup',function() { $(this).replaceSelectedText('hello');});
});

AAA

Außerdem funktioniert die Funktion, die Sie dort haben, wie ich in einer verwandten Frage von Ihnen kommentiert habe, nicht für Textareas, die einen separaten Mechanismus für den Umgang mit Auswahl haben. Sehen Sie meine Antwort dort für eine Funktion, die funktionieren wird.

Beantwortet el 30 de Kann, 2011 von Tim Down (304837 Punkte )

Answer 3

0voto

Hogan Punkte 65759

Das Selection-Objekt gibt den String zurück, wenn Sie tostring() darauf aufrufen. Sie können auch das Range-Objekt erhalten, das mehr Informationen über die Start- und Endpunkte enthält.

https://developer.mozilla.org/en/DOM/Selection

und

http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html

Beantwortet el 30 de Kann, 2011 von Hogan (65759 Punkte )

Answer 4

0voto

Niklas Punkte 29492

Wie hier gezeigt, könnten Sie es so machen:

el = document.getElementById('texty');
  if (el.setSelectionRange) {

     el.value = el.value.substring(0,el.selectionStart) + "**" + el.value.substring(el.selectionStart,el.selectionEnd) + "**" + el.value.substring(el.selectionEnd,el.value.length);

  }
  else if(document.selection.createRange()) {
      document.selection.createRange().text = "**" + document.selection.createRange().text + "**"; 
  }

Beachten Sie jedoch, dass diese Methode auf Textareas beschränkt ist.

Beantwortet el 30 de Kann, 2011 von Niklas (29492 Punkte )

Answer 5

0voto

Mr. Developer Punkte 1

    function formatText(el,tagstart,tagend) {
      if (el.setSelectionRange) {
        el.value = el.value.substring(0,el.selectionStart) + tagstart +
        el.value.substring(el.selectionStart,el.selectionEnd) + tagend +
        el.value.substring(el.selectionEnd,el.value.length)
      } else {
        // IE code 
        var selectedText = document.selection.createRange().text;
        var tag="b"
        if (selectedText != "") {
          var newText = "<" + tag + ">" + selectedText + "</" + tag + ">";
          document.selection.createRange().text = newText;
        }
      }
    }
</head>
<body>
  <p> <textarea rows="30" cols="59" name="Schreibe-meine-Lebensmomente" 
       id="schreibe-meine-Lebensmomente"></textarea> </p>

  <input type="button" value="FETT"  
     onclick="formatText(document.getElementById('schreibe-meine-Lebensmomente'), 
     '<b>','</b>')" />
</body>
</code></pre>

<p>This Code Works For FF, IE(6)> , Opera 9>, Safari. I Tested It On these Browsers. not on Old ones. So please Check this on old browsers. i dont get time to check it on old browsers (It Does not show my text area opening tag y? i don't know, so please dd yourself. <strong>write-my-life-moments</strong>. it is name of text area) `</p></x-turndown>

Beantwortet el 14 de Juni, 2012 von Mr. Developer (1 Punkte )

Erstellen Sie ein Textfeld mit Formatierungselementen - wie man den ausgewählten Text erhält

Antworten

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by:

Erstellen Sie ein Textfeld mit Formatierungselementen - wie man den ausgewählten Text erhält

Antworten

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by: