tinymce.ui 简单文本组件

Question

我正在使用 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 组件更适合我的情况。

Answer 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 和一个关闭按钮