Javascript enveloppe le texte avec une étiquette

J'ajoute un bouton à tinyMCE et je veux savoir comment envelopper le texte à l'intérieur des tags avec javascript, par exemple (ce texte en surbrillance s'emballe à l'intérieur des balises [highlight][/highlight] ). Et maintenant le tinymce entier

 (function() { tinymce.create('tinymce.plugins.shoutButton', { init : function(ed, url) { ed.addButton('shout.button', { title : 'shout.button', image : 'viral.gif', onclick : function() { window.alert("booh"); }); }, createControl : function(n, cm) { return null; }, getInfo : function() { return { longname : "Shout button", author : 'SAFAD', authorurl : 'http://safadsoft.com/', infourl : 'http://safadsoft.com/', version : "1.0" }; } }); tinymce.PluginManager.add('shout.button', tinymce.plugins.ShoutButton); 

}) ();

  • Insertion de texte dans TinyMCE Editor où le curseur est
  • Obtenir la valeur d'une zone de texte TinyMCE
  • Comment ajouter des boutons de titre (h1, h2 ...) à tinyMCE avec un thème avancé, une mise en page simple?
  • TinyMCE4 file_picker_callback - renvoie des params supplémentaires
  • JQuery charge le fichier Javascript dynamiquement
  • TinyMCE - récupère le contenu jusqu'à la position du curseur
  • Comment modifier l'arrière-plan de TinyMCE?
  • Ember: comment valoriser le champ TinyMCE textarea pour modéliser
  • 2 Solutions collect form web for “Javascript enveloppe le texte avec une étiquette”

    Vous pouvez utiliser les méthodes setSelectionRange (mozilla / webkit) ou selection.createRange (IE) pour trouver le texte actuellement en surbrillance dans une zone de texte. J'ai posé un exemple sur jsfiddle , mais j'ai commenté votre regexp car il bloque le navigateur dans de nombreux cas. Vous devez le rendre plus restrictif, et il passe actuellement beaucoup d'autres choses que Youtube url's ainsi.

    Cependant, l'exemple a une solution de travail pour obtenir le texte actuellement sélectionné, que vous pouvez, après avoir réparé votre modèle, appliquer à idPattern.exec ().

     idPattern = /(?:(?:[^v]+)+v.)?([^&=]{11})(?=&|$)/; // var vidId = prompt("YouTube Video", "Enter the id or url for your video"); var vidId; el = document.getElementById('texty'); if (el.setSelectionRange) { var vidId = el.value.substring(el.selectionStart,el.selectionEnd); } else if(document.selection.createRange()) { var vidId = document.selection.createRange().text; } alert(vidId); 

    EDIT: Emballage du texte en surbrillance et sortie de l'élément. Exemple

     el = document.getElementById('texty'); if (el.setSelectionRange) { el.value = el.value.substring(0,el.selectionStart) + "[highlight]" + el.value.substring(el.selectionStart,el.selectionEnd) + "[/highlight]" + el.value.substring(el.selectionEnd,el.value.length); } else if(document.selection.createRange()) { document.selection.createRange().text = "[highlight]" + document.selection.createRange().text + "[/highlight]"; } 

    Le problème était les erreurs de syntaxe, les parenthèses fermées et les demi-colons manquants, en utilisant l'aide de JSHint et JSLint de Jsfiddle, je l'ai corrigé:

     (function () { tinymce.create('tinymce.plugins.shoutButton', { init: function (ed, url) { ed.addButton('shout.button', { title: 'shout.button', image: 'viral.gif', onclick: function () { window.alert("booh"); } }); createControl: function (n, cm) { return null; } getInfo: function () { return { longname: "Shout button", author: 'You !', authorurl: 'http://example.com/', infourl: 'http://example.com/', version: "1.0" }; } } }); tinymce.PluginManager.add('shout.button', tinymce.plugins.ShoutButton); })(); 

    Meilleures salutations

    JavaScript rend le site Web intelligent, beauté et facile à utiliser.