forgeplus-react/public/js/create_kindeditor.js

427 lines
18 KiB
JavaScript
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

//需求:表情栏可以隐藏显示,高度只要一点高
function sd_create_editor(params) {
// var minHeight; //最小高度
var paramsHeight = params.height; //设定的高度
var id = arguments[1] ? arguments[1] : undefined;
var type = arguments[2] ? arguments[2] : '';
var paramsWidth = params.width == undefined ? "100%" : params.width;
var editor = params.kindutil.create(params.textarea, {
resizeType: 1, minWidth: "1px", width: "94%",
height: "33px",// == undefined ? "30px":paramsHeight+"px",
minHeight: "33px",// == undefined ? "30px":paramsHeight+"px",
width: params.width,
/*
items:['emoticons','fontname',
'forecolor', 'hilitecolor', 'bold', '|', 'justifyleft', 'justifycenter', 'insertorderedlist','insertunorderedlist', '|',
'formatblock', 'fontsize', '|','indent', 'outdent',
'|','imagedirectupload','more'],*/
items: ['code', 'emoticons', 'fontname',
'forecolor', 'hilitecolor', 'bold', '|', 'justifyleft', 'justifycenter', 'insertorderedlist', 'insertunorderedlist', '|',
'formatblock', 'fontsize', '|', 'indent', 'outdent',
'|', 'imagedirectupload', 'table', 'media', 'preview', "more"
],
afterChange: function () {//按键事件
var edit = this.edit;
var body = edit.doc.body;
edit.iframe.height(paramsHeight);
this.resize(null, Math.max((params.kindutil.IE ? body.scrollHeight : (params.kindutil.GECKO ? body.offsetHeight + 26 : body.offsetHeight + 7)), paramsHeight));
},
afterBlur: function () {
//params.toolbar_container.hide();
params.textarea.blur();
sd_check_editor_form_field({ content: this, contentmsg: params.contentmsg, textarea: params.textarea });
if (this.isEmpty()) {
this.edit.html("<span id='hint' style='color:#999999;font-size:12px;'>我要回复</span>");
}
//params.toolbar_container.hide();
$('#reply_image_' + id).addClass('imageFuzzy');
if (/^\s*<\w*\s*\w*\=\"\w*\"\s*\w*\=\"\w*\:\s*\#\d*\;\s*\w*\-\w*\:\s*\w*\;\"\>[\u4e00-\u9fa5]*<\/\w*\>\s*$/.test(this.edit.html())) {
params.submit_btn.hide();
params.toolbar_container.hide();
this.resize("100%", null);
} else if (this.edit.html().trim() != "") {
params.submit_btn.show();
params.toolbar_container.show();
}
//params.submit_btn.css("display","none");
},
afterFocus: function () {
var edit = this.edit;
var body = edit.doc.body;
if (/^\s*<\w*\s*\w*\=\"\w*\"\s*\w*\=\"\w*\:\s*\#\d*\;\s*\w*\-\w*\:\s*\w*\;\"\>[\u4e00-\u9fa5]*<\/\w*\>\s*$/.test(edit.html())) {
edit.html('');
}
params.submit_btn.show();
params.contentmsg.hide();
params.toolbar_container.show();
// params.toolbar_container.show();
$('#reply_image_' + id).removeClass('imageFuzzy');
//edit.iframe.width(paramsWidth);
this.resize("100%", null);
this.resize(paramsWidth, null);
//params.submit_btn.show();
},
afterCreate: function () {
//params.submit_btn.hide();
var toolbar = $("div[class='ke-toolbar']", params.div_form);
toolbar.css('display', 'inline');
toolbar.css('padding', 0);
$(".ke-outline>.ke-toolbar-icon", toolbar).append('表情');
params.toolbar_container.append(toolbar);
params.toolbar_container.hide();
params.submit_btn.hide();
//init
var edit = this.edit;
var body = edit.doc.body;
edit.iframe[0].scroll = 'no';
body.style.overflowY = 'hidden';
//reset height
paramsHeight = paramsHeight == undefined ? params.kindutil.removeUnit(this.height) : paramsHeight;
edit.iframe.height(paramsHeight);
edit.html("<span id='hint' style='color:#999999;font-size:12px;'>我要回复</span>");
this.resize(null, paramsHeight);// Math.max((params.kindutil.IE ? body.scrollHeight : body.offsetHeight)+ paramsHeight , paramsHeight)
// params.toolbar_container.hide();
if (typeof enableAt === 'function') {
enableAt(this, id, type);
}
}
}).loadPlugin('paste');
return editor;
}
function sd_create_shixun_editor(params) {
// var minHeight; //最小高度
var paramsHeight = params.height; //设定的高度
var id = arguments[1] ? arguments[1] : undefined;
var type = arguments[2] ? arguments[2] : '';
var paramsWidth = params.width == undefined ? "100%" : params.width;
var editor = params.kindutil.create(params.textarea, {
resizeType: 1, minWidth: "1px", width: "94%",
height: "33px",// == undefined ? "30px":paramsHeight+"px",
minHeight: "33px",// == undefined ? "30px":paramsHeight+"px",
width: params.width,
/*
items:['emoticons','fontname',
'forecolor', 'hilitecolor', 'bold', '|', 'justifyleft', 'justifycenter', 'insertorderedlist','insertunorderedlist', '|',
'formatblock', 'fontsize', '|','indent', 'outdent',
'|','imagedirectupload','more'],*/
items: ['imagedirectupload'],
afterChange: function () {//按键事件
if (this.isEmpty() || this.edit.doc.body.innerText == '说点什么') {
$('#mini_comment_section').height('auto')
} else {
var edit = this.edit;
var body = edit.doc.body;
var newHeight = 0;
var FF = !(window.mozInnerScreenX == null);
if (FF) { // 火狐下处理方式不一样
newHeight = $(body).height()
} else {
$(body).children().each(function () { newHeight += $(this).height() });
}
// var newHeight = $(body).height()
var maxHeight = 357 // $(window).height() - 150 - 57; // 150 上部距离 57 下部距离
newHeight = newHeight <= maxHeight ? newHeight : maxHeight
if (newHeight > 150) {
if (FF) { // 火狐下处理方式不一样
this.resize("100%", (newHeight + 20) + 'px');
} else {
this.resize("100%", newHeight + 'px');
}
$('#mini_comment_section').height(newHeight + 57)
} else {
this.resize("100%", '150px');
$('#mini_comment_section').height('auto')
}
}
//edit.iframe.height(paramsHeight);
//this.resize(null, Math.max((params.kindutil.IE ? body.scrollHeight : (params.kindutil.GECKO ? body.offsetHeight+26:body.offsetHeight+7)) , 15));
},
afterBlur: function () {
//params.toolbar_container.hide();
params.textarea.blur();
sd_check_editor_form_field({ content: this, contentmsg: params.contentmsg, textarea: params.textarea });
if (this.isEmpty()) {
$('#mini_comment_section').height('auto')
this.edit.html("<span id='hint' style='color:#999999;font-size:14px;'>说点什么</span>");
params.submit_btn.hide();
params.toolbar_container.hide();
this.resize("100%", "30px");
$("#dis_reply_id").val("");
if ($("#editor_panel").length > 0) {
$("#editor_panel").attr("style", "margin-top:9px;flex: 1;");
$("#editor_panel").parents("form").addClass("df")
}
}
//params.toolbar_container.hide();
/*$('#reply_image_' + id).addClass('imageFuzzy');
if(/^\s*<\w*\s*\w*\=\"\w*\"\s*\w*\=\"\w*\:\s*\#\d*\;\s*\w*\-\w*\:\s*\w*\;\"\>[\u4e00-\u9fa5]*<\/\w*\>\s*$/.test(this.edit.html())){
params.submit_btn.hide();
params.toolbar_container.hide();
this.resize("100%", "30px");
}else if(this.edit.html().trim() != ""){
params.submit_btn.show();
params.toolbar_container.show();
}*/
//params.submit_btn.css("display","none");
// $('#mini_comment_section').height('auto')
},
afterFocus: function () {
var edit = this.edit;
var body = edit.doc.body;
if (/^\s*<\w*\s*\w*\=\"\w*\"\s*\w*\=\"\w*\:\s*\#\d*\;\s*\w*\-\w*\:\s*\w*\;\"\>[\u4e00-\u9fa5]*<\/\w*\>\s*$/.test(edit.html())) {
edit.html("");
}
params.submit_btn.show();
params.contentmsg.hide();
params.toolbar_container.show();
// params.toolbar_container.show();
$('#reply_image_' + id).removeClass('imageFuzzy');
//edit.iframe.width(paramsWidth);
var newHeight = $(body).height()
if (newHeight < 150) {
this.resize("100%", "150px");
this.resize(paramsWidth, "150px");
}
if ($("#editor_panel").length > 0) {
$("#editor_panel").attr("style", "width:100%;margin-top:9px;");
$("#editor_panel").parents("form").removeClass("df")
}
//params.submit_btn.show();
// $('#mini_comment_section').height('244px')
},
afterCreate: function () {
//params.submit_btn.hide();
var toolbar = $("div[class='ke-toolbar']", params.div_form);
toolbar.css('display', 'inline');
toolbar.css('padding', 0);
$(".ke-outline>.ke-toolbar-icon", toolbar).append('表情');
params.toolbar_container.append(toolbar);
params.toolbar_container.hide();
params.submit_btn.hide();
//init
var edit = this.edit;
var body = edit.doc.body;
edit.iframe[0].scroll = 'no';
// body.style.overflowY = 'hidden';
body.style['padding-top'] = '2px';
body.style['padding-left'] = '5px';
// <style type='text/css'>body{padding-top: 2px;padding-left: 5px;}</style>
//reset height
paramsHeight = paramsHeight == undefined ? params.kindutil.removeUnit(this.height) : paramsHeight;
edit.iframe.height(paramsHeight);
edit.html("<span id='hint' style='color:#999999;font-size:14px;'>说点什么</span>");
this.resize(null, paramsHeight);// Math.max((params.kindutil.IE ? body.scrollHeight : body.offsetHeight)+ paramsHeight , paramsHeight)
// params.toolbar_container.hide();
if (typeof enableAt === 'function') {
enableAt(this, id, type);
}
var iframe = edit.iframe[0]
$(iframe.contentDocument.head).append(
$("<style type='text/css'>::-webkit-scrollbar{height: 10px;width: 6px !important;background: rgba(0,0,0,.1) !important;} ::-webkit-scrollbar-thumb {border-radius: 6px;background: #ADADAD;};</style>"));
}
}).loadPlugin('paste');
return editor;
}
function sd_check_editor_form_field(params) {
var result = true;
if (params.content != undefined) {
if (params.content.isEmpty()) {
result = false;
}
if (params.content.html() != params.textarea.html() || params.issubmit == true) {
params.textarea.html(params.content.html());
params.content.sync();
if (params.content.isEmpty() || /^\s*<\w*\s*\w*\=\"\w*\"\s*\w*\=\"\w*\:\s*\#\d*\;\s*\w*\-\w*\:\s*\w*\;\"\>[\u4e00-\u9fa5]*<\/\w*\>\s*$/.test(params.textarea.html())) {
params.contentmsg.html('内容不能为空');
params.contentmsg.css({ color: '#ff0000' });
} else {
params.contentmsg.html('填写正确');
params.contentmsg.css({ color: '#008000' });
}
params.contentmsg.show();
}
}
return result;
}
function sd_create_form(params) {
params.form.submit(function () {
var flag = false;
if (params.form.attr('data-remote') != undefined) {
flag = true
}
var is_checked = sd_check_editor_form_field({
issubmit: true,
content: params.editor,
contentmsg: params.contentmsg,
textarea: params.textarea
});
if (is_checked) {
if (flag) {
return true;
} else {
$(this)[0].submit();
return false;
}
}
return false;
});
}
function sd_reset_editor_form(params) {
params.form[0].reset();
params.textarea.empty();
if (params.editor != undefined) {
params.editor.html(params.textarea.html());
}
params.contentmsg.hide();
}
//第二个参数是高度,可以传,可以不传
function sd_create_editor_from_data(id) {
var height = arguments[1] ? arguments[1] : undefined;
var width = arguments[2] ? arguments[2] : undefined;
var type = arguments[3] ? arguments[3] : undefined;
var K = KindEditor;
$("div[nhname='new_message_" + id + "']").each(function () {
var params = {};
params.kindutil = K;
params.div_form = $(this);
params.form = $("form", params.div_form);
if (params.form == undefined || params.form.length == 0) {
return;
}
params.textarea = $("textarea[nhname='new_message_textarea_" + id + "']", params.div_form);
params.contentmsg = $("span[nhname='contentmsg_" + id + "']", params.div_form);
params.toolbar_container = $("div[nhname='toolbar_container_" + id + "']", params.div_form);
params.cancel_btn = $("#new_message_cancel_btn_" + id);
params.submit_btn = $("#new_message_submit_btn_" + id);
params.height = height;
params.width = width;
if (params.textarea.data('init') == undefined) {
params.editor = sd_create_editor(params, id, type);
sd_create_form(params);
params.cancel_btn.click(function () {
sd_reset_editor_form(params);
});
params.submit_btn.click(function () {
var tContents = $("#comment_news_" + id).val();
if (tContents != undefined) {
var beforeImage = tContents.split("<img");
var afterImage = tContents.split("/>");
if (beforeImage[0] == "" && afterImage[1] == "") {
notice_box('不支持纯图片评论<br/>请在评论中增加文字信息');
return;
}
if (tContents.startsWith('<') && tContents.endsWith('>')
&& (tContents.indexOf('<link') != -1 || tContents.indexOf('<script') != -1)) {
notice_box('不支持包含link或script标签的html内容');
return;
}
}
// react环境下发消息给react组件
if (window['__isR'] === true) {
$(document).trigger("onReply", { commentContent: tContents, id: id, editor: params.editor });
} else {
params.form.submit();
}
});
params.textarea.focus(function () {
params.editor.focus();
});
params.textarea.data('init', 1);
$(this).show();
__editor = params.editor
}
});
// });
div_form = $("div[nhname='new_message_" + id + "']");
$(".ke-edit", div_form).css("height", "33px");
$(".ke-edit-iframe", div_form).css("height", "33px");
return __editor;
}
//第二个参数是高度,可以传,可以不传
function sd_create_editor_from_shixun_data(id) {
var height = arguments[1] ? arguments[1] : undefined;
var width = arguments[2] ? arguments[2] : undefined;
var type = arguments[3] ? arguments[3] : undefined;
// KindEditor.ready(function (K) {
// react 环境不需要ready方法页面已经加载完了才执行sd_create_editor_from_data
var K = KindEditor;
$("div[nhname='new_message_" + id + "']").each(function () {
var params = {};
params.kindutil = K;
params.div_form = $(this);
params.form = $("form", params.div_form);
if (params.form == undefined || params.form.length == 0) {
return;
}
params.textarea = $("textarea[nhname='new_message_textarea_" + id + "']", params.div_form);
params.contentmsg = $("span[nhname='contentmsg_" + id + "']", params.div_form);
params.toolbar_container = $("div[nhname='toolbar_container_" + id + "']", params.div_form);
params.cancel_btn = $("#new_message_cancel_btn_" + id);
params.submit_btn = $("#new_message_submit_btn_" + id);
params.height = height;
params.width = width;
if (params.textarea.data('init') == undefined) {
params.editor = sd_create_shixun_editor(params, id, type);
window._commentInput = params.editor;
sd_create_form(params);
params.cancel_btn.click(function () {
sd_reset_editor_form(params);
});
// 在react组件中hide
// params.submit_btn.click(function () {
// $(this).hide()
// });
// 非react环境才监听这个click
!window['__isR'] && params.submit_btn.click(function () {
var tContents = $("#comment_news_" + id).val();
if (tContents != undefined) {
var beforeImage = tContents.split("<img");
var afterImage = tContents.split("/>");
if (beforeImage[0] == "" && afterImage[1] == "") {
notice_box('不支持纯图片评论<br/>请在评论中增加文字信息');
return;
}
}
params.form.submit();
});
params.textarea.focus(function () {
params.editor.focus();
});
params.textarea.data('init', 1);
$(this).show();
}
});
// });
div_form = $("div[nhname='new_message_" + id + "']");
$(".ke-edit", div_form).css("height", "33px");
$(".ke-edit-iframe", div_form).css("height", "33px");
}