/* * 插件 jquery.lmrxeditor.js * 依赖 Boostrap v3; jquery 1.7+ * 作者 lmr * 版本 0.1 * 日期 2015/04/29 */ ;(function($) { $.fn.lmrxeditor = function(opt) { //默认属性 var setting = $.extend({ //'editable': 'lmrx_editable', 'cn' : {'Edit':'编辑','Load':'载入','Move':'移动','Delete':'删除','Addcom':'组件','Copy':'复制','Style':'样式','Blank':'编辑','Nofollow':'链接','Table':'表格','Imgae':'图片'}, 'debug' : false, }, opt); //标签编辑:标签的编辑都交给这个对象处理。 var editor = { 'com': function(o) { var com_panel = help.make_panel('com', o); //初始化组件控制器。 var first_com_input = $('.lmrx_addcom_input:first-child'); $.each(com, function(index, value) { var temp_c = first_com_input.clone(); temp_c.attr({ 'name': index, 'data-on': value.name, 'data-off': value.name }); first_com_input.before(temp_c); }); first_com_input.remove(); $('.lmrx_addcom_input').bootstrapToggle(); com_panel.find('.lmrx_ok').on('click', function() { if ($('.lmrx_addcom_input:checked').length) { //调取组件并after。 var com_name = $('.lmrx_addcom_input:checked').attr('name'); var new_obj = com[com_name].obj.clone(); o.after(new_obj); //重新绑定组件编辑区域。 (editor[com_name])(new_obj); //移除编辑框。 $('.lmrx_popover').remove(); help.save_history('Addcom'); } }); }, 'p': function(o) { //不再需要放置编辑标识 o.addClass(setting.editable); o.on('click', function() { help.highlight(o); var clone = help.make_panel('p', $(this)); //提取出
的值 var p_txt = help.remove_blank($(this).html()); clone.find('.popover-content textarea').val(p_txt); //检查内容中是否有HTML标签 if ($(this).find('a,strong,img,span').length) { clone.find('.text-danger.none').show(); } //提交,把编辑结果写回
clone.find('.lmrx_ok').on('click', function() {
var text = clone.find('.popover-content textarea').val();
if (text) {
o.html(text);
help.re_bind(o);
//移除编辑框&写历史记录。
$('.lmrx_popover').remove();
help.save_history('Edit');
} else {
alert('文本段落不能为空!');
}
});
//追加
clone.find('.lmrx_after').on('click', function() {
var o_clone = o.clone();
editor.p(o_clone);
o.after(o_clone);
help.re_bind(o);
help.save_history('Copy');
});
//上移
clone.find('.lmrx_up').on('click', function() {
help.swap_dom(o, o.prev());
help.save_history('Move');
});
//下移
clone.find('.lmrx_down').on('click', function() {
help.swap_dom(o, o.next());
help.save_history('Move');
});
//删除
clone.find('.lmrx_del').on('click', function() {
var y = prompt('请输入 “yes” 确认删除。', 'no');
if (y == 'yes') {
o.hide('slow', function(){o.remove();});
//移除编辑框。
$('.lmrx_popover').remove();
help.save_history('Delete');
}
});
//添加组件
clone.find('.lmrx_addcom').on('click', function() {
editor.com(o);
});
//增加
clone.find('.lmrx_addtag_a').on('click', function() {
var s_txt = '';
var s_obj = $('#p_textarea').get(0);
if (s_obj.selectionStart != undefined && s_obj.selectionEnd != undefined) {
s_txt = s_obj.value.substring(s_obj.selectionStart, s_obj.selectionEnd);
if (s_txt) {
var s_txt_a = ''+s_txt+'';
var replace_txt = $('#p_textarea').val();
replace_txt = replace_txt.replace(s_txt, s_txt_a);
$('#p_textarea').val(replace_txt);
var msg = $(' 超链接已添加');
$(this).after(msg);
s_obj.selectionStart = s_obj.selectionStart;
s_obj.selectionEnd = s_obj.selectionStart + s_txt_a.length;
s_txt = '';
}
}
help.save_history('Edit');
});
//阻止事件冒泡。
event.stopPropagation();
return false;
});
},
'span': function(o) {
//不再需要放置编辑标识 o.addClass(setting.editable);
o.on('click', function() {
help.highlight(o);
var clone = help.make_panel('span', $(this));
//提取出的值
var span_txt = help.remove_blank($(this).html());
clone.find('.popover-content textarea').val(span_txt);
//检查内容中是否有HTML标签
if ($(this).find('a,strong,img').length) {
clone.find('.text-danger.none').show();
}
//提交,把编辑结果写回
clone.find('.lmrx_ok').on('click', function() {
var text = clone.find('.popover-content textarea').val();
if (text) {
o.html(text);
help.re_bind(o);
//移除编辑框&写历史记录。
$('.lmrx_popover').remove();
help.save_history('Edit');
} else {
alert('文本不能为空!');
}
});
//追加
clone.find('.lmrx_after').on('click', function() {
var o_clone = o.clone();
editor.p(o_clone);
o.after(o_clone);
help.re_bind(o);
help.save_history('Copy');
});
//上移
clone.find('.lmrx_up').on('click', function() {
help.swap_dom(o, o.prev());
help.save_history('Move');
});
//下移
clone.find('.lmrx_down').on('click', function() {
help.swap_dom(o, o.next());
help.save_history('Move');
});
//删除
clone.find('.lmrx_del').on('click', function() {
var y = prompt('请输入 “yes” 确认删除。', 'no');
if (y == 'yes') {
o.hide('slow', function(){o.remove();});
//移除编辑框。
$('.lmrx_popover').remove();
help.save_history('Delete');
}
});
//阻止事件冒泡。
event.stopPropagation();
return false;
});
},
'a': function(o) {
//不再需要放置编辑标识 o.addClass(setting.editable);
o.on('click', function() {
help.highlight(o);
var clone = help.make_panel('a', $(this));
//提取出的值
var a_text_txt = help.remove_blank($(this).html());
clone.find('.popover-content .a_href').val($(this).attr('href'));
clone.find('.popover-content .a_text').val(a_text_txt);
//检查内容中是否有HTML标签
if ($(this).find('strong,img,span').length) {
clone.find('.text-danger.none').show();
}
//提交,把编辑结果写回
clone.find('.lmrx_ok').on('click', function() {
var a_href = clone.find('.popover-content .a_href').val();
var a_text = clone.find('.popover-content .a_text').val();
if (a_href && a_text) {
o.attr('href', a_href).html(a_text);
//移除编辑框&写历史记录。
$('.lmrx_popover').remove();
help.save_history('Edit');
} else {
alert('请填写超链接!');
}
});
//删除
clone.find('.lmrx_del').on('click', function() {
var y = prompt('请输入 “yes” 确认删除。', 'no');
if (y == 'yes') {
o.slideDown('slow', function(){o.contents().unwrap();});
//移除编辑框。
$('.lmrx_popover').remove();
help.save_history('Delete');
}
});
//新窗口打开
o.attr('target') ? clone.find('.lmrx_a_blank').addClass('active') : '';
clone.find('.lmrx_a_blank').on('click', function() {
if (o.attr('target')) {
o.removeAttr('target');
$(this).removeClass('active');
} else {
o.attr('target', '_blank');
$(this).addClass('active');
}
help.save_history('Blank');
});
//nofollow
o.attr('rel')=='nofollow' ? clone.find('.lmrx_a_nofollow').addClass('active') : '';
clone.find('.lmrx_a_nofollow').on('click', function() {
if (o.attr('rel')=='nofollow') {
o.removeAttr('rel');
$(this).removeClass('active');
} else {
o.attr('rel', 'nofollow');
$(this).addClass('active');
}
help.save_history('Nofollow');
});
//样式
clone.find('.lmrx_style').on('click', function() {
$('.lmrx_style').each(function(index, el) {
o.removeClass(el.id);
});
o.addClass(this.id);
help.save_history('Style');
});
//阻止事件冒泡。
event.stopPropagation();
return false;
});
},
'img': function(o) {
//不再需要放置编辑标识 o.addClass(setting.editable);
o.on('click', function() {
help.highlight(o);
var clone = help.make_panel('img', $(this));
//提取出 图片文字 图片文字
clone.find('.lmrx_ok').on('click', function() {
var text = clone.find('.popover-content textarea').val();
if (text) {
o.html(text);
help.re_bind(o);
//移除编辑框&写历史记录。
$('.lmrx_popover').remove();
help.save_history('Edit');
} else {
alert('标题不能为空!');
}
});
//追加
clone.find('.lmrx_after').on('click', function() {
var o_clone = o.clone();
editor.hx(o_clone);
o.after(o_clone);
help.save_history('Copy');
});
//删除
clone.find('.lmrx_del').on('click', function() {
var y = prompt('请输入 “yes” 确认删除。', 'no');
if (y == 'yes') {
o.hide('slow', function(){o.remove();});
//移除编辑框。
$('.lmrx_popover').remove();
help.save_history('Delete');
}
});
//上移
clone.find('.lmrx_up').on('click', function() {
help.swap_dom(o, o.prev());
help.save_history('Move');
});
//下移
clone.find('.lmrx_down').on('click', function() {
help.swap_dom(o, o.next());
help.save_history('Move');
});
//添加组件
clone.find('.lmrx_addcom').on('click', function() {
editor.com(o);
});
//阻止事件冒泡。
event.stopPropagation();
return false;
});
},
'ul': function(o) {
//不再需要放置编辑标识 o.addClass(setting.editable);
o.on('click', function() {
help.highlight(o);
var clone = help.make_panel('ul', $(this));
//初始化
o.find('li').each(function(index, el) {
var li_last = clone.find('.lmrx_li_item:last');
var li_clone = li_last.clone();
li_last.after(li_clone);
li_clone.find('input').val(help.remove_blank($(el).html()));
});
clone.find('.lmrx_li_item:first').remove();
//删除
clone.find('.lmrx_del').on('click', function() {
var y = prompt('请输入 “yes” 确认删除。', 'no');
if (y == 'yes') {
o.hide('slow', function(){o.remove();});
//移除编辑框。
$('.lmrx_popover').remove();
help.save_history('Delete');
}
});
//提交,把编辑结果写回
clone.find('.lmrx_ok').on('click', function() {
o.find('li').each(function(index, el) {
$(el).html($('.lmrx_li_item_input').eq($(el).index()).val());
});
help.save_history('Edit');
$('.lmrx_popover').remove();
});
//追加
clone.find('.lmrx_after').on('click', function() {
var o_clone = o.clone();
editor.ul(o_clone);
o.after(o_clone);
help.save_history('Copy');
});
//上移
clone.find('.lmrx_up').on('click', function() {
help.swap_dom(o, o.prev());
help.save_history('Move');
});
//下移
clone.find('.lmrx_down').on('click', function() {
help.swap_dom(o, o.next());
help.save_history('Move');
});
//复制li item
clone.find('.lmrx_li_after').on('click', function() {
var parent_item = $(this).parents('.lmrx_li_item');
parent_item.find('.input-group-btn.dropup.open').removeClass('open');
parent_item.after(parent_item.clone(true));
//给操作的UL也添加一个li
var for_li = o.find('li').eq(parent_item.index('.lmrx_li_item'));
for_li.after(for_li.clone());
help.save_history('Copy');
});
//删除li item
clone.find('.lmrx_li_del').on('click', function() {
var parent_item = $(this).parents('.lmrx_li_item')
//给操作的UL也删除一个li
var for_li = o.find('li').eq(parent_item.index('.lmrx_li_item'));
parent_item.remove();
for_li.remove();
help.save_history('Delete');
});
//样式
clone.find('.lmrx_style').on('click', function() {
$('.lmrx_style').each(function(index, el) {
o.removeClass(el.id);
});
o.addClass(this.id);
help.save_history('Style');
});
//添加组件
clone.find('.lmrx_addcom').on('click', function() {
editor.com(o);
});
//阻止事件冒泡。
event.stopPropagation();
return false;
});
},
'ol': function(o) {
//不再需要放置编辑标识 o.addClass(setting.editable);
o.on('click', function() {
help.highlight(o);
var clone = help.make_panel('ol', $(this));
//初始化
o.find('li').each(function(index, el) {
var li_last = clone.find('.lmrx_li_item:last');
var li_clone = li_last.clone();
li_last.after(li_clone);
li_clone.find('input').val(help.remove_blank($(el).html()));
});
clone.find('.lmrx_li_item:first').remove();
//删除
clone.find('.lmrx_del').on('click', function() {
var y = prompt('请输入 “yes” 确认删除。', 'no');
if (y == 'yes') {
o.hide('slow', function(){o.remove();});
//移除编辑框。
$('.lmrx_popover').remove();
help.save_history('Delete');
}
});
//提交,把编辑结果写回
clone.find('.lmrx_ok').on('click', function() {
o.find('li').each(function(index, el) {
$(el).html($('.lmrx_li_item_input').eq($(el).index()).val());
});
help.save_history('Edit');
$('.lmrx_popover').remove();
});
//追加
clone.find('.lmrx_after').on('click', function() {
var o_clone = o.clone();
editor.ul(o_clone);
o.after(o_clone);
help.save_history('Copy');
});
//上移
clone.find('.lmrx_up').on('click', function() {
help.swap_dom(o, o.prev());
help.save_history('Move');
});
//下移
clone.find('.lmrx_down').on('click', function() {
help.swap_dom(o, o.next());
help.save_history('Move');
});
//复制li item
clone.find('.lmrx_li_after').on('click', function() {
var parent_item = $(this).parents('.lmrx_li_item');
parent_item.find('.input-group-btn.dropup.open').removeClass('open');
parent_item.after(parent_item.clone(true));
//给操作的UL也添加一个li
var for_li = o.find('li').eq(parent_item.index('.lmrx_li_item'));
for_li.after(for_li.clone());
help.save_history('Copy');
});
//删除li item
clone.find('.lmrx_li_del').on('click', function() {
var parent_item = $(this).parents('.lmrx_li_item')
//给操作的UL也删除一个li
var for_li = o.find('li').eq(parent_item.index('.lmrx_li_item'));
parent_item.remove();
for_li.remove();
help.save_history('Delete');
});
//样式
clone.find('.lmrx_style').on('click', function() {
$('.lmrx_style').each(function(index, el) {
o.removeClass(el.id);
});
o.addClass(this.id);
help.save_history('Style');
});
//添加组件
clone.find('.lmrx_addcom').on('click', function() {
editor.com(o);
});
//阻止事件冒泡。
event.stopPropagation();
return false;
});
},
'table': function(o) {
//不再需要放置编辑标识 o.addClass(setting.editable);
o.on('click', function() {
help.highlight(o);
var clone = help.make_panel('table', $(this));
//检查内容中是否有HTML标签
if ($(this).find('a,strong,img,span').length) {
clone.find('.text-danger.none').show();
}
//初始化编辑框
var th_num_ = $('#lmrx_table th').length;
var tr_num_ = $('#lmrx_table .lmrx_table_td_tr').length;
var o_th_num_ = o.find('th').length;
//初始化编辑框 - 列
if (o_th_num_ < th_num_) {
for (i = 0; i < (th_num_-th_num_); i++) {
$('#lmrx_table').find('th:last-child').remove();
//减少列后,处理行。
$('#lmrx_table').find('tr').each(function(index, el) {
if ($(el).find('th').length == 0) {
$(el).find('td:last-child').remove();
}
});
}
} else if (o_th_num_ > th_num_) {
for (i = 0; i < (o_th_num_-th_num_); i++) {
var _th_last = $('#lmrx_table').find('th:last-child');
_th_last.after(_th_last.clone());
//增加列后,处理行。
$('#lmrx_table').find('tr').each(function(index, el) {
if ($(el).find('th').length == 0) {
var _td_last = $(el).find('td:last-child');
_td_last.after(_td_last.clone());
}
});
}
}
//初始化编辑框 - 行
o_th_num_ = o.find('th').length;
o_tr_num_ = o.find('td').length / o_th_num_;
if (o_tr_num_ > tr_num_) {
for (i = 0; i < (o_tr_num_-tr_num_); i++) {
var _tr_last = $('#lmrx_table').find('tbody tr:last-child');
_tr_last.after(_tr_last.clone());
}
} else if (o_tr_num_ < tr_num_) {
for (i = 0; i < (tr_num_-o_tr_num_); i++) {
$('#lmrx_table').find('tbody tr:last-child').remove();
}
}
//初始化编辑框 - 数据
o.find('th').each(function(index, el) {
var i = $(el).index();
$('#lmrx_table thead th').eq(i).find('input').val(help.remove_blank($(el).html()));
});
o.find('td').each(function(index, el) {
var i = $(el).index();
var j = $(el).parent('tr').index();
$('#lmrx_table tbody tr').eq(j).find('td').eq(i).find('input').val(help.remove_blank($(el).html()));
});
//编辑框表格操作 - 加一列
clone.find('.lmrx_table_add_th').on('click', function() {
var last_th = $('#lmrx_table th:last-child');
last_th.after(last_th.clone());
$('.lmrx_table_td_tr').each(function(index, el) {
var last_td = $(el).find('td:last-child');
last_td.after(last_td.clone());
});
});
//编辑框表格操作 - 减一列
clone.find('.lmrx_table_del_th').on('click', function() {
if ($('#lmrx_table th').length == 1) {
alert('最后一列啦!');
return false;
}
var last_th = $('#lmrx_table th:last-child');
last_th.remove();
$('.lmrx_table_td_tr').each(function(index, el) {
var last_td = $(el).find('td:last-child');
last_td.remove();
});
});
//编辑框表格操作 - 加一行
clone.find('.lmrx_table_add_td').on('click', function() {
var last_td_tr = $('.lmrx_table_td_tr:last-child');
last_td_tr.after(last_td_tr.clone());
});
//编辑框表格操作 - 减一行
clone.find('.lmrx_table_del_td').on('click', function() {
if ($('.lmrx_table_td_tr ').length == 1) {
alert('最后一行啦!');
return false;
}
var last_td_tr = $('.lmrx_table_td_tr:last-child');
last_td_tr.remove();
});
//提交,把编辑结果写回
clone.find('.lmrx_ok').on('click', function() {
var th_num = $('#lmrx_table th').length;
var tr_num = $('#lmrx_table .lmrx_table_td_tr').length;
var o_th_num = o.find('th').length;
//重新构建表格 - 列
if (o_th_num > th_num) {
for (i = 0; i < (o_th_num-th_num); i++) {
o.find('th:last-child').remove();
//减少列后,处理行。
o.find('tr').each(function(index, el) {
if ($(el).find('th').length == 0) {
$(el).find('td:last-child').remove();
}
});
}
} else if (o_th_num < th_num) {
for (i = 0; i < (th_num-o_th_num); i++) {
var _th_last = o.find('th:last-child');
_th_last.after(_th_last.clone());
//增加列后,处理行。
o.find('tr').each(function(index, el) {
if ($(el).find('th').length == 0) {
var _td_last = $(el).find('td:last-child');
_td_last.after(_td_last.clone());
}
});
}
}
//重新构建表格 - 行
tr_num = $('#lmrx_table .lmrx_table_td_tr').length;
o_th_num = o.find('th').length;
o_tr_num = o.find('td').length / o_th_num;
if (o_tr_num < tr_num) {
for (i = 0; i < (tr_num-o_tr_num); i++) {
var _tr_last = o.find('tbody tr:last-child');
_tr_last.after(_tr_last.clone());
}
} else if (o_tr_num > tr_num) {
for (i = 0; i < (o_tr_num-tr_num); i++) {
o.find('tbody tr:last-child').remove();
}
}
//重新构建表格 - 数据
$('#lmrx_table thead').find('th').each(function(index, el) {
var i = $(el).index();
var v = $(el).find('input').val();
o.find('thead th').eq(i).html(v);
});
$('#lmrx_table tbody').find('td').each(function(index, el) {
var i = $(el).index();
var v = $(el).find('input').val();
var j = $(el).parent('tr').index();
o.find('tbody tr').eq(j).find('td').eq(i).html(v);
});
//移除编辑框。
$('.lmrx_popover').remove();
help.save_history('Table');
});
//删除
clone.find('.lmrx_del').on('click', function() {
var y = prompt('请输入 “yes” 确认删除。', 'no');
if (y == 'yes') {
o.hide('slow', function(){o.remove();});
//移除编辑框。
$('.lmrx_popover').remove();
help.save_history('Delete');
}
});
//追加
clone.find('.lmrx_after').on('click', function() {
var o_clone = o.clone();
editor.table(o_clone);
o.after(o_clone);
help.save_history('Copy');
});
//上移
clone.find('.lmrx_up').on('click', function() {
help.swap_dom(o, o.prev());
help.save_history('Move');
});
//下移
clone.find('.lmrx_down').on('click', function() {
help.swap_dom(o, o.next());
help.save_history('Move');
});
//添加组件
clone.find('.lmrx_addcom').on('click', function() {
editor.com(o);
});
//阻止事件冒泡。
event.stopPropagation();
return false;
});
},
};
//组件
var com = {
'p': {'name':'文本段', 'obj':$(' 文本段落 提醒:检查到HTML标签,修改后请注意标签是否闭合。 提醒:检查到HTML标签,修改后请注意标签是否闭合。 提醒:检查到HTML标签,修改后请注意标签是否闭合。 提醒:检查到HTML标签,修改后请注意标签是否闭合。 提醒:检查到HTML标签,修改后请注意标签是否闭合。 提醒:检查到HTML标签,修改后请注意标签是否闭合。 提醒:检查到HTML标签,修改后请注意标签是否闭合。 提醒:检查到HTML标签,修改后请注意标签是否闭合。的属性
clone.find('.popover-content .img_src').val($(this).attr('src'));
clone.find('.popover-content .img_alt').val($(this).attr('alt'));
//判断是否是图片链接
if (o.parent('a').length) {
clone.find('.popover-content .img_href').val(o.parent('a').attr('href'));
}
//提交,把编辑结果写回
clone.find('.lmrx_ok').on('click', function() {
var img_src = clone.find('.popover-content .img_src').val();
var img_alt = clone.find('.popover-content .img_alt').val();
var img_href = clone.find('.popover-content .img_href').val();
if (img_src) {
o.attr('src', img_src).attr('alt', img_alt);
if (o.parent('a').length) {
o.parent('a').attr('href', img_href);
}
//移除编辑框&写历史记录。
$('.lmrx_popover').remove();
help.save_history('Imgae');
} else {
alert('请填写图片链接!');
}
});
//追加
clone.find('.lmrx_after').on('click', function() {
var o_clone = o.clone();
editor.img(o_clone);
o.after(o_clone);
help.save_history('Copy');
});
//删除
clone.find('.lmrx_del').on('click', function() {
var y = prompt('请输入 “yes” 确认删除。', 'no');
if (y == 'yes') {
var border = o.parent('.lmrx_img_txt');
o.hide('slow', function(){o.remove();border.remove()});
//移除编辑框。
$('.lmrx_popover').remove();
}
help.save_history('Delete');
});
//样式
clone.find('.lmrx_style').on('click', function() {
$('.lmrx_style').each(function(index, el) {
o.removeClass(el.id);
});
o.addClass(this.id);
help.save_history('Style');
});
//上移
clone.find('.lmrx_up').on('click', function() {
help.swap_dom(o, o.prev());
help.save_history('Move');
});
//下移
clone.find('.lmrx_down').on('click', function() {
help.swap_dom(o, o.next());
help.save_history('Move');
});
//添加组件
clone.find('.lmrx_addcom').on('click', function() {
editor.com(o);
});
//多媒体中心(每个站点单独设置site_code和site_lgc)
clone.find('.lmrx_media').on('click', function() {
var weburl = 'lmrx_media';
window.CallBack = function(result) {
var site_image_url = 'http://video.chtcdn.com/upload';
var use_pictures = $("#use_pictures").val();
if (result != null) {
$('input.img_src').val(site_image_url+result.Pinfo[0].PUrl);
}
}
window.open('/media/popselectpicture.php?site_code='+help.query_string('site_code')+'&site_lgc='+help.query_string('site_lgc')+'&WebUrl=' + weburl, 'kcfinder_textbox', 'status=0, toolbar=0, location=0, menubar=0, directories=0,resizable=1, scrollbars=0, width=800, height=600');
});
//转换戴文字的图片样式
clone.find('.lmrx_img_to_img_txt').on('click', function() {
if (o.parent('.lmrx_img_txt').length) {
var border = o.parent('.lmrx_img_txt');
if (!border.find('p').length) {
border.append('
')},
'hx': {'name':'标题', 'obj':$('
标题
')},
'ul': {'name':'列表', 'obj':$('
')},
'table': {'name':'表格', 'obj':$('
')}
};
//编辑模板:各HTML标签的编辑模板都放在这个对象里面。
var panel = {
'p': $('表格标题 表格内容 \
文本段落 P\
\
\
\
内联文本 SPAN\
\
\
超文本链接 A\
\
\
图片 IMG\
\
\
\
标题 H\
\
\
\
无序列表 UL\
\
\
\
有序列表 OL\
\
\
\
表格 TABLE\
\
\
\
\
\
\
\
\
\
\
\
组件 COM\
\