tinymce.ui 简单文本组件答案

【问题标题】：tinymce.ui simple text componenttinymce.ui 简单文本组件
【发布时间】：2013-07-24 07:13:21
【问题描述】：

我正在使用 tinymce 尝试扩展插件以显示具有特定布局的对话框：

 editor.windowManager.open({
        title: 'Title of my dialog',
        body: [
            {type: 'label', text: 'my label'},
            { name:'my_input', type: 'textbox'},
        //  {  type: 'text', html:'some content with <b>bold</b> if posilbe!'},
            //  {  type: 'html', value:'<div>with custom formating</div>'}
        ]
    }

我多次检查tinymce.ui 的文档，但可以找到在对话框的构造函数中添加 html 或文本组件的方法（如示例中的注释行）。

我知道有一个选项可以为对话框使用现成的 html 模板。但也有很多事件和触发器，因此使用构造函数和 .ui 组件更适合我的情况。

【问题讨论】：

标签： tinymce tinymce-4

【解决方案1】：

我曾经为此使用 JQuery UI 对话框，但在 TinyMCE 4.0 之后遇到了一些问题。

我有一个 TinyMCE 插件，可以让人们在 WordPress 编辑器中获取他们帖子的纯文本版本。然后我用这个给他们看那个文本：

var plain_block = {
    type: 'container',
     html: '<textarea style="margin: 10px; width: 550px !important; height: 450px !important; background-color: #eee;" readonly="readonly">Whatever plain text I need to show goes here</textarea>'
};

ed.windowManager.open({
    title: "Plain Text of This Post",
    spacing: 10,
    padding: 10,
    items: [
     plain_block
    ],
     buttons: [
     {
           text: "Close", 
           onclick: function() { ed.windowManager.close();}
         }
    ]
});

最终结果是一个非常简单的对话框，带有一些 HTML 和一个关闭按钮

【讨论】：