Marked.js让您的文档编辑更加轻松自如!

aki发表于:2020年03月13日 14:07:24更新于:2020年04月02日 11:04:36

kintone既可以保留更改记录,也有流程管理的功能,在公司内部分享会议记录啊、wiki等文档或学习资料等时非常的便利。

kintone还有丰富的文本编辑框,可以对内容进行编辑提高易读性。但是还是有不少人觉得如果能够使用Markdown编辑,将更加轻松,文本也将更加美观。※特别受程序员的欢迎:)

这次就向大家介绍如何使用Cybozu CDN中的marked来让kintone应用也可以使用Markdown。

Markdown是什么?

Markdown是用于编写文章或笔记等内容的标记语言。根据其规定的标记规则来编写后,可以显示标题、粗体字、斜体字等效果。

# 标题1
## 标题2
### 标题3
- 列表1
    - 列表2
            - 列表3

0015e7321c19b1d6621dbf71bd457c0

关于标记规则请参考以下链接。
https://hacpai.com/article/1583129520165

在会议记录的应用里添加Markdown功能

接下来我们试着在会议记录应用里添加Markdown的功能。
然后在多行文本框字段中用Markdown来编辑会议记录,保存后在详情页面的空白栏字段里显示编辑效果。

关于空白栏字段

空白栏字段在JavaScript自定义时常用于放置按钮等元素。
表单中可添加的字段(空白栏)

准备应用

应用的表单里设置如下。其实用到的只有“内容”字段和“markdown-display”的空白栏字段,其他的任意设置。(为了便于理解,这里字段名称和字段代码设为相同内容)

字段名称(字段代码)字段类型
日期日期
标题单行文本框
参加人员选择用户
内容多行文本框
markdown-display空白栏

 0015e6f1325a67b1441bfd0103bb0d7


JavaScript自定义

1. 导入marked

在JavaScript自定义页面导入marked。用的是前面提到的Cybouzu CDN。
https://js.cybozu.cn/markedjs/v0.3.5/marked.min.js

 0015e6f134c048e6c2555f612b38939

2. 编辑JavaScript

接下来用JavaScript进行自定义。marked本身像下面这样用起来非常的简单。

marked(字符串);

结合应用的字段,代码如下。

(function() {
    "use strict";
    kintone.events.on("app.record.detail.show", function(event) {
        var record = event.record;

        // 获取空白栏字段
        var spaceEl = kintone.app.record.getSpaceElement('markdown-display'); 

        // 在空白栏字段中显示markdown的内容
        spaceEl.innerHTML = marked(record['内容'].value);

        // 因为内容重复显示,因此把内容字段隐藏。
        kintone.app.record.setFieldShown('内容', false);

        return event;
    });
})();

将上面的JavaScript文件上传到设置页面。

非常简单吧。接下来试着用Markdown标记来编辑看看。
0015e6f137812197e2303e6748ef384

准备CSS

只是这样的话页面看过去不太美观。因为marked只是将用Markdown编写的内容转换成html格式,style还是原来kintone的标准风格。本次想给Markdown添加CSS,美化一下。

  1. 给markdown-display空白栏字段添加class
    添加class用于添加CSS。在刚才代码的基础上添加class。

    (function() {
        "use strict";
        kintone.events.on("app.record.detail.show", function(event) {
            var record = event.record;
    
            // 获取空白栏字段
            var spaceEl = kintone.app.record.getSpaceElement('markdown-display'); 
    
            // 在空白栏字段中显示markdown的内容
            spaceEl.innerHTML = marked(record['内容'].value);
    
            // 因为内容重复显示,因此把内容字段隐藏。
            kintone.app.record.setFieldShown('内容', false);
    
             // 添加class用于添加CSS
             spaceEl.classList.add('markdown-body');
    
            return event;
        });
    })();
  2. 准备CSS

    本次使用github-markdown-css。您也可以选择其他的CSS,也可以直接用这个。将下载下来的文件上传到kintone设置页面。github-markdown-css不是用于整个body,而是markdown-body类,非常的方便。

    CSS加完后效果显示如下。
    0015e6f1c826ae7a9dc33cb1e80a0a2

最后

一开头我们就提到了kintone用于保存和分享公司内部文档上非常的便利,再加上Markdown的话就更加如虎添翼了。请务必亲自尝试一下。

    注意:贴代码时请注意格式并使用"代码语言",与本文无关的问题请至“讨论社区”提问。