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

2024-05-09 02:10:26

低代码应用平台——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”的空白栏字段，其他的任意设置。（为了便于理解，这里字段名称和字段代码设为相同内容）

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(字符串);`

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

(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标记来编辑看看。

4、准备CSS

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

(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;

});

})();

准备CSS

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

CSS加完后效果显示如下。

最后

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

更多应用请查看：开发者网站

Marked.js让您的文档编辑更加轻松自如！相关推荐

自己用js做的在线word文档编辑器oarword-doc/docx文档编辑、导出导出
分享自己用js做的在线word文档编辑器oarword 支持基本doc/docx文档编辑,导出和导出,类似google docs和zoho 源码分享在Github:https://github.com ...
SpringBoot集成onlyoffice实现word文档编辑保存 [ 转载 ]
原文地址说明 onlyoffice为一款开源的office在线编辑组件,提供word/excel/ppt编辑保存操作以下操作均基于centos8系统,officeonly镜像版本7.1.2.23( ...
一款美观实用的在线文档编辑系统，支持Markdown语法
说明:最近博主对文档程序小有需求,找了很久发现都是单页,而且还不支持移动端,不是很理想,所以就专门花了半天时间,写了一个,该文档程序基于graphql.nuxtjs.mongodb.keystonej ...
视频录像拍照加水印在线文档编辑
主题:最近又学到的知识吧,虽然以前也有做过这次记录一下一 .场景1:视频录像拍照加水印知识点: 1.用标签<video>, navigator.mediaDevices.getUse ...
PDF文字怎么编辑，PDF文档编辑方法
有时候遇到PDF文件不是自己制作的或者是制作的有点匆忙,会有文字遗漏或者打错的时候,我们使用就会有点麻烦就需要把文件中的文字进行编辑修改,那么具体怎么做呢?小伙伴们都挺好奇吧,今天就来跟大家分享一下. ...
python在线读-文档编辑工具Markdown
Markdown是一款非常简单高效的文档编辑工具,只用学习几个标签就可以设计非常简单的html文档. Markdown开发工具推荐 Windows:MarkdownPad,需要安装 Microsoft ...
jquery.cookie 使用文档，$.cookie() 文档教程， js 操作 cookie 教程文档。
jquery.cookie 使用文档,$.cookie() 文档教程, js 操作 cookie 教程文档. jquery.cookie中的操作: jquery.cookie.js是一个基于jquer ...
java改写模式_Java基于状态模式实现的文档编辑模式切换功能实例
本文实例讲述了Java基于状态模式实现的文档编辑模式切换功能.分享给大家供大家参考,具体如下: 一模式定义状态模式:当一个对象的内在状态改变时允许改变其行为,这个对象看起来就像是改变了其类. 二 ...
开源在线文档编辑工具_开源暑期实习，在线教育新工具等
开源在线文档编辑工具开源新闻让您阅读愉快. 2014年2月24日至28日在本周的开源新闻摘要中,我们将介绍慕尼黑在转储专有软件,Mozilla的移动Firefox OS上的隐私等方面的进展. 慕尼 ...
Linux 编辑doc,Linux命令大全(文档编辑).doc
Linux命令大全(文档编辑) 文档编辑文档编辑-col 功能说明:过滤控制字符. 语法:col [-bfx][-l] 补充说明:在许多UNIX说明文件里,都有RLF控制字符.当我们运用shell特 ...

最新文章

热门文章