peclik / clipboard_image_paste

Redmine plugin for pasting cropped image from clipboard as an attachment.
264 stars 118 forks source link

Adding paste button in the "cbp_link_dlg" dialog box #17

Open helmerfud opened 11 years ago

helmerfud commented 11 years ago

Hello, thank you for this great plugin.

I propose you a little addon for more friendly GUI, a button to paste image link or macro thumbnail directly in the wiki edit textarea.

i do not know redmine plugin development and you'll find numbers of errors...

I hope this help you HelmerFud

here is the code: file ./assets/javascripts/InsertCodeInTextArea.js

// insert some text in a textarea at caret position
function InsertCodeInTextArea(areaId, textValue) {
    //Get textArea HTML control 
    var txtArea = document.getElementById(areaId);

    //IE
    if (document.selection) {
        txtArea.focus();
        var sel = document.selection.createRange();
        sel.text = textValue;
        return;
    }
    //Firefox, chrome, mozilla
    else if (txtArea.selectionStart || txtArea.selectionStart == '0') {
        var startPos = txtArea.selectionStart;
        var endPos = txtArea.selectionEnd;
        var scrollTop = txtArea.scrollTop;
        txtArea.value = txtArea.value.substring(0, startPos) + textValue + txtArea.value.substring(endPos, txtArea.value.length);
        txtArea.focus();
        txtArea.selectionStart = startPos + textValue.length;
        txtArea.selectionEnd = startPos + textValue.length;
    }
    else {
        txtArea.value += textArea.value;
        txtArea.focus();
    }
}
diff --git a/app/views/clipboard_image_paste/_add_form.html.erb b/app/views/clipboard_image_paste/_add_form.html.erb
index a0f48da..cebe196 100644
--- a/app/views/clipboard_image_paste/_add_form.html.erb
+++ b/app/views/clipboard_image_paste/_add_form.html.erb
@@ -54,11 +54,15 @@
 <!-- dialog to copy image link for wiki -->
 <div id="cbp_link_dlg" title="<%= l(:cbp_txt_copy_link) %>" style="display:none">
   <input type="text" id="cbp_image_link" readonly />
+  &nbsp;
+  <a class="icon icon-copy" onclick="InsertCodeInTextArea('content_text', document.getElementById('cbp_image_link').value);$(cbp_link_dlg).dialog('close');">Copy</a>
   <%
     if $clipboard_image_paste_has_jquery
   %>
   <p/>
   <input type="text" id="cbp_thumbnail_link" readonly />
+  &nbsp;
+  <a class="icon icon-copy" onclick="InsertCodeInTextArea('content_text', document.getElementById('cbp_image_link').value);$(cbp_link_dlg).dialog('close');">Copy</a>
   <%
     end
   %>
diff --git a/app/views/clipboard_image_paste/_headers.html.erb b/app/views/clipboard_image_paste/_headers.html.erb
index 722e9e9..063b0cc 100644
--- a/app/views/clipboard_image_paste/_headers.html.erb
+++ b/app/views/clipboard_image_paste/_headers.html.erb
@@ -11,6 +11,7 @@
 %>
 <%= javascript_include_tag 'jcrop-0.9.10.min.js',         :plugin => 'clipboard_image_paste' %>
 <%= javascript_include_tag 'clipboard_image_paste.js',    :plugin => 'clipboard_image_paste' %>
+<%= javascript_include_tag 'InsertCodeInTextArea.js',     :plugin => 'clipboard_image_paste' %>
 <%
   if !$clipboard_image_paste_has_jquery
 %>
peclik commented 11 years ago

Thank you very much for nice suggestion and the code. I am now a little bit in hurry to do other things so I will not add this any time soon. Probably better would be adding two buttons directly beside thumbnail.