记事本编辑器增加添加表情、代码块、图片等功能

Author: chenhengjie123

app/assets/javascripts/emoji-modal.coffee

@@ -83,7 +83,10 @@ window.EmojiModalView = Backbone.View.extend
     target = $(e.currentTarget)
     code = target.data('code')
     @saveFavoritEmoji(code)
-    window._topicView.insertString(":#{code}: ")
+    if window._topicView
+      window._topicView.insertString(":#{code}: ")
+    else if window._noteView
+      window._noteView.insertString(":#{code}: ")
     return false
 
   preview: (e) ->

app/assets/javascripts/notes.coffee

@@ -3,11 +3,19 @@ window.NoteView = Backbone.View.extend
   events:
     "click .editor-toolbar .edit a": "toggleEditView"
     "click .editor-toolbar .preview a": "togglePreviewView"
+    "click #note-upload-image": "browseUpload"
+    "click .insert-codes a": "appendCodesFromHint"
+    "click .pickup-emoji": "pickupEmoji"
 
   initialize: (opts) ->
     @parentView = opts.parentView
+    @initDropzone()
+    @initContentImageZoom()
+    @initCloseWarning()
+    @initComponents()
     $("<div id='preview' class='markdown' style='display:none;'></div>").insertAfter( $('#note_body') )
 
+
   toggleEditView: (e) ->
     $(e.target).parent().addClass('active')
     $('.preview a').parent().removeClass('active')
@@ -25,3 +33,191 @@ window.NoteView = Backbone.View.extend
       $('#preview').html(data)
       false
     false
+
+  initDropzone: ->
+    self = @
+    editor = $("textarea.note-editor")
+    editor.wrap "<div class=\"note-editor-dropzone\"></div>"
+
+    editor_dropzone = $('.note-editor-dropzone')
+    editor_dropzone.on 'paste', (event) =>
+      self.handlePaste(event)
+
+    dropzone = editor_dropzone.dropzone(
+      url: "/photos"
+      dictDefaultMessage: ""
+      clickable: true
+      paramName: "file"
+      maxFilesize: 20
+      uploadMultiple: false
+      headers:
+        "X-CSRF-Token": $("meta[name=\"csrf-token\"]").attr("content")
+      previewContainer: false
+      processing: ->
+        $(".div-dropzone-alert").alert "close"
+        self.showUploading()
+      dragover: ->
+        editor.addClass "div-dropzone-focus"
+        return
+      dragleave: ->
+        editor.removeClass "div-dropzone-focus"
+        return
+      drop: ->
+        editor.removeClass "div-dropzone-focus"
+        editor.focus()
+        return
+      success: (header, res) ->
+        self.appendImageFromUpload([res.url])
+        return
+      error: (temp, msg) ->
+        App.alert(msg)
+        return
+      totaluploadprogress: (num) ->
+        return
+      sending: ->
+        return
+      queuecomplete: ->
+        self.restoreUploaderStatus()
+        return
+    )
+
+  initComponents : ->
+    # 绑定文本框 tab 按键事件
+    $("textarea.note-editor").unbind "keydown.tab"
+    $("textarea.note-editor").bind "keydown.tab", "tab", (el) =>
+      return @insertSpaces(el)
+
+    $("textarea.note-editor").autogrow()
+
+  uploadFile: (item, filename) ->
+    self = @
+    formData = new FormData()
+    formData.append "file", item, filename
+    $.ajax
+      url: '/photos'
+      type: "POST"
+      data: formData
+      dataType: "JSON"
+      processData: false
+      contentType: false
+      beforeSend: ->
+        self.showUploading()
+      success: (e, status, res) ->
+        self.appendImageFromUpload([res.responseJSON.url])
+        self.restoreUploaderStatus()
+      error: (res) ->
+        App.alert("上传失败")
+        self.restoreUploaderStatus()
+      complete: ->
+        self.restoreUploaderStatus()
+
+  handlePaste: (e) ->
+    self = @
+    pasteEvent = e.originalEvent
+    if pasteEvent.clipboardData and pasteEvent.clipboardData.items
+      image = self.isImage(pasteEvent)
+      if image
+        e.preventDefault()
+        self.uploadFile image.getAsFile(), "image.png"
+
+  isImage: (data) ->
+    i = 0
+    while i < data.clipboardData.items.length
+      item = data.clipboardData.items[i]
+      if item.type.indexOf("image") isnt -1
+        return item
+      i++
+    return false
+
+  browseUpload: (e) ->
+    $(".note-editor").focus()
+    $('.note-editor-dropzone').click()
+    return false
+
+  showUploading: () ->
+    $("#note-upload-image").hide()
+    if $("#note-upload-image").parent().find("span.loading").length == 0
+      $("#note-upload-image").before("<span class='loading'><i class='fa fa-circle-o-notch fa-spin'></i></span>")
+
+  restoreUploaderStatus: ->
+    $("#note-upload-image").parent().find("span.loading").remove()
+    $("#note-upload-image").show()
+
+  appendImageFromUpload : (srcs) ->
+    src_merged = ""
+    for src in srcs
+      src_merged = "![](#{src})\n"
+    @insertString(src_merged)
+    return false
+
+  initContentImageZoom : () ->
+    exceptClasses = ["emoji", "twemoji"]
+    imgEls = $(".markdown img")
+    for el in imgEls
+      if exceptClasses.indexOf($(el).attr("class")) == -1
+        $(el).wrap("<a href='#{$(el).attr("src")}' class='zoom-image' data-action='zoom'></a>")
+
+    # Bind click event
+    if App.turbolinks || App.mobile
+      $('a.zoom-image').attr("target","_blank")
+    else
+      $('a.zoom-image').fluidbox
+        overlayColor: "#FFF"
+        closeTrigger: [ {
+          selector: 'window'
+          event: 'scroll'
+        } ]
+    true
+
+  initCloseWarning: () ->
+    text = $("textarea.closewarning")
+    return false if text.length == 0
+    msg = "离开本页面将丢失未保存页面!" if !msg
+    $("input[type=submit]").click ->
+      $(window).unbind("beforeunload")
+    text.change ->
+      if text.val().length > 0
+        $(window).bind "beforeunload", (e) ->
+          if $.browser.msie
+            e.returnValue = msg
+          else
+            return msg
+      else
+        $(window).unbind("beforeunload")
+
+  # 往话题编辑器里面的光标前插入两个空白字符
+  insertSpaces : (e) ->
+    @insertString('  ')
+    return false
+
+  # 往话题编辑器里面插入代码模版
+  appendCodesFromHint : (e) ->
+    link = $(e.currentTarget)
+    language = link.data("lang")
+    txtBox = $(".note-editor")
+    caret_pos = txtBox.caret('pos')
+    prefix_break = ""
+    if txtBox.val().length > 0
+      prefix_break = "\n"
+    src_merged = "#{prefix_break }```#{language}\n\n```\n"
+    source = txtBox.val()
+    before_text = source.slice(0, caret_pos)
+    txtBox.val(before_text + src_merged + source.slice(caret_pos+1, source.count))
+    txtBox.caret('pos',caret_pos + src_merged.length - 5)
+    txtBox.focus()
+    txtBox.trigger('click')
+    return false
+
+  insertString: (str) ->
+    $target = $(".note-editor")
+    start = $target[0].selectionStart
+    end = $target[0].selectionEnd
+    $target.val($target.val().substring(0, start) + str + $target.val().substring(end));
+    $target[0].selectionStart = $target[0].selectionEnd = start + str.length
+    $target.focus()
+
+  pickupEmoji: () ->
+    if !window._emojiModal
+      window._emojiModal = new EmojiModalView()
+    window._emojiModal.show()
+    false

app/views/notes/_editor_toolbar.html.erb

@@ -0,0 +1,16 @@
+<div class="editor-toolbar">
+  <div class="opts pull-right">
+    <a href="#" class="pickup-emoji"><i class="fa fa-smile-o"></i></a>
+    <span class="dropdown dropdown-small" id="editor-toolbar-insert-code">
+      <a href="#editor-toolbar-insert-code" data-toggle="dropdown" title="<%= t("notes.insert_codes") %>" href="#editor-toolbar-insert-code"><i class="fa fa-code"></i></a>
+      <ul class="dropdown-menu insert-codes" role="menu">
+        <%= insert_code_menu_items_tag %>
+      </ul>
+    </span>
+    <%= link_to(icon_tag("image"), "#", id: "note-upload-image", rel: "twipsy", title: t("notes.add_image") )%>
+  </div>
+  <ul class="nav nav-pills" style="clear:none;">
+    <li class="edit active"><%= link_to(t("common.editor_toolbar_edit"), "#") %></li>
+    <li class="preview"><%= link_to(t("common.editor_toolbar_preview"), "#") %></li>
+  </ul>
+</div>

app/views/notes/_form.html.erb

@@ -1,15 +1,10 @@
-<%= simple_form_for(@note, html: { class: "" }) do |f| %>
+<%= simple_form_for @note, html: { class: "form" } do |f| %>
     <%= render "shared/error_messages", target: @note %>
 
     <div class="form-group">
-      <div class="editor-toolbar">
-        <ul class="nav nav-pills">
-          <li class="edit active"><%= link_to(t("common.editor_toolbar_edit"), "#") %></li>
-          <li class="preview"><%= link_to(t("common.editor_toolbar_preview"), "#") %></li>
-        </ul>
-      </div>
+      <%= render "editor_toolbar" %>
 
-      <%= f.text_area :body, rows: 20, class: 'form-control topic-editor' %>
+      <%= f.text_area :body, rows: 20, class: 'form-control note-editor' %>
 
       <p class="help-block">
         <%= t("notes.please_use") %> <a href="<%= markdown_path %>" target="_blank">Markdown</a> <%= t("notes.document_format_to_write") %>

config/locales/nodes.en.yml

@@ -1,3 +1,5 @@
 "en":
   nodes:
-    hot_node: "Popular Node"
+    hot_node: "Popular Node"
+    add_image: "Upload image"
+    insert_codes: "Insert Codes"

config/locales/nodes.zh-CN.yml

@@ -1,3 +1,5 @@
 "zh-CN":
   nodes:
-    hot_node: "热门节点"
+    hot_node: "热门节点"
+    add_image: "上传图片"
+    insert_codes: "插入代码"

config/locales/nodes.zh-TW.yml

@@ -1,3 +1,5 @@
 "zh-TW":
   nodes:
     hot_node: "熱門節點"
+    add_image: "上傳圖片"
+    insert_codes: "插入代碼"