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

这篇具有很好参考价值的文章主要介绍了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.toymoban.com/news/detail-436536.html

到了这里,关于Marked.js让您的文档编辑更加轻松自如的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • PDF校对:让您的文件无瑕疵

    无论您是企业家、学生、教育者还是作家,我们都知道,提交或发布一个充满错误的PDF文件可能会给您的声誉或品牌带来严重损害。这就是为什么PDF校对如此关键的原因。现在,让我们深入了解PDF校对的重要性,以及如何确保您的文件尽可能完美。 什么是PDF校对? PDF校对是

    2024年02月11日
    浏览(37)
  • 打破无声世界:让您的网站会说话

    导语:在当今的互联网世界,技术创新日新月异,为广大开发者提供了无数便捷的工具。本文将为您介绍前端文本语音API,这一神奇的技术能够实现文字到语音的转换,为您的项目增添更多可能性。同时,我们还将为您提供10个吸引人的创意标题,让您在第一时间抓住用户的

    2024年02月03日
    浏览(39)
  • 让您的Nginx支持Http 3.0 协议

    Http 3.0 其实从最开设到正式的使用,已经过去了不少时间了,这块也是关系到我们现在数据安全一块很重要的发展,后续我们应该不在会有明文加密的协议的存在了吧,只是在加密的基础上,不断的升级现在的加密方法与技术升级,从而更高的保障我们的数据传输的高效与安

    2024年02月10日
    浏览(33)
  • 免费SSL证书:JoySSL让您的网站更安全

    在今天的数字化时代,保护网站和用户信息的安全至关重要。SSL(Secure Sockets Layer)证书通过加密网站与用户之间的通信,确保数据传输的安全性。让您拥有一个SSL加密的网站是至关重要的,但您可能会担心高昂的费用。不过,您不必为此担忧,因为有一些免费的SSL证书可供

    2024年02月06日
    浏览(48)
  • Python操作Word:轻松实现文档的创建、编辑与自动化处理

    引言: 在日常工作和学习中,我们经常需要使用Microsoft Word来创建、编辑和处理文档。然而,手动操作Word可能会耗费大量的时间和精力。为了提高工作效率,我们可以使用Python编程语言来操作Word文档,实现文档的自动化处理。本文将详细介绍如何使用Python操作Word,包括创建

    2024年01月21日
    浏览(42)
  • 揭秘高级控件技巧:让您的App与众不同君子兰

    简介 APP 的控件元素不仅涵盖了基础用户界面操作,还包括用户与应用程序中更复杂、功能丰富的空间之间的互动。这种交互远不止于简单的按钮或输入框。通过借助 Appium 的 Actions,能够完成对应用程序进行手势识别的交互。这意味着可以通过各种手势,如滑动、缩放、长按

    2024年04月11日
    浏览(34)
  • Unity学会使用高级功能Attributes(特性),让您的程序如虎添翼

    在Unity中,Attributes用于增强类、字段、方法等程序元素的行为或元数据信息,这些信息可以在编辑器界面中或者通过代码反射来访问和使用。以下是如何在Unity中使用内置及自定义Attributes的示例说明: 此Attribute允许将私有变量显示在Unity Inspector中,尽管它不是public。 使Insp

    2024年02月01日
    浏览(33)
  • 掌握SEO优化:让您的网站在搜索引擎中脱颖而出

    导言: 在当今数字化的时代,搜索引擎成为了人们获取信息的主要途径。作为网站拥有者,如何让您的网站在搜索引擎结果中排名靠前,成为用户首选,就显得尤为重要。这就需要掌握搜索引擎优化(SEO)的技巧。本文将为您介绍一些关键的SEO优化方法,帮助您提升网站在搜

    2024年02月11日
    浏览(70)
  • 将Apache服务与内网穿透结合,让您的网站可以公网访问

    Apache作为全球使用较高的Web服务器软件,它可以在几乎所有常见的计算机平台上运行。由于其卓越的跨平台性和高级安全性,又兼具快速、可靠且易于通过简单的API扩展而闻名,被广泛应用于Web服务器领域。本文主要分享一下在Windows系统如何安装与配置Apache服务,并结合内网

    2024年02月09日
    浏览(51)
  • 8款优秀的AI绘画工具,让您的绘画创作发挥无限想象力

    今天为大家推荐8款优秀的AI绘画工具,帮助您在绘画创作中发挥无限想象力。这些工具结合了人工智能技术和艺术创作,能够帮助您实现更高水平的绘画作品。无论您是专业画家还是刚刚入门的爱好者,这些AI绘画工具都能为您提供灵感和支持。让我们一起探索这些令人惊叹

    2024年02月05日
    浏览(59)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包