Создание пользовательского всплывающего окна с TinyMCE

Question

Ниже приведен код для моего TinyMCE текстового поля

tinymce.init({ 
     selector: "textarea", 
     height : 350, 
      plugins: [ 
        "link image lists preview anchor" 
      ], 
     toolbar: " image bold italic | formatselect | undo redo | cut copy paste | bullist numlist | undo redo | link unlink dummyimg | preview", 
     menubar: false, 
     toolbar_items_size: 'small', 
     setup : function(ed) { 
     // Add a custom button 
     ed.addButton('dummyimg', { 
      title : 'Add image', 
      image : 'resources/images/img.jpg', 
      onclick : function() { 
       if($('#imageupload').val()){ 
        ed.focus(); 
        ed.selection.setContent('<img src="<%=strWebhost%>/news_cms/resources/images/dummyimg.jpg" />'); 
       } else{ 
        alert("Please select an image."); 
       } 

       } 
      }); 
     }, 
     onchange_callback: function(editor) { 
      tinyMCE.triggerSave(); 
      $("#" + editor.id).valid(); 
     } 
    }); 

Я добавил пользовательскую кнопку под названием dummyimg который добавляет предопределенное изображение в контейнер TinyMCE. Мое требование: мне нужно всплывающее окно, подобное показанному ниже, которое позволяет мне добавить только изображение title с помощью настраиваемой кнопки.

Спасибо заранее.

Answer 1

этот пример должен получить вашу работу:

tinymce.init({ 
    selector:'textarea.editor', 
    menubar : false, 
    statusbar : false, 
    toolbar: "dummyimg | bold italic underline strikethrough | formatselect | fontsizeselect | bullist numlist | outdent indent blockquote | link image | cut copy paste | undo redo | code", 
    plugins : 'advlist autolink link image lists charmap print preview code', 
    setup : function(ed) { 
     ed.addButton('dummyimg', { 
      title : 'Edit Image', 
      image : 'img/example.gif', 
      onclick : function() { 
       ed.windowManager.open({ 
        title: 'Edit image', 
        body: [ 
         {type: 'textbox', name: 'source', label: 'Source'} 
        ], 
        onsubmit: function(e) {  
         ed.focus(); 
         ed.selection.setContent('<pre class="language-' + e.data.language + ' line-numbers"><code>' + ed.selection.getContent() + '</code></pre>'); 
        } 
       }); 
      } 
     }); 
    } 
}); 

Очевидно, что вы должны были бы изменить ed.selection.setContent линию в onsubmit, чтобы удовлетворить свои собственные потребности, а также установление правильных toolbar и plugins настройки.

Answer 2

Хотя этот вопрос старый. Я отвечаю на другой вопрос (я еще не могу прокомментировать).

«как получить содержимое исходного текстового поля?»

onSubmit: function(e) { 
    console.log(e.data.source) 
}