乐趣区

关于javascript:Markedjs让您的文档编辑更加轻松自如


低代码利用平台——kintone 既能够保留更改记录,也有流程治理的性能,在公司外部分享会议记录啊、wiki 等文档或学习材料等时十分的便当。

kintone 还有丰盛的文本编辑框,能够对内容进行编辑进步易读性。然而还是有不少人感觉如果可能应用 Markdown 编辑,将更加轻松,文本也将更加好看。※特地受程序员的欢送:)

这次就向大家介绍如何应用 Cybozu CDN 中的 marked 来让 kintone 利用也能够应用 Markdown。

一、Markdown 是什么?

Markdown 是用于编写文章或笔记等内容的标记语言。依据其规定的标记规定来编写后,能够显示题目、粗体字、斜体字等成果。

 题目 1

 题目 2

 题目 3

– 列表 1
    – 列表 2
            – 列表 3


对于标记规定请参考以下链接。
Markdown 使用指南 – 根底语法 – 链滴

二、在会议记录的利用里增加 Markdown 性能

接下来咱们试着在会议记录利用里增加 Markdown 的性能。
而后在多行文本框字段中用 Markdown 来编辑会议记录,保留后在详情页面的空白栏字段里显示编辑成果。

1、对于空白栏字段

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

2、筹备利用

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

3、JavaScript 自定义

1. 导入 marked

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

2. 编辑 JavaScript

接下来用 JavaScript 进行自定义。marked 自身像上面这样用起来十分的简略。
1 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;

    });

})();

3. 筹备 CSS

本次应用 github-markdown-css。您也能够抉择其余的 CSS,也能够间接用这个。将下载下来的文件上传到 kintone 设置页面。github-markdown-css 不是用于整个 body,而是 markdown-body 类,十分的不便。

CSS 加完后成果显示如下。


最初

一结尾咱们就提到了 kintone 用于保留和分享公司外部文档上十分的便当,再加上 Markdown 的话就更加锦上添花了。请务必亲自尝试一下。

更多利用请查看: 开发者网站 —Marked.js 

退出移动版