TinyMCE 富文本编辑器 ━━ 自定义插件之弹窗控件布局
一键排版插件已经开发完毕，起初所有的控件全都显示在一列，没有分类，看着实在别扭，功能多了就像iphone一样越来越长~~~~现在总算是结束了，整理总结一下。
- 弹窗最普通的布局
editor.windowManager.open({
title: "Typeset",
body:[{
type: 'checkbox',
name: 'clean_a',
label: '去掉超链接'
},{
type: 'listbox',
name: 'set_p_font_family',
values:[
{"text":"系统默认","value":""},
{"text":"宋体","value":"宋体"},
{"text":"楷体","value":"楷体"},
{"text":"仿宋","value":"仿宋"},
{"text":"隶书","value":"隶书"},
{"text":"黑体","value":"黑体"},
{"text":"微软雅黑","value":"微软雅黑"}
],
label: '每段字体'
},{
type: 'checkbox',
name: 'clean_all_attr',
label: '去掉所有属性'
}],
onSubmit:function(e){run(e);}
});
- 分类的方式布局
editor.windowManager.open({
title: "Typeset",
body: [{
type: "container",
label: "清除",
layout: "grid",
spacing: 5,
columns:3,
items: [{
type: 'checkbox',
name: 'clean_html_space',
text: 'html空格',
checked:true
},{
type: 'checkbox',
name: 'clean_blank_char',
text: '除空格外空白字符',
checked:true
},{
type: 'checkbox',
name: 'clean_blank_line',
text: '空行',
checked:true
},{
type: 'checkbox',
name: 'clean_all_attr',
text: '所有属性'
},{
type: 'checkbox',
name: 'clean_id',
text: 'id属性',
checked:true
},{
type: 'checkbox',
name: 'clean_class',
text: 'class属性',
checked:true
},{
type: 'checkbox',
name: 'clean_style',
text: '样式属性',
checked:true
},{
type: 'checkbox',
name: 'clean_event',
text: '事件属性',
checked:true
},{
type: 'label',
text: ''
},{
type: 'checkbox',
name: 'clean_all_element',
text: '所有元素'
},{
type: 'checkbox',
name: 'clean_span',
text: 'span元素',
checked:true
}]
},{
type: "container",
label : "文字",
layout: "grid",
spacing: 5,
columns:3,
items: [{
type: 'listbox',
name: 'set_p_font_family',
values:[
{"text":"系统默认","value":""},
{"text":"宋体","value":"宋体"},
{"text":"楷体","value":"楷体"},
{"text":"仿宋","value":"仿宋"},
{"text":"隶书","value":"隶书"},
{"text":"黑体","value":"黑体"},
{"text":"微软雅黑","value":"微软雅黑"}
],
text: ' 段落字体 '
},{
type: 'listbox',
name: 'set_p_font_size',
values:[
{"text":"系统默认","value":""},
{"text":"10px","value":"10px"},
{"text":"12px","value":"12px"},
{"text":"13px","value":"13px"},
{"text":"14px","value":"14px"},
{"text":"16px","value":"16px"},
{"text":"18px","value":"18px"},
{"text":"20px","value":"20px"},
{"text":"22px","value":"22px"},
{"text":"24px","value":"24px"},
{"text":"26px","value":"26px"},
{"text":"28px","value":"28px"},
{"text":"30px","value":"30px"},
{"text":"32px","value":"32px"}
],
text: ' 段落字号 '
},{
type: 'listbox',
name: 'set_p_line_height',
values:[
{"text":"系统默认","value":""},
{"text":"1em","value":"1em"},
{"text":"1.2em","value":"1.2em"},
{"text":"1.5em","value":"1.5em"},
{"text":"1.8em","value":"1.8em"},
{"text":"2em","value":"2em"},
{"text":"2.4em","value":"2.4em"}
],
text: ' 行间距 '
}]
},{
type: "container",
label : "修改",
layout: "grid",
spacing: 5,
columns:2,
items: [{
type: 'checkbox',
name: 'set_p_text_indent',
text: '段落开头空两格',
checked:true
},{
type: 'checkbox',
name: 'clean_a',
text: '转换超链接'
}]
}],
"onSubmit":function(e){run(e);}
});
其实就是在body里做些文章。
- 如果在body数组中只写入最终的控件配置，则为无分类显示；
- 如果body数组的每个元素写入type、layout、label和items，并将控件配置写入items数组，则每个body数组元素就是一个分类，其中layout决定分类中的控件以什么形式排列，label是分类名称。如果这种形式下的body数组只有一个元素，且不写label，则默认显示效果相当于第一种布局。
转载一篇非常重要的文章：How to create a custom dialog in TinyMCE 4 ，配置参数都在其中了，主要内容如下：
A basic dialog
We can create a dialog very simply:
editor.windowManager.open({
title: 'Test Container',
body: {type: 'textbox', name: 'my_textbox', label : 'My textbox'},
onsubmit: function(e) {alert(e.data.my_textbox)}
});
You can see it in action there.
We now have a textbox, but I saw a lot of other widgets in TinyMCE! What can I really do?
More customization
Well, a lot. First, you can set quite a few parameters. I know, let’s take a look at the doc! That’s not really helpful now, is it? If we look at the source for this widget, we can see what parameters it accepts. Yes, we can have a textarea.
But there’s more! It inherits from Widget, which itself inherits from Control. To sum it up, we have these settings available on all widgets:
{String} style Style CSS properties to add.
{String} border Border box values example: 1 1 1 1
{String} padding Padding box values example: 1 1 1 1
{String} margin Margin box values example: 1 1 1 1
{Number} minWidth Minimal width for the control.
{Number} minHeight Minimal height for the control.
{String} classes Space separated list of classes to add.
{String} role WAI-ARIA role to use for control.
{Boolean} hidden Is the control hidden by default.
{Boolean} disabled Is the control disabled by default.
{String} name Name of the control instance.
{String} tooltip Tooltip text to display when hovering.
{Boolean} autofocus True if the control should be focused when rendered.
{String} text Text to display inside widget.
All the widgets
Looking through the plugins and the source, we can see all the possibilities:
button
buttongroup - use items parameters to set the different buttons.
checkbox
colorbox - A bit more complicated, look at the demo to see how to use it
colorpicker
combobox
label
listbox
panelbutton - A bit more complicated, look at the demo to see how to use it
radio - It is actually a checkbox
selectbox
textbox
But we can’t really put them however we like. Or can we?
Containers
A container is a particular widget which consists of a list of other widgets and a layout. A simple example:
editor.windowManager.open({
title: 'Container',
body: [{
type: 'container',
label : 'flow',
layout: 'flow',
items: [
{type: 'label', text: 'A container'},
{type: 'textbox', label: 'textbox', value: 'with a textbox'},
{type: 'label', text: 'and two labels'}
]
}]
});
See it in action there. The layouts available are:
absolute
fit
flex
flow
grid
stack
这是tinymce4插件弹窗container的配置详单，如果需学习其它内容，请通过这个链接去了解，其它原有链接已经失效。
tinymce.ui.Container
现在tinymce4的说明文档有很多缺失，慢慢摸索吧。