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

【问题标题】：Creating a custom popup with Tinymce使用 Tinymce 创建自定义弹出窗口
【发布时间】：2013-09-16 07:21:42
【问题描述】：

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

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

提前致谢。

【问题讨论】：

标签： javascript jquery html tinymce tinymce-4

【解决方案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>');
                    }
                });
            }
        });
    }
});

显然您需要编辑onsubmit 中的ed.selection.setContent 行以满足您自己的需要，并设置正确的toolbar 和plugins 设置。

【讨论】：

你能解释一下什么是 onsubmit 吗？另外，如何获取source 文本框的内容？谢谢
@Abdillah 就像：e.data.source ->> e.data.[name]
文档不是很有帮助，所以我继续写了一篇文章，列出了可用的不同小部件和容器布局：makina-corpus.com/blog/metier/2016/…

【解决方案2】：

虽然这个问题很老了.. 我正在回复你的另一个问题（我还不能评论）。

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

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

【讨论】：