editor修改

This commit is contained in:
lizanle 2015-12-17 15:15:00 +08:00
parent b02cb6fdd4
commit 4bc68081ee
6 changed files with 215 additions and 19 deletions

View File

@ -31,4 +31,29 @@
<div class="cl"></div>
</li>
<% end %>
</ul>
</ul>
<div class="homepagePostReplyContainer borderBottomNone minHeight48">
<div class="homepagePostReplyPortrait mr15 imageFuzzy" id="reply_image_<%= @issue.id%>">
<%= link_to image_tag(url_to_avatar(User.current), :width => "33", :height => "33"), user_path(@issue.author_id), :alt => "用户头像" %>
</div>
<div class="homepagePostReplyInputContainer mb10">
<div nhname='new_message_<%= @issue.id%>' style="display:none;">
<%= form_for('new_form',:url => add_journal_issue_path(@issue.id),:method => "post", :remote => true) do |f|%>
<%#= kindeditor_tag :notes,"",:height=>"33",:minHeight=>"33",:editor_id=>"issues_reply_editor"%>
<!--<div class="cl"></div>-->
<input type="hidden" name="issue_id" value="<%=@issue.id%>"/>
<div nhname='toolbar_container_<%= @issue.id%>' ></div>
<div class="cl"></div>
<textarea placeholder="有问题或有建议,请直接给我留言吧!" style="display: none" nhname='new_message_textarea_<%= @issue.id%>' name="notes"></textarea>
<div class="cl"></div>
<span nhname='contentmsg_<%= @issue.id%>' class="fl"></span>
<a id="new_message_submit_btn_<%= @issue.id%>" href="javascript:void(0)" class="blue_n_btn fr" style="display:none;margin-top:6px;">发送</a>
<div class="cl"></div>
<% end %>
</div>
<!--<a href="javascript:void(0);" onclick="issues_reply_editor.sync();$(this).parent().submit();" class="homepagePostReplySubmit postReplySubmit fl mt5">发送</a>-->
<div class="cl"></div>
</div>

View File

@ -1,8 +1,9 @@
<% if @issue_id%>
<% if @issue_id%> //issue详情中回复
$("#reply_div_<%= @issue_id %>").html("<%= escape_javascript(render :partial => 'issues/issue_replies', :locals => {:issue => Issue.find( @issue_id),:replies_all_i=>0}) %>");
$(".homepagePostReplyBannerCount").html('回复(<%= Issue.find( @issue_id).journals.count %>)')
issues_reply_editor.html('')
sd_create_editor_from_data(<%= @issue.id%>, null, "100%");
<%else%>
$("#user_activity_<%= @user_activity_id%>").replaceWith("<%= escape_javascript(render :partial => 'users/project_issue', :locals => {:activity => @issue,:user_activity_id =>@user_activity_id}) %>");
init_activity_KindEditor_data(<%= @user_activity_id%>,"","87%");
init_activity_KindEditor_data(<%#= @user_activity_id%>,"","87%");
// sd_create_editor_from_data(<%= @issue.id%>, null, "100%");
<%end %>

View File

@ -1,6 +1,10 @@
<%= content_for(:header_tags) do %>
<%= import_ke(enable_at: true) %>
<%= javascript_include_tag 'create_kindeditor'%>
<% end %>
<script>
sd_create_editor_from_data(<%= @issue.id%>, null, "100%");
</script>
<script type="text/javascript">
$(function(){
$("#RSide").removeAttr("id");
@ -33,21 +37,9 @@
</div>
<div class="homepagePostReplyContainer borderBottomNone minHeight48">
<%= form_for('new_form',:url => add_journal_issue_path(@issue.id),:method => "post", :remote => true) do |f|%>
<div class="homepagePostReplyPortrait mr15 imageFuzzy" id="reply_image_<%= @issue.id%>">
<%= link_to image_tag(url_to_avatar(User.current), :width => "33", :height => "33"), user_path(@issue.author_id), :alt => "用户头像" %>
</div>
<input type="hidden" name="issue_id" value="<%=@issue.id%>"/>
<div class="homepagePostReplyInputContainer mb10">
<%= kindeditor_tag :notes,"",:height=>"33",:minHeight=>"33",:editor_id=>"issues_reply_editor"%>
<div class="cl"></div>
</div>
<a href="javascript:void(0);" onclick="issues_reply_editor.sync();$(this).parent().submit();" class="homepagePostReplySubmit postReplySubmit fl mt5">发送</a>
<div class="cl"></div>
<% end %>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

View File

@ -1,6 +1,7 @@
<% if @saved %>
$("#issue_detail").replaceWith('<%= escape_javascript(render :partial => 'issues/detail') %>')
$("#issue_edit").replaceWith('<%= escape_javascript(render :partial => 'issues/edit') %>')
sd_create_editor_from_data(<%= @issue.id%>, null, "100%");
$("#issue_detail").show();
$("#issue_edit").hide();
$("#reply_div_<%= @issue.id %>").html("<%= escape_javascript(render :partial => 'issues/issue_replies', :locals => {:issue => @issue,:replies_all_i=>0}) %>");

View File

@ -247,6 +247,7 @@
}
</script>
</div>
<div id="fade" class="black_overlay">123</div>
<%= render :partial => 'layouts/new_feedback' %>
<div id="ajax-indicator" style="display:none;">

View File

@ -0,0 +1,176 @@
//需求:表情栏可以隐藏显示,高度只要一点高
function sd_create_editor(params){
// var minHeight; //最小高度
var paramsHeight = params.height; //设定的高度
var id = arguments[1] ? arguments[1] : undefined;
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",
items:['emoticons','fontname',
'forecolor', 'hilitecolor', 'bold', '|', 'justifyleft', 'justifycenter', 'insertorderedlist','insertunorderedlist', '|',
'formatblock', 'fontsize', '|','indent', 'outdent',
'|','imagedirectupload'],
afterChange:function(){//按键事件
var edit = this.edit;
var body = edit.doc.body;
edit.iframe.height(paramsHeight);
console.log(" body.scrollHeight "+ body.scrollHeight)
console.log(" body.offsetHeight "+ body.offsetHeight)
console.log("(params.kindutil.IE ? body.scrollHeight : body.offsetHeight)"+(params.kindutil.IE ? body.scrollHeight : body.offsetHeight))
this.resize(null, Math.max((params.kindutil.IE ? body.scrollHeight : (params.kindutil.GECKO ? body.offsetHeight+26:body.offsetHeight)) , paramsHeight));
},
afterBlur:function(){
//params.toolbar_container.hide();
sd_check_editor_form_field({content:this,contentmsg:params.contentmsg,textarea:params.textarea});
if(this.edit.html()=="") {
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("94%", 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(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();
//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();
}
}).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;
KindEditor.ready(function (K) {
$("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);
sd_create_form(params);
params.cancel_btn.click(function () {
sd_reset_editor_form(params);
});
params.submit_btn.click(function () {
params.form.submit();
});
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");
}