javascript - Creating a custom popup with Tinymce - Stack Overflow

admin管理员组

文章数量:1341413

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

Share Improve this question Follow asked Sep 16, 2013 at 7:21 Chamara KeragalaChamara Keragala 5,7971414 gold badges4343 silver badges6060 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

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

本文标签： javascriptCreating a custom popup with TinymceStack Overflow