You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
information-system/lmrxedit/jquery.lmrxedit.js

1215 lines
58 KiB
JavaScript

/*
* 插件 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));
//提取出<p>的值
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();
}
//提交,把编辑结果写回<p>
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);
});
//增加<a>
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 = '<a href="#" class="lmrx_a_blue">'+s_txt+'</a>';
var replace_txt = $('#p_textarea').val();
replace_txt = replace_txt.replace(s_txt, s_txt_a);
$('#p_textarea').val(replace_txt);
var msg = $('<span class="text-danger small" style="margin-bottom:5px;"> 超链接已添加</span>');
$(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));
//提取出<span>的值
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();
}
//提交,把编辑结果写回<p>
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));
//提取出<a>的值
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();
}
//提交,把编辑结果写回<a>
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));
//提取出<img>的属性
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'));
}
//提交,把编辑结果写回<a>
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('<p>图片文字</p>');
editor.p(border.find('p'));
}
} else {
var border = $('<div class="lmrx_img_txt"></div>');
border.append(o.clone(true)).append('<p>图片文字</p>');
o.replaceWith(border);
editor.p(border.find('p'));
editor.img(border.find('img'));
}
help.save_history('Imgae');
});
//阻止事件冒泡。
event.stopPropagation();
return false;
});
},
'hx': function(o) {
//不再需要放置编辑标识 o.addClass(setting.editable);
o.on('click', function() {
help.highlight(o);
var clone = help.make_panel('hx', $(this));
//提取出<h>的值
var hx_txt = help.remove_blank($(this).html());
clone.find('.popover-content textarea').val(hx_txt);
//检查内容中是否有HTML标签
if ($(this).find('a,strong,img,span').length) {
clone.find('.text-danger.none').show();
}
//提交,把编辑结果写回<p>
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':$('<p class="lmrx_hl">文本段落</p>')},
'img': {'name':'图片', 'obj':$('<img alt="玉器" src="http://images.arachina.com/2014/01/the_tang_paradise8f9a20b15655_cp_318x211.jpg" class="lmrx_img_right lmrx_hl"/>')},
'hx': {'name':'标题', 'obj':$('<h2 class="lmrx_hl">标题</h2>')},
'ul': {'name':'列表', 'obj':$('<ul class="ul lmrx_hl"><li>列表1</li><li>列表2</li><li>列表3</li><li>列表4</li></ul>')},
'table': {'name':'表格', 'obj':$('<table class="table"><thead><tr><th>表格标题</th></tr></thead><tbody><tr><td>表格内容</td></tr></tbody></table>')}
};
//编辑模板各HTML标签的编辑模板都放在这个对象里面。
var panel = {
'p': $('<div class="popover top lmrx_popover">\
<button type="button" class="close xxclose" aria-label="Close" onclick="$(\'.lmrx_popover\').remove();"><span aria-hidden="true">&times;</span></button>\
<h3 class="popover-title" id="popover-top">\
文本段落 P\
<button type="button" class="btn btn-info btn-xs pull-right lmrx_addcom">添加组件</button> \
</h3>\
<div class="popover-content">\
<p class="text-danger none" style="margin-bottom:5px;">提醒检查到HTML标签修改后请注意标签是否闭合</p>\
<button type="button" class="btn btn-default btn-xs" aria-label="Left Align" onclick="javascript:var _textarea = $(this).siblings(\'textarea.form-control\');var _rows = parseInt(_textarea.attr(\'rows\'));_textarea.attr(\'rows\', _rows+5);"></button>\
<button type="button" class="btn btn-default btn-xs" aria-label="Left Align" onclick="javascript:var _textarea = $(this).siblings(\'textarea.form-control\');var _rows = parseInt(_textarea.attr(\'rows\'));_textarea.attr(\'rows\', _rows-5);"></button>\
<button type="button" class="btn btn-default btn-xs lmrx_addtag_a" aria-label="Left Align">&lt;a&gt;</button>\
<textarea class="form-control" rows="7" style="margin:5px 0 0;" id="p_textarea"></textarea>\
<div class="text-right btn-group pull-right xxsp2" role="group">\
<button type="button" class="btn btn-sm btn-danger lmrx_del">删除</button>\
<button type="button" class="btn btn-sm btn-default lmrx_up">上移</button>\
<button type="button" class="btn btn-sm btn-default lmrx_down">下移</button>\
<button type="button" class="btn btn-sm btn-success lmrx_after">复制</button>\
<button type="button" class="btn btn-sm btn-primary lmrx_ok">提交</button>\
<button type="button" class="btn btn-sm btn-default lmrx_cancel" onclick="$(\'.lmrx_popover\').remove();">关闭</button>\
</div>\
</div>\
</div>\
'),
'span': $('<div class="popover top lmrx_popover">\
<button type="button" class="close xxclose" aria-label="Close" onclick="$(\'.lmrx_popover\').remove();"><span aria-hidden="true">&times;</span></button>\
<h3 class="popover-title" id="popover-top">\
内联文本 SPAN\
</h3>\
<div class="popover-content">\
<p class="text-danger none" style="margin-bottom:5px;">提醒检查到HTML标签修改后请注意标签是否闭合</p>\
<textarea class="form-control" rows="5" style="margin:5px 0 0;"></textarea>\
<div class="text-right btn-group pull-right xxsp2" role="group">\
<button type="button" class="btn btn-sm btn-danger lmrx_del">删除</button>\
<button type="button" class="btn btn-sm btn-default lmrx_up">上移</button>\
<button type="button" class="btn btn-sm btn-default lmrx_down">下移</button>\
<button type="button" class="btn btn-sm btn-success lmrx_after">复制</button>\
<button type="button" class="btn btn-sm btn-primary lmrx_ok">提交</button>\
<button type="button" class="btn btn-sm btn-default lmrx_cancel" onclick="$(\'.lmrx_popover\').remove();">关闭</button>\
</div>\
</div>\
</div>\
'),
'a': $('<div class="popover top lmrx_popover">\
<button type="button" class="close xxclose" aria-label="Close" onclick="$(\'.lmrx_popover\').remove();"><span aria-hidden="true">&times;</span></button>\
<h3 class="popover-title" id="popover-top">\
超文本链接 A\
</h3>\
<div class="popover-content">\
<p class="text-danger none" style="margin-bottom:5px;">提醒检查到HTML标签修改后请注意标签是否闭合</p>\
<div class="input-group" style="margin-bottom:8px;margin-top:12px;">\
<div class="input-group-addon">文本</div>\
<input type="text" class="form-control a_text">\
</div>\
<div class="input-group" style="margin-bottom:12px;">\
<div class="input-group-addon">链接</div>\
<input type="text" class="form-control a_href">\
</div>\
<div class="text-right btn-group pull-right xxsp2" role="group">\
<button type="button" class="btn btn-sm btn-danger lmrx_del">删除</button>\
<button type="button" class="btn btn-sm btn-primary lmrx_ok">提交</button>\
<button type="button" class="btn btn-sm btn-default lmrx_cancel" onclick="$(\'.lmrx_popover\').remove();">关闭</button>\
</div>\
<div class="text-right btn-group dropup xxsp2" role="group">\
<button type="button" class="btn btn-sm btn-default border_rz" data-toggle="dropdown">样式 <span class="caret"></span></button>\
<ul class="dropdown-menu" role="menu">\
<li><a href="javascript:;" class="lmrx_style" id="lmrx_a_def">默认</a></li>\
<li><a href="javascript:;" class="lmrx_style" id="lmrx_a_blue">蓝色</a></li>\
</ul>\
<button type="button" class="btn btn-sm btn-default lmrx_a_blank">新窗口打开</button>\
<button type="button" class="btn btn-sm btn-default lmrx_a_nofollow">no follow</button>\
</div>\
</div>\
</div>\
'),
'img': $('<div class="popover top lmrx_popover">\
<button type="button" class="close xxclose" aria-label="Close" onclick="$(\'.lmrx_popover\').remove();"><span aria-hidden="true">&times;</span></button>\
<h3 class="popover-title" id="popover-top">\
图片 IMG\
<button type="button" class="btn btn-info btn-xs pull-right lmrx_addcom">添加组件</button> \
</h3>\
<div class="popover-content">\
<p class="text-danger none" style="margin-bottom:5px;">提醒检查到HTML标签修改后请注意标签是否闭合</p>\
<div class="input-group" style="margin-bottom:8px;margin-top:12px;">\
<div class="input-group-addon">URL</div>\
<input type="text" class="form-control img_src">\
</div>\
<div class="input-group" style="margin-bottom:12px;">\
<div class="input-group-addon">ALT</div>\
<input type="text" class="form-control img_alt">\
</div>\
<div class="input-group" style="margin-bottom:12px;">\
<div class="input-group-addon">链接</div>\
<input type="text" class="form-control img_href">\
</div>\
<div class="text-right btn-group pull-right xxsp2" role="group">\
<button type="button" class="btn btn-sm btn-danger lmrx_del">删除</button>\
<button type="button" class="btn btn-sm btn-default lmrx_up">上移</button>\
<button type="button" class="btn btn-sm btn-default lmrx_down">下移</button>\
<button type="button" class="btn btn-sm btn-success lmrx_after">复制</button>\
<button type="button" class="btn btn-sm btn-info lmrx_media">图片库</button>\
<button type="button" class="btn btn-sm btn-primary lmrx_ok">提交</button>\
<button type="button" class="btn btn-sm btn-default lmrx_cancel" onclick="$(\'.lmrx_popover\').remove();">关闭</button>\
</div>\
<div class="text-right btn-group dropup xxsp2" role="group">\
<button type="button" class="btn btn-sm btn-default border_rz" data-toggle="dropdown">位置 <span class="caret"></span></button>\
<ul class="dropdown-menu" role="menu">\
<li><a href="javascript:;" class="lmrx_style" id="lmrx_img_def">默认</a></li>\
<li><a href="javascript:;" class="lmrx_style" id="lmrx_img_left">左浮动</a></li>\
<li><a href="javascript:;" class="lmrx_style" id="lmrx_img_right">右浮动</a></li>\
<li><a href="javascript:;" class="lmrx_style" id="lmrx_img_center">居中</a></li>\
</ul>\
<button type="button" class="btn btn-sm btn-default lmrx_img_to_img_txt">图片文字</button>\
<button type="button" class="btn btn-sm btn-default lmrx_img_null">:)</button>\
</div>\
</div>\
</div>\
'),
'hx': $('<div class="popover top lmrx_popover">\
<button type="button" class="close xxclose" aria-label="Close" onclick="$(\'.lmrx_popover\').remove();"><span aria-hidden="true">&times;</span></button>\
<h3 class="popover-title" id="popover-top">\
标题 H\
<button type="button" class="btn btn-info btn-xs pull-right lmrx_addcom">添加组件</button> \
</h3>\
<div class="popover-content">\
<p class="text-danger none" style="margin-bottom:5px;">提醒检查到HTML标签修改后请注意标签是否闭合</p>\
<textarea class="form-control" rows="2" style="margin:5px 0 0;"></textarea>\
<div class="text-right btn-group pull-right xxsp2" role="group">\
<button type="button" class="btn btn-sm btn-danger lmrx_del">删除</button>\
<button type="button" class="btn btn-sm btn-default lmrx_up">上移</button>\
<button type="button" class="btn btn-sm btn-default lmrx_down">下移</button>\
<button type="button" class="btn btn-sm btn-success lmrx_after">复制</button>\
<button type="button" class="btn btn-sm btn-primary lmrx_ok">提交</button>\
<button type="button" class="btn btn-sm btn-default lmrx_cancel" onclick="$(\'.lmrx_popover\').remove();">关闭</button>\
</div>\
</div>\
</div>\
'),
'ul': $('<div class="popover top lmrx_popover">\
<button type="button" class="close xxclose" aria-label="Close" onclick="$(\'.lmrx_popover\').remove();"><span aria-hidden="true">&times;</span></button>\
<h3 class="popover-title" id="popover-top">\
无序列表 UL\
<button type="button" class="btn btn-info btn-xs pull-right lmrx_addcom">添加组件</button> \
</h3>\
<div class="popover-content">\
<p class="text-danger none" style="margin-bottom:5px;">提醒检查到HTML标签修改后请注意标签是否闭合</p>\
<div class="input-group lmrx_li_item">\
<div class="input-group-addon">li</div>\
<input type="text" aria-label="Text input with dropdown button" class="form-control lmrx_li_item_input">\
<div class="input-group-btn dropup">\
<button aria-expanded="false" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">编辑 <span class="caret"></span></button>\
<ul role="menu" class="dropdown-menu dropdown-menu-right">\
<li><a href="javascript:;" class="lmrx_li_after">复制</a></li>\
<li><a href="javascript:;" class="lmrx_li_del">删除</a></li>\
</ul>\
</div>\
</div>\
<div class="text-right btn-group pull-right xxsp2" role="group">\
<button type="button" class="btn btn-sm btn-danger lmrx_del">删除</button>\
<button type="button" class="btn btn-sm btn-default lmrx_up">上移</button>\
<button type="button" class="btn btn-sm btn-default lmrx_down">下移</button>\
<button type="button" class="btn btn-sm btn-success lmrx_after">复制</button>\
<button type="button" class="btn btn-sm btn-primary lmrx_ok">提交</button>\
<button type="button" class="btn btn-sm btn-default lmrx_cancel" onclick="$(\'.lmrx_popover\').remove();">关闭</button>\
</div>\
<div class="text-right btn-group dropup xxsp2" role="group">\
<div class="text-right btn-group" role="group">\
<button type="button" class="btn btn-sm btn-default border_rz" data-toggle="dropdown">样式 <span class="caret"></span></button>\
<ul class="dropdown-menu" role="menu">\
<li><a href="javascript:;" class="lmrx_style" id="ul">默认</a></li>\
<li><a href="javascript:;" class="lmrx_style" id="lmrx_ul_black">黑点</a></li>\
<li><a href="javascript:;" class="lmrx_style" id="lmrx_ul_number">数字</a></li>\
</ul>\
</div>\
<div class="text-right btn-group" role="group">\
<button type="button" class="btn btn-sm btn-default border_rz" data-toggle="dropdown">拆分 <span class="caret"></span></button>\
<ul class="dropdown-menu" role="menu">\
<li><a href="javascript:;" class="lmrx_style" id="ul">还原</a></li>\
<li><a href="javascript:;" class="lmrx_style" id="ul lmrx_ul_div2 clearfix">默认两列</a></li>\
<li><a href="javascript:;" class="lmrx_style" id="ul lmrx_ul_div3 clearfix">默认三列</a></li>\
<li><a href="javascript:;" class="lmrx_style" id="lmrx_ul_black lmrx_ul_div2 clearfix">黑店两列</a></li>\
<li><a href="javascript:;" class="lmrx_style" id="lmrx_ul_black lmrx_ul_div3 clearfix">黑店三列</a></li>\
</ul>\
</div>\
<button type="button" class="btn btn-sm btn-default lmrx_ul_none">:)</button>\
</div>\
</div>\
</div>\
'),
'ol': $('<div class="popover top lmrx_popover">\
<button type="button" class="close xxclose" aria-label="Close" onclick="$(\'.lmrx_popover\').remove();"><span aria-hidden="true">&times;</span></button>\
<h3 class="popover-title" id="popover-top">\
有序列表 OL\
<button type="button" class="btn btn-info btn-xs pull-right lmrx_addcom">添加组件</button> \
</h3>\
<div class="popover-content">\
<p class="text-danger none" style="margin-bottom:5px;">提醒检查到HTML标签修改后请注意标签是否闭合</p>\
<div class="input-group lmrx_li_item">\
<div class="input-group-addon">li</div>\
<input type="text" aria-label="Text input with dropdown button" class="form-control lmrx_li_item_input">\
<div class="input-group-btn dropup">\
<button aria-expanded="false" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">编辑 <span class="caret"></span></button>\
<ul role="menu" class="dropdown-menu dropdown-menu-right">\
<li><a href="javascript:;" class="lmrx_li_after">复制</a></li>\
<li><a href="javascript:;" class="lmrx_li_del">删除</a></li>\
</ul>\
</div>\
</div>\
<div class="text-right btn-group pull-right xxsp2" role="group">\
<button type="button" class="btn btn-sm btn-danger lmrx_del">删除</button>\
<button type="button" class="btn btn-sm btn-default lmrx_up">上移</button>\
<button type="button" class="btn btn-sm btn-default lmrx_down">下移</button>\
<button type="button" class="btn btn-sm btn-success lmrx_after">复制</button>\
<button type="button" class="btn btn-sm btn-primary lmrx_ok">提交</button>\
<button type="button" class="btn btn-sm btn-default lmrx_cancel" onclick="$(\'.lmrx_popover\').remove();">关闭</button>\
</div>\
<div class="text-right btn-group dropup xxsp2" role="group">\
<div class="text-right btn-group" role="group">\
<button type="button" class="btn btn-sm btn-default border_rz" data-toggle="dropdown">样式 <span class="caret"></span></button>\
<ul class="dropdown-menu" role="menu">\
<li><a href="javascript:;" class="lmrx_style" id="ul">默认</a></li>\
<li><a href="javascript:;" class="lmrx_style" id="lmrx_ul_black">黑点</a></li>\
<li><a href="javascript:;" class="lmrx_style" id="lmrx_ul_number">数字</a></li>\
</ul>\
</div>\
<button type="button" class="btn btn-sm btn-default lmrx_ul_none">:)</button>\
</div>\
</div>\
</div>\
'),
'table': $('<div class="popover top lmrx_popover">\
<button type="button" class="close xxclose" aria-label="Close" onclick="$(\'.lmrx_popover\').remove();"><span aria-hidden="true">&times;</span></button>\
<h3 class="popover-title" id="popover-top">\
表格 TABLE\
<button type="button" class="btn btn-info btn-xs pull-right lmrx_addcom">添加组件</button> \
</h3>\
<div class="popover-content">\
<p class="text-danger none" style="margin-bottom:5px;">提醒检查到HTML标签修改后请注意标签是否闭合</p>\
<button type="button" class="btn btn-default btn-xs lmrx_table_add_th" aria-label="Left Align">加列</button>\
<button type="button" class="btn btn-default btn-xs lmrx_table_del_th" aria-label="Left Align">减列</button>\
<button type="button" class="btn btn-default btn-xs lmrx_table_add_td" aria-label="Left Align">加行</button>\
<button type="button" class="btn btn-default btn-xs lmrx_table_del_td" aria-label="Left Align">减行</button>\
<table class="table" id="lmrx_table" style="margin-top:12px;">\
<thead>\
<tr class="lmrx_table_th_tr"><th class="lmrx_table_th"><input placeholder="表格标题" style="width:100%;"/></th></tr>\
</thead>\
<tbody>\
<tr class="lmrx_table_td_tr"><td class="lmrx_table_td"><input placeholder="表格内容" style="width:100%;"/></td></tr>\
</tbody>\
</table>\
<div class="text-right btn-group pull-right xxsp2" role="group">\
<button type="button" class="btn btn-sm btn-danger lmrx_del">删除</button>\
<button type="button" class="btn btn-sm btn-default lmrx_up">上移</button>\
<button type="button" class="btn btn-sm btn-default lmrx_down">下移</button>\
<button type="button" class="btn btn-sm btn-success lmrx_after">复制</button>\
<button type="button" class="btn btn-sm btn-primary lmrx_ok">提交</button>\
<button type="button" class="btn btn-sm btn-default lmrx_cancel" onclick="$(\'.lmrx_popover\').remove();">关闭</button>\
</div>\
</div>\
</div>\
'),
'com': $('<div class="popover top lmrx_popover">\
<button type="button" class="close xxclose" aria-label="Close" onclick="$(\'.lmrx_popover\').remove();"><span aria-hidden="true">&times;</span></button>\
<h3 class="popover-title" id="popover-top">\
组件 COM\
</h3>\
<div class="popover-content">\
<div class="choose_div">\
<input type="checkbox" name="p" data-on="文本段" data-off="文本段" data-toggle="toggle" data-onstyle="success" class="lmrx_addcom_input"/>\
</div>\
<div class="text-right btn-group pull-right xxsp2" role="group">\
<button type="button" class="btn btn-sm btn-primary lmrx_ok">确定</button>\
</div>\
</div>\
</div>\
'),
};
//辅助方法对象
var help = {
//clone编辑模板。
'make_panel': function(tag, o) {
//移除编辑框。
$('.lmrx_popover').remove();
//clone一份编辑模板。
var clone = panel[tag].clone().appendTo($('body')).show();
//待编辑标签的位置。
var pos = {};
pos.top = 'auto';
pos.left = $(window).width() / 2 - clone.width() / 2;
return clone.css(pos);
},
//移除空白字符
'remove_blank': function(txt) {
txt = txt.replace(/([\s]{2,})|([\n\r])/g, '');
return $.trim(txt);
},
//交换DOM的位置
'swap_dom': function(a, b) {
if (a.length && b.length) {
var a1 = $("<div id='a1'></div>").insertBefore(a);
var b1 = $("<div id='b1'></div>").insertBefore(b);
a.insertAfter(b1);
b.insertAfter(a1);
a1.remove();
b1.remove();
a1 = b1 = null;
}
},
//保存操作到本地存储localStorage需要HTML5支持。PS:通常本地存储空间为5M。
'save_history': function(action) {
if(window.localStorage) {
localStorage.setItem('lmrx_'+(new Date().getTime())+'_'+action, $('#lmrxedit').html());
this.list_history();
}
},
//操作历史列表
'list_history': function() {
var hl = $('#history_list li:first');
hl.siblings('li.hl_item').remove();
var sort_keys = [];
//排序localStorage的key。--兼容IE和Firefox
$.each(localStorage, function(key, value) {
if (/^lmrx_([\d]+?)_([\w]+?)$/.test(key)) sort_keys.push(key);
});
sort_keys.sort();
//只保留200条历史记录
if (sort_keys.length>51) {
var last_key = sort_keys.shift();
localStorage.removeItem(last_key);
}
//添加历史记录到控制面板
$.each(sort_keys, function(index, key) {
//解析key
var mm = key.match(/^lmrx_([\d]+?)_([\w]+?)$/);
var dd = new Date(Number(mm[1]));
//添加记录
var hl_item = hl.clone();
hl_item.find('a').attr('id', key).html(setting.cn[mm[2]]+' @'+dd.toLocaleString());
hl_item.show();
hl.after(hl_item);
});
},
//加载历史记录
'load_history': function() {
$('#history_list .hl_item a').off('click');
$(document).on('click', '#history_list .hl_item a', function() {
$('.lmrx_popover').remove();
$('#lmrxedit').html(localStorage.getItem(this.id));
$('#lmrxedit *').each(function(index, el) {
var tag = ($(el).get(0).tagName).toLowerCase();
tag = tag.replace(/(h1|h2|h3|h4|h5|h6|h7)/, 'hx');
if (editor[tag]) {
(editor[tag])($(el));
} else {
if (setting.debug) console.log('异常2找不到<' + tag + '>的处理方法。');
}
});
return false;
});
},
//重新绑定a标签
're_bind': function(o) {
if (o.find('a').length) {
o.find('a').each(function(index, el) {
editor.a($(el));
});
}
},
//高亮
'highlight': function(o) {
$('.lmrx_hl').removeClass('lmrx_hl');
o.addClass('lmrx_hl');
},
//get
'query_string': function(item) {
var svalue = location.search.match(new RegExp("[\?\&]" + item + "=([^\&]*)(\&?)","i"));
return svalue ? svalue[1] : svalue;
},
//控制面板及高亮样式。
'init_control_pannel': function(o) {
if ($('#lmrxedit_control').length == 0) {
$('body').append('\
<div id="lmrxedit_control" class="btn-group-vertical dropup" role="group">\
<div class="btn-group">\
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">\
历史 <span class="caret"></span>\
</button>\
<ul class="dropdown-menu" role="menu" id="history_list">\
<li style="display:none" class="hl_item"><a href="javascript:;">Action</a></li>\
<li class="divider"></li>\
<li><a>历史记录仅保存在本地电脑<br/>自动记录操作后的内容</a></li>\
</ul>\
</div>\
<button class="btn btn-default" type="button" id="lmrx_example">模板</button>\
<button class="btn btn-primary" type="button" id="lmrxedit_save">保存</button>\
</div>\
');
}
this.save_history('Load');
this.list_history();
this.load_history();
//加载扩展面板
if (typeof lmrx_ext != undefined) {
$.extend(editor, lmrx_ext.editor);
$.extend(panel, lmrx_ext.panel);
}
},
};
//初始化控制面板
help.init_control_pannel();
//DONE!
return this.each(function() {
//取得标签名
var tag = ($(this).get(0).tagName).toLowerCase();
tag = tag.replace(/(h1|h2|h3|h4|h5|h6|h7)/, 'hx');
if (editor[tag]) {
(editor[tag])($(this));
} else {
if (setting.debug) console.log('异常1找不到<' + tag + '>的处理方法。');
}
});
};
})(jQuery);