首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

怎么让TinyMCE编辑器支持Markdown语法

TinyMCE是一款富文本编辑器,它默认不支持Markdown语法。要让TinyMCE编辑器支持Markdown语法,需要集成一个Markdown插件。常用的Markdown插件有两款:Marked和Pandoc。其中,Marked是一款轻量级的Markdown解析器,可以很方便地集成到TinyMCE编辑器中;而Pandoc支持更多的Markdown语法,并且可以将Markdown转换成多种格式,集成到TinyMCE编辑器中需要进行相应的配置。

这里以Marked为例,介绍如何让TinyMCE编辑器支持Markdown语法。首先,需要在TinyMCE编辑器中引入Marked插件。具体步骤为:

  1. 引入Marked插件和相关依赖:
代码语言:html
复制
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/header@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/list@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/checklist@latest"></script>
  1. 在TinyMCE编辑器的初始化配置中,添加对Marked插件的配置:
代码语言:javascript
复制
tinymce.init({
    selector: 'textarea',
    plugins: 'marked',
    toolbar: 'marked',
    setup: function (editor) {
      editor.on('init', function(){
        editor.getDoc().vendorCode += `
          function toggleMarked() {
            var cm = this.codemirror;
            var data = cm.getValue();
            var marked = window.marked(data);
            cm.setValue(marked);
          }
        `;
      });
    },
    toolbar_sticky: true,
});

以上就是让TinyMCE编辑器支持Markdown语法的基本步骤。当用户输入Markdown格式的文本时,可以使用编辑器提供的"Toggle marked"按钮,将Markdown格式的文本转换为HTML格式的文本。

参考链接:

  1. Marked官网:https://marked.js.org/
  2. TinyMCE官网:https://www.tiny.cloud/
  3. TinyMCE编辑器集成Marked插件的实现:https://github.com/tinymce/tinymce-marked
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Markdown 编辑器语法指南

基本技巧 代码 如果你只想高亮语句中的某个函数名或关键字,可以使用 `function_name()` 实现 通常编辑器根据代码片段适配合适的高亮方法,但你也可以用 ``` 包裹一段代码,并指定一种语言...cs, css, d, delphi, django, erlang, go, haskell, html, http, ini, java, javascript, json, lisp, lua, markdown...列表里代码段: ``` 前面四个空格,之后按代码语法 ``` 书写 ``` 或者直接空八个,引入代码块 引用 普通引用 > 引用文本前使用 [大于号+空格]...然后在文档的结尾位变量赋值(网址) 也可以使用 HTML 的图片语法来自定义图片的宽高大小 <img src="htt://example.com/sample.png" width="400" height...公式 当你需要在编辑器中插入数学公式时,可以使用两个美元符 $$ 包裹 TeX 或 LaTeX 格式的数学公式来实现。提交后,问答和文章页会根据需要加载 Mathjax 对数学公式进行渲染。

75400
  • 第 09 篇:博客支持 Markdown 语法和代码高亮

    作者:HelloGitHub-追梦人物 文中涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库 点击本文最下方的“阅读原文”即可获取 为了博客文章具有良好的排版,显示更加丰富的格式...,我们使用 Markdown 语法来书写博文。...由于 Markdown 语法简单直观,不用超过 5 分钟就可以轻松掌握常用的标记语法,因此大家青睐使用 Markdown 书写 HTML 文档。下面让我们的博客也支持使用 Markdown 写作。...比如将图片上传到七牛云这样的云存储服务器,然后通过 Markdown 的图片语法将图片引入。Markdown 引入图片的语法为:![图片说明](图片链接)。...代码高亮 程序员写博客免不了要插入一些代码,Markdown语法使我们容易地书写代码块,但是目前来说,显示的代码块里的代码没有任何颜色,很不美观,也难以阅读,要是能够像代码编辑器里一样代码高亮就好了

    57430

    Markdown编辑器【基本语法】5.30

    这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。...新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你用它写博客: 全新的界面设计 ,将会带来全新的写作体验; 在创作中心设置你喜爱的代码高亮样式...,Markdown 将代码片显示选择的高亮样式 进行展示; 增加了 图片拖拽 功能,你可以将本地的图片直接拖拽到编辑区域直接展示; 全新的 KaTeX数学公式 语法; 增加了支持甘特图的mermaid语法...图片: 带尺寸的图片: 居中的图片: 居中并且带尺寸的图片: 当然,我们为了用户更加便捷,我们增加了图片拖拽功能。...: 图片 关于 Mermaid 语法,参考 这儿, FLowchart流程图 我们依旧会支持flowchart的流程图: 图片 关于 Flowchart流程图 语法,参考 这儿.

    1.6K20

    支持 Markdown 语法和代码高亮

    为了博客文章具有良好的排版,显示更加丰富的格式,我们使用 Markdown 语法来书写我们的博文。...由于 Markdown 语法简单直观,不用超过 5 分钟就可以掌握常用的标记语法,因此大家青睐使用 Markdown 书写 HTML 文档。下面让我们的博客也支持使用 Markdown 书写。...比如将图片上传到七牛云这样的云存储服务器,然后通过 Markdown 的图片语法将图片引入。Markdown 引入图片的语法为:![图片说明](图片链接)。...image.png 代码高亮 程序员写博客免不了要插入一些代码,Markdown语法使我们容易地书写代码块,但是目前来说,显示的代码块里的代码没有任何颜色,很不美观,也难以阅读,要是能够像我们的编辑器里一样代码高亮就好了...确保代码块的 Markdown 语法正确,特别是指明该代码块的语言类型,具体请参见上文中 Markdown语法示例。

    2.7K70

    WordPress用插件实现MarkDown语法支持

    WordPress默认不支持MarkDown标记(不知道最新版实现没有),虽然提供了很多第三方MarkDown插件,但都无法达到满意的效果。...一直以来都是用HTML标签来写文章,虽然排版效果好,但是写起来真的很费劲,效率也不高,于是想到一个法子WordPress更好的支持MarkDown语法,并且不需要安装额外的插件。...下载Parsedown Parsedown可以将MarkDown内容解析为HTML,如果内容已经是HTML则不进行解析,有了Parsedown的支持,在发表WordPress文章的时候不仅兼容原来的文本模式...(HTML)也可以使用MarkDown语法写作,两者互不冲突。...切换到文本模式 WordPress文本模式支持HTML写作,通过上面的步骤文本模式已经完美支持MarkDown语法。 其它说明 此方法操作简单,无需安装额外的插件,完美兼容原来的文本模式。

    95720

    Typecho安装TinyMCE美化版富文本编辑器 取代Markdown

    因为采用的是极简Markdown编辑器,对于我们有些习惯Markdown编辑文档的朋友来说是熟悉的,但是对于大部分网友、博主来说是非常不习惯的,包括老蒋也是不习惯的。...我们还是比较习惯富文本编辑器模式。...这几天老蒋在整理Typecho相关常用的插件的时候,看到这款来自网友分享的Typecho TinyMCE 美化版富文本编辑器插件,采用的是TinyMCE + Prettify 富文本编辑器支持语法高亮等功能.../qirishuzhai.com/usr/uploads/2020/03/2287149370.zip 备用地址:http://tools.laobuluo.com/typecho/plugins/TinyMCE.zip...我们可以看到富文本编辑器是不是比之前MD编辑器感觉好很多?如果有需要更换Typecho编辑器的话可以试试这个。

    1.5K20

    Typecho上的Markdown 编辑器语法指南

    Markdown是一种纯文本格式的标记语言 优点: 1.因为是纯文本,所以只要支持Markdown的地方都能获得一样的编辑效果,可以作者摆脱排版的困扰,专心写作。 2.操作简单。...而 Markdown只需要在标题内容前加#即可 缺点: 1.需要记一些语法(当然,是很简单。五分钟学会)。 2.有些平台不支持 Markdown 编辑模式。...支持六级标题。 注:标准语法一般在#后跟个空格再写文字。...[图片](https://itggg.cn/cdn/admin.svg) 点击跳转至百度 6.列表 Markdown支持有序列表和无序列表两种形式,注意:- + 跟内容之间都要有一个空格。...编辑器语法指南 - Flat tire - Powered by Typecho <meta name="robots" content="noindex, nofollow

    1.2K40

    Markdown 额外语法支持-有道云笔记

    有道云笔记内置Markdown编辑器和使用指南,非技术类笔记用户,千万不要被「标记」、「语言」吓到,Markdown语法十分简单,常用的标记符号不超过十个,用于日常写作记录绰绰有余,不到半小时就能完全掌握...具体呈现如下: 1-2待办事项 流程图 在 Markdown 中,一段流程图语法以 “开头,以 “ 结尾。...①对框线形状的调整,如, ++ ②对箭头的调整,如, +++ 只要充分掌握该语法,再复杂的流程图也完全能用Markdown书写!...以如下甘特图为例说明, 甘1 与流程图一样,Markdown中,甘特图的语法也是以 “开头,以 “ 结尾。 在 “` 后另起一行,书写 gantt ,用以确定将要绘制的是甘特图。...总结 熟悉语法之后,还是建议大家少使用辅助工具栏,尽量自己键入代码,感受纯文本之美。当然,有道云笔记的 Markdown 还能支持制作待办事项,书写流程图、序列图、甘特图,书写数学公式等。

    84820

    Markdown Nice - 支持微信公众号等排版的 Markdown 编辑器

    引言 日常进行公众号写作的时候, 有很多进行排版的工作, 这样的工作可以用 H5在线制作工具 进行, 或者干脆用公众号编辑器, 但是作为一个程序员, Markdown 转 html 就成了最好的决策....Markdown Nice 是一款支持自定义样式的 Markdown 编辑器, 支持微信公众号、知乎和稀土掘金....效果展示 图片 过程 使用 将 Markdown 文档放入 Markdown Nice 的编辑器中, 右侧可以看到 html 形式的预览效果, 无登录状态可以直接以富文本复制粘贴于其他编辑器....而登录后, 可以使用最右侧按扭根据不同的平台复制响应的 html 字符, 粘贴于相应的平台编辑器....总而言之, Markdown Nice 是一款优秀的 Markdown 排版编辑器, 足以应对公众号排版编辑. 引用 Markdown | 排版变 Nice 棘手的微信公众号编辑器-Finclip

    1.4K30
    领券