如何使用TinyMCE实现Markdown编辑器？

Question

我想添加一个 Markdown 编辑器，供用户将他们的答案发布到我的页面中。我找到了TinyMCE，但它有一个问题：我不知道如何用TinyMCE实现markdown编辑器。

有人有这方面的经验吗？请告诉我如何用它设置 Markdown 编辑器。

Answer 1

看起来文本模式插件可以做到这一点：

此插件匹配文本中的特殊模式，并在这些模式上应用格式或执行命令。

…

tinymce.init({
  selector: "textarea",  // change this value according to your HTML
  plugins: 'textpattern',
  textpattern_patterns: [
     {start: '*', end: '*', format: 'italic'},
     {start: '**', end: '**', format: 'bold'},
     {start: '#', format: 'h1'},
     {start: '##', format: 'h2'},
     {start: '###', format: 'h3'},
     {start: '####', format: 'h4'},
     {start: '#####', format: 'h5'},
     {start: '######', format: 'h6'},
     {start: '1. ', cmd: 'InsertOrderedList'},
     {start: '* ', cmd: 'InsertUnorderedList'},
     {start: '- ', cmd: 'InsertUnorderedList'}
  ]
});

请注意，此处的

plugins

键修复了上游文档中的拼写错误，该文档使用

plugin

代替。

Answer 2

TinyMCE 目前不支持其编辑器的 Markdown 模式，但是我最近需要一个 Markdown 编辑器并想使用 tinymce。

您必须将 markdown 包添加到您的项目中。我推荐 MarkdownIt，它是我从此推荐列表中找到的。您可以使用链接中的任何一项建议，只需在下面的代码示例中使用您的 Markdown 库更改 MarkdownIt 的用法即可。

我不推荐 Chris 的方法，因为它对用户不太友好 - 用户需要能够保存带有 markdown 的文本，并期望它在渲染时呈现正确的元素。必须在每个元素后按空格键或回车键才能看到它变成所见即所得样式元素，这对用户来说并不友好。因此，如果您采用这种方法，您实际上应该删除 textpattern 插件和 textpattern_patterns 配置。

您需要做的是在您的小型配置中配置 setup 函数来侦听更改事件，然后通过您的 markdown 解析器传递内容，然后将值返回给需要的任何内容。您还需要将菜单栏、工具栏和状态栏设置为 false。

var editorHandlerTimeout;
var MarkdownIt = require('markdown-it')
tinymce.init({
    el: 'el',
    menubar: false,
    toolbar: false,
    statusbar: false,
    setup: function (editor) {
        editor.on('paste change input undo redo', function() {
            // the timeout is to throttle how often this runs while typing
            clearTimeout(vm.editorHandlerTimeout);
            vm.editorHandlerTimeout = setTimeout(function () {
                var md = new MarkdownIt() // or any other markdown library
                var contentFromEditor = editor.getContent()
                
                //MarkdownIt adds its own paragraph tags, so strip the ones from tinymce
                if (contentFromEditor.startsWith('<p>'))
                    contentFromEditor = contentFromEditor.substring(3)
                if (contentFromEditor.endsWith('</p>'))
                    contentFromEditor = contentFromEditor.substring(0, contentFromEditor.length - 4)
                 
                var contentFromMdIt = md.render(contentFromEditor)
                
                // markdown-it inserts the html encoded values for these (this might be a bug), so we will want to replace them since we will be rendering as html
                contentFromMdIt = contentFromMdIt.replace(/&gt;/g, '>')
                                                 .replace(/&lt;/g, '<')
                                                 .replace(/&amp;/g, '&')
                
                // time to do something with your rendered markdown text

                // im in vuejs, so I emit the result as 'input' which allows my markdown editor to work as a v-model
                vm.$emit('input', contentFromMdIt)
            })
        })
    })
})

此外，强烈建议您在 Markdown 编辑器中添加预览，因为大多数用户对 Markdown 并不熟悉。使预览功能变得简单且易于访问，只需将输出呈现为 html，以便他们可以看到正在发生的情况。

Answer 3

更新了 TinyMCE v5、v6、v7+ 的 2024 年解决方案

简短回答： Tinymce 还不支持 markdown。您必须通过使用 HTML 到 MD 解析器和 MD 到 HTML 解析器自己实现它。

将值传递给编辑器时，使用像 markdown-it 这样的库将 markdown 解析为 HTML，并使用 turndown 库将 HTML 输出从 tinymce 编辑器值解析回 markdown。

这是一个实现，它将这两个库与 TinyMCE 一起使用。

唯一的问题是用户无法使用源代码编辑 Markdown。如果您需要使用tinymce编辑器的完整Markdown编辑器，我建议使用我的开源插件supercode。它适用于 TinyMCE 的最新版本 v5、v6 和 v7。

您可以在这里查看使用supercode插件实现markdown的demo。

Answer 4

TinyMCE 似乎现在为他们的编辑器提供了 Markdown 插件

https://github.com/vaidhyanathan93/Markdownfortinymce/blob/master/markdown/plugin.js

https://www.tiny.cloud/labs/markdown/

Tiny Markdown 是 TinyMCE 的 Markdown 语法插件，提供 为作者提供灵活的富文本和 Markdown 内容创建选项， 并且还为开发人员提供强大、可靠的降价输出 项目。