JQuery textarea insert bit HTML comme un RTE mais pas un RTE

Question

OK va - Je pense qu'un <textarea></textarea> est ce qu'il faut utiliser s'il vous plaît me dire le contraire. Je veux créer une série de "boutons" comme un RTE qui insère le code approprié dans une zone de texte. Mais notez que ce n'est pas un "réel RTE". Ce que je voudrais, c'est un textarea avec un "menu" comme un RTE mais avec seulement 2 ou 3 boutons. Je soupçonne que le code pour les boutons sera le même. Umm ... où vais-je ... OK essayez ceci ... sur ce RTE (StackOverflow) il y a un bouton "image". Je voudrais savoir comment créer la même chose (comme je l'ai dit tous les boutons que je soupçonne seront fondamentalement les mêmes). Le "modal" permettrait soit une image src/upload ou une zone de texte pour coller disons un lien YouTube ou un lien Flickr etc. (ils seront des boutons séparés) Je peux créer les boutons etc. et avoir des modals ouverts/fermés etc. comment pouvez-vous obtenir le code dans le <textarea></textarea>

Pointers & suggestions s'il vous plaît. - Oh, je n'ai pas besoin d'un RTE complet, donc un "cut down CKeditor" etc. est une surcharge totale. Le seul HTML à être "uploadé/utilisé" dans le texarea est un <a href=""> .

Answer 1

Si vous souhaitez insérer un morceau de texte dans la position actuelle du curseur dans un élément de zone de texte. Cela vous aidera.

Note: Comme vous le savez tous les fichiers HTML dans la zone de texte ne sera jamais rendu .. Pour ce faire, vous devez utiliser une solution plus complexe, comme les moteurs de RTE ...

Essayez ceci:

function insertAtCursor(myField, myValue) { 
    //IE support 
    if (document.selection) { 
     myField.focus(); 
    sel = document.selection.createRange(); 
    sel.text = myValue; 
    } 
    //MOZILLA/NETSCAPE support 
    else if (myField.selectionStart || myField.selectionStart == ‘0′) { 
     var startPos = myField.selectionStart; 
     var endPos = myField.selectionEnd; 
     myField.value = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length); 
     } else { 
      myField.value += myValue; 
     } 
    } 

// calling the function: 
insertAtCursor(document.formName.fieldName, 'this');