怎么让TinyMCE编辑器支持Markdown语法
TinyMCE是一款富文本编辑器，它默认不支持Markdown语法。要让TinyMCE编辑器支持Markdown语法，需要集成一个Markdown插件。常用的Markdown插件有两款：Marked和Pandoc。其中，Marked是一款轻量级的Markdown解析器，可以很方便地集成到TinyMCE编辑器中；而Pandoc支持更多的Markdown语法，并且可以将Markdown转换成多种格式，集成到TinyMCE编辑器中需要进行相应的配置。
这里以Marked为例，介绍如何让TinyMCE编辑器支持Markdown语法。首先，需要在TinyMCE编辑器中引入Marked插件。具体步骤为：
- 引入Marked插件和相关依赖：
<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>- 在TinyMCE编辑器的初始化配置中，添加对Marked插件的配置：
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格式的文本。
参考链接：
- Marked官网：https://marked.js.org/
- TinyMCE官网：https://www.tiny.cloud/
- TinyMCE编辑器集成Marked插件的实现：https://github.com/tinymce/tinymce-marked
相关·内容
1回答
标签表没有样式。
javascript、css、html-table、javascript-marked
我在我的网站上使用标记解析器，但是表语法没有正确的样式(没有边框和条纹)。我的代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Marked in the browser</title>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
</head>
浏览 1提问于2018-03-24得票数 6
回答已采纳
1回答
如何制作一个反应堆栈片段
javascript、reactjs、code-snippets
我试着用Stack代码片段展示我的代码。有人能告诉我这种反应片段有什么问题吗？
这是工作的。
import { marked } from "https://cdn.skypack.dev/marked@4.0.16";
//import DOMPurify from "https://cdn.skypack.dev/dompurify@2.3.8";
const sampleText = `# Welcome to my React Markdown Previewer!
## This is a sub-heading...
### And here
浏览 5提问于2022-06-08得票数 1
3回答
标记( Markdown )+美人鱼(流程图和图表)
javascript、markdown、flowchart、mermaid、javascript-marked
努力让美人鱼- 与Marked - 一起工作
根据我收集的信息，我应该能够用markdown编写以下代码
图TD;A-->B;A-->C;B-->D;C-->D；
并让它渲染
<div class="mermaid">
FLOWCHART / DIAGRAM IS DRAWN HERE
</div>
我遗漏了什么？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=
浏览 4提问于2015-02-20得票数 4
2回答
TinyMCE不使用代码示例插件进行代码输出吗？
php、laravel、tinymce
我试图在Laravel项目中实现tinyMCE，想法是输出样式化的PHP代码，就像它看输入一样。插件不应该那样工作吗?或者我错了。
TinyMCE集成：
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script type="text/javascript">
tinymce.init({
s
浏览 9提问于2021-01-19得票数 0
回答已采纳
1回答
如何获取离开TinyMCE的API Key消息？(Django)
python、django、tinymce
我已经在我的程序中包含了TinyMCE编辑器，它正在显示，但它告诉我需要添加一个API键。我试过这样做，但找不到位置： {% extends "blog/base.html" %}
{% load crispy_forms_tags %}
<head>
<script src="https://cdn.tiny.cloud/1/<KEY>/tinymce/4/tinymce.min.js" referrerpolicy="origin"></script>
</head>
{%
浏览 221提问于2020-10-15得票数 0
1回答
无法在index.js中加载markdown.md
javascript、markdown
我正在构建markdown预览器，我想为我的元素添加一个占位符。
占位符是用标记写的，我正在尝试将它导入到我的index.js文件中
import placeholder from './sample.md'; // Importing from the local folder
const $ = document.querySelectorAll.bind(document);
marked.setOptions({
breaks: true
});
let renderer = new marked.Renderer();
renderer.link
浏览 24提问于2021-05-12得票数 0
回答已采纳
3回答
在django博客站点中集成文本编辑器
javascript、django、rich-text-editor
你知道RichText编辑器吗？请访问medium.com，我希望您会受到这个最漂亮的文本编辑器的启发，我想在我的django博客中集成这种类型的编辑器，在这里用户可以写他们的文章，我该如何集成呢？我现在使用的是TinyMce编辑器，但这不是一次更好的体验。记得有一件事也告诉我，如果用户会上传图片，图片会保存在哪里？
我的TinyMce代码
<script
src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js"
referrerpolicy="origin"
>&l
浏览 9提问于2021-09-22得票数 0
3回答
分析svelte组件中的markdown
node.js、markdown、svelte
如果这是一个天真的问题，请原谅。我想在Svelte组件中解析markdown，例如 <script>
--- import some markdownLibrary ---
export let text; // text is a markdown param
</script>
markdownLibrary.render({text}) 我无法使用markdown-it或marked，因为require不可用。 我觉得我错过了更大的图景。什么是“轻薄”的方式呢？任何指针都会有帮助。
浏览 97提问于2020-03-26得票数 3
回答已采纳
1回答
Charts.js刻度yaxes ticks min max不起作用
javascript、html、charts、chart.js
我有一个带有charts.js图表的超文本标记语言页面。我正在尝试设置图表的最小值和最大值，但无法设置最小值和最大值。我搜索了不同的帖子，但都说了一样的话，我很确定我已经在这么做了…… > scales: {
> yAxes: [{
> ticks: {
> min: -100,
> max: 100
> }
> }]
> } 我就
浏览 47提问于2021-10-29得票数 1
回答已采纳
1回答
$(function() {
$('input[name="datefilter4"]').daterangepicker({
autoUpdateInput: false,
locale: {
cancelLabel: 'Clear'
}
});
$('input[name="datefilter4"]').on('apply.daterangepicker', function(ev, picker) {
$(this).val(picker.star
浏览 20提问于2019-12-23得票数 0
1回答
使用完整日历/icalendar和脚本标记
javascript、fullcalendar、icalendar
如果这是一个非常基本的问题，很抱歉，但我想使用fullcalendar的包，使用脚本标记。
我发现icalendar不在上，但我希望它仍然是可能的。
我的问题是我不确定如何导入插件(这一行是plugins: [DayGridPlugin, iCalendarPlugin],)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link
href="https://cdn.jsdelivr
浏览 1提问于2021-03-25得票数 2
1回答
如何在PHP中使用图表-js-缩放插件
php、chart.js
我使用的数据库有200多个数据。我只需要显示最后5个数据，但它们可以滚动图表。
这些是我使用的脚本
<!-- JQUERY -->
<script src="<?= base_url() ?>assets/js/jquery.js"></script>
<script src="<?= base_url()?>assets/js/jquery/jquery.min.js"></script>
<script src="https://cdn.jsdelivr
浏览 5提问于2022-06-21得票数 0
2回答
使TinyMCE与JEditable正常工作
jquery、jquery-plugins、tinymce、jeditable
我正在使用编辑就地JQuery插件，JEditable：。
我想在编辑时使用TinyMCE，所以我找到了一些额外的脚本来使它工作：。
我遇到的问题是，当我第一次尝试编辑某件东西时，JEditable或TinyMCE都会崩溃--但是之后它就完美地工作了！具体来说，当我第一次单击要编辑的区域时，TinyMCE会加载，但是当我单击textarea时，textarea会消失，成为我将要编辑的div (就好像我从未点击过编辑一样)。但是，在此之后，除非我刷新页面，否则插件可以很好地工作。
代码
<script type="text/javascript" src=&
浏览 2提问于2011-04-07得票数 4
回答已采纳
3回答
加载tinymce后执行js函数
javascript、jquery、tinymce、document-ready
我有一个选择，onchange触发一个js函数来显示/隐藏tinymce编辑器：
<select id="mySelect" onChange="myFuntion()">
<option value="1">Yes</option>
<option value="0">No</option>
然后，我有一个文本区域与tinymce (加载在页面加载)。
<textarea class="mce" id="myTextarea">
浏览 4提问于2016-06-05得票数 3
2回答
FullCalendar -在没有被告知的情况下每天重复一个事件
javascript、fullcalendar、fullcalendar-scheduler、fullcalendar-4
我正在使用FullCalendar的基本实现。但是使用下面的代码(复制并粘贴到文件中)。我的“会议”每天都会在给定的时间重复。3月1日下午3点到6点，我应该有一场对弗雷德的比赛。不要重复。
不管startRecur/endRecur属性如何，都会发生这种情况。唯一有效果的是daysOfWeek属性。设置一个值意味着它只在那些日子出现。我做错了什么？
谢谢米克
function run() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.
浏览 2提问于2020-03-06得票数 2
回答已采纳
1回答
FullCalendar dayGrid视图不在标题中显示视图选项
javascript、jquery、fullcalendar、fullcalendar-5、fullcalendar-3
我在JS中使用FullCalendar v5，当我尝试使用dayGrid视图时，它不工作。 预期输出： ? 接收的输出： ? 我已经在dayGrid插件的PHP文件的顶部添加了一个脚本标记： <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@5.9.0/"></script> 以下脚本标记用于在header上添加按钮： <script>
$(document).ready(function() {
var calendar
浏览 39提问于2021-09-08得票数 1
1回答
防止所有图像加载，只需加载屏幕上可见的图像。
javascript、jquery、lazy-loading
我已经写了一个脚本，以防止所有图像直接加载到页面上。
<div id="domo">
<img src="PUT_YOUR_VALUE"></br>
<img src="PUT_YOUR_VALUE"></br>
<img src="PUT_YOUR_VALUE"></br>
<img src="PUT_YOUR_VALUE"></br>
</div><script>
var
浏览 0提问于2016-09-08得票数 0
1回答
chart.js 3和时间轴显示错误的日期数据
javascript、html、chart.js、chart.js3
我很难让chart.js在时间轴上运行。
我有以下简化代码：
<html>
<head>
<!--
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>
-->
<script src="https://cdn.jsdelivr.net/npm/moment"></script>
<s
浏览 7提问于2021-06-29得票数 1
回答已采纳
2回答
HTML5 JavaScript在Chrome中粘贴图像数据
jquery、html、tinymce、coffeescript
如何使用以下插件开发工作示例：
作者已经整理了一个很好的例子，看起来很适合我们的目的。然而，我对创建jQuery插件并不熟悉。
目标是使用此插件将剪贴板图像粘贴到富文本编辑器中，如TinyMCE。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PASTE IMAGE</title>
<script type="text/javascript" src="js/jquery-1.7.1.min.js
浏览 1提问于2012-05-17得票数 4
回答已采纳
1回答
在警报in中设置标题和标签
javascript、jquery、dialog、alert
我已经创建了一个自定义确认对话框使用警报，并试图设置标签和标题，然而，我似乎不能同时实现这两个目标。有人能帮忙吗。
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/alertifyjs@1.11.1/build/css
浏览 0提问于2018-07-08得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
