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

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

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

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

一、Markdown是什么?

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

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

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

 

关于标记规则请参考以下链接。
Markdown 使用指南 - 基础语法 - 链滴

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

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

1、关于空白栏字段

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

2、准备应用

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

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

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

 3、JavaScript自定义

1. 导入marked

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

Marked.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加完后效果显示如下。

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

最后

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

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

原文链接:https://www.cnblogs.com/cybozu/p/17381660.html

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:Marked.js让您的文档编辑更加轻松自如 - Python技术站

(0)
上一篇 2023年5月8日
下一篇 2023年5月8日

相关文章

  • js实现数组转树示例

    下面是详细讲解“JS实现数组转树示例”的攻略: 什么是数组转树 数组转树是将一个平铺的数组转换成一颗树形结构,该过程通常用于前端渲染树形结构。通常一个具有父子关系的数据明显都有一个parent和children属性,通常这种结构主要应用于分类、目录等有层级结构的数据类型中,例如文件夹、部门机构等。对于这种关系型结构数据,前后端常用的数据传输包括json格式和…

    JavaScript 2023年5月27日
    00
  • window.setInterval()方法的定义和用法及offsetLeft与style.left的区别

    一、window.setInterval()方法的定义和用法 window.setInterval()方法是JavaScript中的一个计时器函数,用于周期性地重复执行指定代码,间隔时间由用户自定义。它的语法如下: window.setInterval(func, delay, arg1, arg2, …) 参数说明: func:周期性执行的代码块,可以…

    JavaScript 2023年6月11日
    00
  • JavaScript表单验证实例之验证表单项是否为空

    下面给您讲解JavaScript表单验证实例之验证表单项是否为空的完整攻略。 一、需求背景 在表单中,通常存在必填项,用户必须填写才能提交表单数据。否则,如果数据为空,就不能正常提交表单数据,会影响用户体验。因此,我们需要通过JavaScript对表单中必填项进行验证,确保用户输入数据的完整性。 二、解决方案 对于验证表单项是否为空,我们可以使用JavaSc…

    JavaScript 2023年6月10日
    00
  • JS字符串长度判断,超出进行自动截取的实例(支持中文)

    实现JS字符串长度判断并进行自动截取支持中文的方法主要涉及以下步骤: 获取字符串长度JavaScript中获取字符串长度的方法是通过字符串的length属性获取,例如 var str = ‘Hello World’; console.log(str.length); // 11 判断是否超出限制根据所需的字符串长度限制和当前字符串长度,可以使用if语句或三元…

    JavaScript 2023年5月28日
    00
  • Javascript json object 与string 相互转换的简单实现

    下面详细讲解一下”Javascript JSON Object与String相互转换的简单实现”的攻略。 什么是JSON? JSON全称为JavaScript Object Notation,是现在比较流行的一种轻量级的数据交换格式。它使用完全独立于编程语言的文本格式来表示数据。我们可以通过JavaScript中的JSON对象来解析JSON数据,并进行序列化…

    JavaScript 2023年5月27日
    00
  • Js操作DOM元素及获取浏览器高宽的简单方法

    Js操作DOM元素及获取浏览器高宽的简单方法的攻略如下: 操作DOM元素 选择元素 在Javascript中,选择DOM元素是很重要的一步。有很多方法可以选择DOM元素,但是最常用的方法是使用document.querySelector和document.querySelectorAll这两个方法。 document.querySelector方法返回一个与…

    JavaScript 2023年6月10日
    00
  • DOM 事件的深入浅出(一)

    以下是详细讲解“DOM 事件的深入浅出(一)”的完整攻略。 什么是 DOM 事件 DOM 事件指的是由 HTML 页面中的元素触发的事件。例如,当用户在网页上点击一个按钮时,会触发相应的事件处理程序。 DOM 事件的分类 DOM 事件按照产生的顺序可以分为三种类型: 冒泡型事件(Bubbling events):从目标元素开始向外冒泡,直到传递到文档根节点。…

    JavaScript 2023年6月10日
    00
  • JS创建或填充任意长度数组的小技巧汇总

    我来为您详细讲解“JS创建或填充任意长度数组的小技巧汇总”的完整攻略。 标题 JS创建或填充任意长度数组的小技巧汇总 简介 数组(Array)是JavaScript中一个非常常用的数据类型,通过数组我们可以存储一组相关的数据,并且可以通过索引进行访问。但是,在实际编程中,我们经常会遇到一些需求,比如需要创建固定长度的数组或者需要填充任意长度的数组,这时就需要…

    JavaScript 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部