Javascript 使用Tinymce创建自定义弹出窗口

下面是我的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();
        }
   });

tinymce.init({
选择器：“文本区域”，
身高：350，
插件：[
“链接图像列表预览定位”
],
工具栏：“图像粗体斜体|格式选择|撤消重做|剪切复制粘贴|粗体数字列表|撤消重做|链接取消链接Dummimg |预览”，
梅努巴：错，
工具栏项目大小：“小”，
设置：功能（ed）{
//添加自定义按钮
ed.addButton（'dummyimg'{
标题：“添加图像”，
图片：'resources/images/img.jpg'，
onclick:function（）{
if（$（'#imageupload'）.val（））{
ed.focus（）；
ed.selection.setContent（'/news\u cms/resources/images/dummyimg.jpg/>）；
}否则{
警告（“请选择图像”）；
}
}
});
},
onchange\u回调：函数（编辑器）{
tinyMCE.triggerSave（）；
$（“#”+editor.id）.valid（）；
}
});

我添加了一个名为

dummyimg

的自定义按钮，它将预定义的图像添加到tinymce容器中。我的要求是，我需要一个如下所示的弹出窗口，它允许我使用自定义按钮仅添加图像

标题

---

提前感谢。

这个例子应该让您开始：

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

'); } }); } }); } });

---

显然，您需要编辑

on submit

中的

ed.selection.setContent

行以满足您自己的需要，还需要设置正确的

工具栏

和

插件

设置

“如何获取源文本框的内容？”

---

你能解释一下提交的内容吗？还有，如何获取

source

textbox的内容？Thanks@Abdillah就像：e.data.source->>e.data.[name]文档不是很有用，所以我继续写了一篇文章，列出了不同的小部件和容器布局：

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