Below is the code for my Tinymce textarea

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

I have added a custom button called dummyimg which adds a predefined image into the tinymce container. My requirement is, i need a pop window like the one shown below which enables me to add only a image title using the custom button.

Thanks in advance.

Below is the code for my Tinymce textarea

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

I have added a custom button called dummyimg which adds a predefined image into the tinymce container. My requirement is, i need a pop window like the one shown below which enables me to add only a image title using the custom button.

Thanks in advance.

• javascript
• jquery
• html
• tinymce
• tinymce-4

2 Answers 2

this example should get your started:

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

Obviously you'd need to edit the ed.selection.setContent line in the onsubmit to suit your own needs, as well as setting the correct toolbar and plugins settings.

While this question is old.. I am replying to your other question ( I can't ment yet).

"how to get the content of source textbox?"

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