Counter test task

gistfile1.js

// Задание: написать плагин для tinymce, которые позволяет визуально редактировать шорткоды счетчиков
// Шорткод счетчика выглядит так [counter color="red"]123[/counter] где red - цвет счетчика, а 123 - его значение

// Счетчики могут быть вложенными, например [counter]123[counter]234[/counter][/counter]

// Визуально при редактировании счетчик должен выглядеть как 
// <div style="border:2px solid black;background:{{ counterColor }}">{{ counterValue }}</div>

// Для вашего удобства мы уже написали основу плагина ниже
// Ссылку на решение можете давать на вашем хостинге или на fiddle.tinymce.com

(function() {  
    var $ = jQuery;
    
    tinymce.create('tinymce.plugins.counter', {  
        init : function(ed, url) {  
  		
            // заменить шорткод на HTML
			ed.onBeforeSetContent.add(function(ed, o) {
                
                var oldContent = o.content; 
                
                // ...
                // ваш код
                // ....
                
                o.content = newContent;
			});
            
			// заменить DOM на шорткод при сохранении
			ed.onPreProcess.add(function(ed, o) {
                
                var node = o.node; // DOMNode
                
                // ...
                // ваш код
                // ....
			});            
        },  
        createControl : function(n, cm) {  
            return null;  
        }
    });  

    tinymce.PluginManager.add('counter', tinymce.plugins.counter);  
})();