Javascript обернуть текст с тегом

Question

Я добавляю кнопку в tinyMCE и хочу знать, как обернуть текст внутри тегов, например, с помощью javascript (этот выделенный текст обернут внутри тегов [highlight][/highlight]). а теперь вся тинимче

(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);

}) ();

Answer 1

Вы можете использовать методы setSelectionRange (mozilla / webkit) или selection.createRange (IE), чтобы найти выделенный в данный момент текст внутри текстовой области.Я поместил пример на jsfiddle , но прокомментировал ваше регулярное выражение, так как во многих случаях он зависает в браузере.Вы должны сделать это более ограничительным, и в настоящее время он пропускает много других вещей, кроме URL-адреса YouTube.

Однако в примере есть рабочее решение, как получить выбранный в данный момент текст, который вы можете, после исправления шаблона, применить к 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);

РЕДАКТИРОВАТЬ: Обтекание выделенного текста и вывод его обратно в элемент. пример

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]"; 
  }

Answer 2

Проблема заключалась в синтаксических ошибках, неправильных закрытых скобках и некоторых пропущенных точках с запятой, при помощи исправлений Jsfiddle JSHint и JSLint. Я исправил:

(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);
})();

С наилучшими пожеланиями