一系列的编辑器增强：工具栏提示栏现在是中文；支持了 Markdown table 和 strikethrough 效果

dotnetclub-net · Oct 13, 2018 · d0add5b · d0add5b
1 parent 78379ba
commit d0add5b
Show file tree

Hide file tree

Showing 11 changed files with 78 additions and 33 deletions.
diff --git a/src/Discussion.Web/Services/Markdown/MarkdownConverter.cs b/src/Discussion.Web/Services/Markdown/MarkdownConverter.cs
@@ -1,5 +1,6 @@
 using System.Collections.Concurrent;
 using Markdig;
+using Markdig.Extensions.EmphasisExtras;
 
 namespace Discussion.Web.Services.Markdown
 {
@@ -19,6 +20,8 @@ private static MarkdownPipeline GetMarkdownPipeline(int maxHeadingLevel)
             {
                 var markdownPipelineBuilder = new MarkdownPipelineBuilder()
                     .DisableHtml()
+                    .UsePipeTables()
+                    .UseEmphasisExtras(EmphasisExtraOptions.Strikethrough)
                     .UseAutoLinks();
                 markdownPipelineBuilder
                     .Extensions

diff --git a/src/Discussion.Web/wwwroot/lib/package.json b/src/Discussion.Web/wwwroot/lib/package.json
@@ -13,6 +13,7 @@
     "marked": "^0.5.1",
     "prismjs": "1.4.1",
     "summernote": "0.8.1",
-    "turndown": "4.0.1"
+    "turndown": "4.0.1",
+    "turndown-plugin-gfm": "^1.0.2"
   }
 }
diff --git a/src/Discussion.Web/wwwroot/lib/yarn.lock b/src/Discussion.Web/wwwroot/lib/yarn.lock
@@ -599,6 +599,11 @@ tunnel-agent@^0.6.0:
   dependencies:
     safe-buffer "^5.0.1"
 
+turndown-plugin-gfm@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/turndown-plugin-gfm/-/turndown-plugin-gfm-1.0.2.tgz#6f8678a361f35220b2bdf5619e6049add75bf1c7"
+  integrity sha512-vwz9tfvF7XN/jE0dGoBei3FXWuvll78ohzCZQuOb+ZjWrs3a0XhQVomJEb2Qh4VHTPNRO4GPZh0V7VRbiWwkRg==
+
 [email protected]:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/turndown/-/turndown-4.0.1.tgz#1383dd01ac8d96fa106a7f13e0b0a7977588131a"

diff --git a/src/Discussion.Web/wwwroot/scripts/_entry-js.js b/src/Discussion.Web/wwwroot/scripts/_entry-js.js
@@ -4,6 +4,7 @@
 import '../lib/node_modules/jquery';
 import '../lib/node_modules/bootstrap';
 import '../lib/node_modules/summernote';
+import '../lib/node_modules/summernote/dist/lang/summernote-zh-CN.min';
 
 import '../lib/node_modules/turndown';
 import '../lib/node_modules/prismjs';

diff --git a/src/Discussion.Web/wwwroot/scripts/editor/html-tag-filter.js b/src/Discussion.Web/wwwroot/scripts/editor/html-tag-filter.js
@@ -189,12 +189,19 @@ function htmlFragmentOptions(){
         'em',
         'i',
         'strike',
+        'del',
         'ul',
         'ol',
         'li',
         'a',
         'img',
-        'pre'
+        'pre',
+        'table',
+        'thead',
+        'tbody',
+        'th',
+        'tr',
+        'td'
     ];
     var attributes = {
         'a': ['href', 'title', 'name'],

diff --git a/src/Discussion.Web/wwwroot/scripts/editor/insert-code.js b/src/Discussion.Web/wwwroot/scripts/editor/insert-code.js
@@ -1,5 +1,5 @@
 
-export function CodeButton(context) {
+export function insertCodeButton(context) {
     return $.summernote.ui.button({
         contents: '<i class="note-icon-code"/>',
         tooltip: '插入代码',

diff --git a/src/Discussion.Web/wwwroot/scripts/editor/markdown-support.js b/src/Discussion.Web/wwwroot/scripts/editor/markdown-support.js
@@ -1,4 +1,5 @@
 import TurndownService from "../../lib/node_modules/turndown"
+import { tables as tdTables } from "../../lib/node_modules/turndown-plugin-gfm"
 import Markd from "../../lib/node_modules/marked"
 
 
@@ -22,6 +23,12 @@ export class MarkdownCodeViewModule {
                 codable.val(md);
             }else{
                 const md = codable.val();
+                Markd.setOptions({
+                    gfm: true,
+                    breaks: false,
+                    headerIds: false,
+                    silent: true                    
+                });
                 const html = Markd(md);
                 context.layoutInfo.editable.html(html);
                 context.triggerEvent('change');
@@ -41,33 +48,19 @@ export function viewMarkdownButton(context) {
     }).render();
 }
 
-export function convertToMarkdown(htmlContent) {
+let turndownService;
+function createTurnDownService(){
+    if(turndownService){
+        return turndownService;
+    }
+
     const converters = [
         {
             filter: ['strike', 'del', 's'],
             replacement: function (content) {
                 return '~~' + content + '~~';
             }
         },
-        {
-            filter: ['i', 'em'],
-            replacement: function (content) {
-                return '*' + content + '*';
-            }
-        },
-        {
-            filter: ['b', 'strong'],
-            replacement: function (content) {
-                return '**' + content + '**';
-            }
-        }, {
-            filter: ['br'],
-            replacement: function () {
-                // http://stackoverflow.com/a/28633712/1817042
-                return '&nbsp;\n\n';
-            }
-        },
-        // Fenced code blocks
         {
             filter: ['pre'],
             replacement: function (content, node) {
@@ -77,9 +70,20 @@ export function convertToMarkdown(htmlContent) {
             }
         }
     ];
-    const turndownService = new TurndownService({codeBlockStyle: 'fenced'});
+    turndownService = new TurndownService({
+        codeBlockStyle: 'fenced',
+        emDelimiter: '*',
+        strongDelimiter: '**',
+        headingStyle: 'atx',
+        hr: '---'
+    });
     $.each(converters, function (i, rule) {
         turndownService.addRule(rule.filter.join(''), rule);
     });
-    return turndownService.turndown(htmlContent);
+    turndownService.use(tdTables);
+    return turndownService;
+}
+export function convertToMarkdown(htmlContent) {
+    var turnDown = createTurnDownService();
+    return turnDown.turndown(htmlContent);
 }
diff --git a/src/Discussion.Web/wwwroot/scripts/markdown-editor.js b/src/Discussion.Web/wwwroot/scripts/markdown-editor.js
@@ -61,8 +61,8 @@ export function setupEditor() {
 }
 
 function defaultEditorOptions(){
-    var defaultOptions = $.extend({}, $.summernote.options);
-    var options = $.extend({}, defaultOptions, {
+    var options = $.extend({}, $.summernote.options, {
+        lang: 'zh-CN',
         toolbar: [
             ['style', ['style']],
             ['format', ['bold', 'italic', 'strikethrough', 'clear']],
@@ -96,13 +96,11 @@ function defaultEditorOptions(){
         callbacks: {
             onChange: function () { },
             onEnter: function(ev){
-                ev.preventDefault();
-                ev.stopPropagation();
-
                 var editor = $(this).data('summernote');
                 var patchedPre = InsertCode.patchPreTag.apply(this, [editor, ev]);
-                if(!patchedPre){
-                    editor.invoke('editor.insertParagraph');
+                if(patchedPre){
+                    ev.preventDefault();
+                    ev.stopPropagation();
                 }
             },
             onPaste : function (ev) {
@@ -139,7 +137,7 @@ function defaultEditorOptions(){
             }
         },
         buttons:{
-            insertCode: InsertCode.CodeButton,
+            insertCode: InsertCode.insertCodeButton,
             markdown: MD.viewMarkdownButton
         }
     });

diff --git a/src/Discussion.Web/wwwroot/stylesheets/_symbols.scss b/src/Discussion.Web/wwwroot/stylesheets/_symbols.scss
@@ -25,3 +25,16 @@ $text-color:                    #333;
 $fa-font-path:                "../lib/node_modules/@fortawesome/fontawesome-free/webfonts";
 @import "../lib/node_modules/@fortawesome/fontawesome-free/scss/variables";
 
+
+
+@mixin content_table(){
+  table {
+    min-width: 40%;
+    max-width: 90%;
+
+    td, th {
+      border: 1px solid $gray-body-background;
+      padding: 5px;
+    }
+  }
+}
diff --git a/src/Discussion.Web/wwwroot/stylesheets/topic-create.scss b/src/Discussion.Web/wwwroot/stylesheets/topic-create.scss
@@ -40,6 +40,15 @@
       color: $gray;
     }
   }
+
+  .note-editor.note-frame .note-editing-area .note-editable{
+    @include content_table
+  }
+
+  .note-editor.note-frame .note-editing-area .note-codable{
+    background-color: $gray-content-hover;
+    color: $text-color;
+  }
 }
 
 .topic-submit-section{

diff --git a/src/Discussion.Web/wwwroot/stylesheets/topic-show.scss b/src/Discussion.Web/wwwroot/stylesheets/topic-show.scss
@@ -43,6 +43,8 @@
     & *{
       max-width: 100%;  
     }
+
+    @include content_table
   }
 
 }
@@ -94,6 +96,8 @@
         font-size: 12px;
         margin-top: 15px;
       }
+
+      @include content_table
     }
   }
 }