The toc plugin will generate basic Table of Contents and insert it into the editor at the current cursor position. Items for the table will be taken from the headers found in the content.
Table of Contents
Step 1: Old code as follow
\src\Presentation\Nop.Web\Themes\RootTheme\Views\Shared\EditorTemplates\RichEditor.cshtml
@using Nop.Core
@using Microsoft.AspNetCore.Http
@using Microsoft.Net.Http.Headers
@inject IHttpContextAccessor _httpContextAccessor
@{
var allowJbimages = false;
var random = CommonHelper.GenerateRandomInteger();
var scheme = _httpContextAccessor.HttpContext.Request.Scheme;
var host = _httpContextAccessor.HttpContext.Request.Headers[HeaderNames.Host];
var domainUrl = scheme + "://" + host;
}
@section header
{
<style>
pre {
color: red;
display: block;
font-size: 87.5%;
color: #212529;
}
.hljs {
display: block;
color: #f5f5f5 !important;
padding: 0.5em;
background: #303030 !important;
color: #839496;
}
</style>
}
@*<script type="text/javascript" src="~/Content/tinymce/tinymce.min.js"></script>*@
@*<script type="text/javascript" src="~/Content/tinymce/langs/zh_CN.js"></script>*@
@*<script src="http://cdn.bootcss.com/tinymce/4.6.3/tinymce.min.js"></script>*@
@*<script src='https://cloud.tinymce.com/stable/tinymce.min.js'></script>*@
@*<script type="text/javascript" src="~/Content/tinymce/tinymce.min.js"></script>*@
@*<script type="text/javascript" src="~/Content/tinymce/langs/zh_CN.js"></script>*@
@*<script src="http://cdn.bootcss.com/tinymce/4.6.3/tinymce.min.js"></script>*@
<script type="text/javascript" src="~/lib/tinymce_5.1.6/js/tinymce/tinymce.min.js"></script>
@*<script src='https://cloud.tinymce.com/stable/tinymce.min.js'></script> tinymce 4.x*@
@*<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>*@ @* tinymce 5.x*@
<script>
tinymce.init({
selector: 'textarea.rte',//"textarea"根据你的选择器来指定，可以是textarea，可以绑定id（#···）或class（.····）
height: 500,
plugins: [ //配置插件：填写要使用的插件名称，可自己随意选择，但如果是上传本地图片image和imagetools是必要的
'link media image codesample code paste textcolor'
],
//工具框，r设置工具栏指定显示插件，这里我展示了三个工具栏，也可自己随意配置
toolbar: 'undo redo | code codesample | link image | paste | bold | formatselect | forecolor backcolor emoticons',
fontsize_formats: "8pt 10pt 12pt 14pt 18pt 24pt 36pt",
autosave_interval: '20s',
image_advtab: true,//开启图片上传的高级选项功能
paste_as_text: true,
table_default_styles: {
width: '100%',
borderCollapse: 'collapse'
},
//"relative_urls" required by jbimages plugin to be set to "false"
relative_urls: false,
relative_urls: false,
remove_script_host: false,
document_base_url: "@domainUrl",
image_title: false, // 是否开启图片标题设置的选择，这里设置否
automatic_uploads: true,//开启点击图片上传时，自动进行远程上传操作
// 图片异步上传处理函数, without images_upload_url set, Upload tab won't show up
images_upload_handler: (blobInfo, success, failure) => { // 图片异步上传处理函数
var xhr, formData;
xhr = new XMLHttpRequest();
xhr.withCredentials = false;
xhr.open('POST', '/RoxyFileman/UploadFilesAsync');//第一个参数是请求方式，第二个参数是请求地址，我这里配置的是struts的action，如果是其他（PHP等）的可这样配置：xxx.php
xhr.onload = function () {
var json;
if (xhr.status !== 200) {
failure('HTTP Error: ' + xhr.status);
return;
}
json = JSON.parse(xhr.responseText);
console.log(json);
if (!json || typeof json.location !== 'string') {
failure('Invalid JSON: ' + xhr.responseText);
return;
}
success(json.location);
};
formData = new FormData();
formData.append('file', blobInfo.blob(), blobInfo.filename());
xhr.send(formData);
}
});
</script>
@Html.TextArea(string.Empty, new { @class = "rte" })
\src\Presentation\Nop.Web\Themes\RootTheme\Views\Blog\Create.cshtml
<div class="form-group">
@Html.LabelFor(m => m.Body)
<span asp-validation-for="Body" class="text-danger"></span>
@Html.EditorFor(m => m.Body, "RichEditor", new { @class = "form-control" })
</div>Step 2:Basic setup
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'toc',
toolbar: 'toc',
menubar: 'insert'
});
Step 3: Add toc to tinymce init
new
plugins: [ //配置插件：填写要使用的插件名称，可自己随意选择，但如果是上传本地图片image和imagetools是必要的
'link media image codesample code paste textcolor toc'
],
//工具框，r设置工具栏指定显示插件，这里我展示了三个工具栏，也可自己随意配置
toolbar: 'undo redo | code codesample |toc link image | paste | bold | formatselect | forecolor backcolor emoticons',setting toc_depth to any number in 1-9 range
<script>
tinymce.init({
selector: 'textarea.rte',//"textarea"根据你的选择器来指定，可以是textarea，可以绑定id（#···）或class（.····）
height: 500,
plugins: [ //配置插件：填写要使用的插件名称，可自己随意选择，但如果是上传本地图片image和imagetools是必要的
'link media image codesample code paste textcolor toc'
],
//工具框，r设置工具栏指定显示插件，这里我展示了三个工具栏，也可自己随意配置
toolbar: 'undo redo | code codesample |toc link image | paste | bold | formatselect | forecolor backcolor emoticons',
toc_depth: 6, //add code here, see:https://www.tiny.cloud/docs-4x/plugins/toc/#toc_depth
fontsize_formats: "8pt 10pt 12pt 14pt 18pt 24pt 36pt",
ohter
<iframe id="Body_ifr" frameborder="0" allowtransparency="true" title="Rich Text Area. Press ALT-0 for help." class="tox-edit-area__iframe"></iframe>
<html>
<head>
<base href="http://www.iaspnetcore.com">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" id="u0" href="https://www.iaspnetcore.com/lib/tinymce_5.1.6/js/tinymce/skins/ui/oxide/content.min.css">
<link rel="stylesheet" type="text/css" id="u1" href="https://www.iaspnetcore.com/lib/tinymce_5.1.6/js/tinymce/skins/content/default/content.min.css">
</head>
<body id="tinymce" class="mce-content-body " data-id="Body" contenteditable="true" spellcheck="false">
<p>Can the TOC directory be redirected to an external element? At the same time, click the directory to jump to the specified content?</p>
<p>The current TOC plug-in can not meet the requirements, because when the content is very long, it is a headache to browse up and down</p>
<p><br></p>
<div class="mce-toc" contenteditable="false">
<h2 contenteditable="true">Table of Contents</h2><ul><li><a href="#mcetoc_1fvvms56bq" data-mce-href="#mcetoc_1fvvms56bq">Introduction</a></li><li><a href="#mcetoc_1g07g1jiaf" data-mce-href="#mcetoc_1g07g1jiaf">Useful links</a><ul><li><a href="#mcetoc_1g07g1jibg" data-mce-href="#mcetoc_1g07g1jibg">tinymce 基于vue + typescript 同步更新左侧目录导航</a></li><li><a href="#mcetoc_1g4qdkoau3" data-mce-href="#mcetoc_1g4qdkoau3">富文本编辑器TinyMCE在vue2中的使用以及动态绑定(全部代码)</a></li><li><a href="#mcetoc_1g07g1jibh" data-mce-href="#mcetoc_1g07g1jibh">siderbar left: table of contents demo page</a></li><li><a href="#mcetoc_1ge85b0k813" data-mce-href="#mcetoc_1ge85b0k813">文章页面，左侧滚动内容时右侧目录也在跟着变化</a></li></ul></li><li><a href="#h_534164932_0" data-mce-href="#h_534164932_0">富文本编辑器tinymce获取文本内容和设置文本内容</a></li><li><a href="#h_534164932_1" data-mce-href="#h_534164932_1">如何将之前编辑的文章HTML源代码导入到TinyMCE编辑器中</a></li><li><a href="#h_534164932_2" data-mce-href="#h_534164932_2">tinymce5设置光标到内容末尾</a></li><li><a href="#h_534164932_3" data-mce-href="#h_534164932_3">The Table of Contents plugin provides the following JavaScript commands.</a></li><li><a href="#h_534164932_4" data-mce-href="#h_534164932_4">tinymce原装插件</a></li><li><a href="#mcetoc_1gepu9hsc5" data-mce-href="#mcetoc_1gepu9hsc5">tinymce5.1.6 源码下载</a></li><li><a href="#h_534164932_5" data-mce-href="#h_534164932_5">Tinymce富文本编辑器的改进——支持导入word</a></li><li><a href="#h_534164932_6" data-mce-href="#h_534164932_6">利用iframe引入自定义功能页面</a></li><li><a href="#h_534164932_7" data-mce-href="#h_534164932_7">jQuery 实现富文本的标题自动生成二级目录</a><ul><li><a href="#mcetoc_1ge85b0k814" data-mce-href="#mcetoc_1ge85b0k814">手写一个文章目录插件(博客园)</a></li></ul></li></ul></div>
<h2 id="mcetoc_1fvvms56bq">Introduction</h2>
<p>I want to show Tinymce Editor slider at the left side</p>
<p>I have used the <a href="https://www.tiny.cloud/docs/advanced/creating-a-sidebar/" target="_blank" rel="noopener" data-mce-href="https://www.tiny.cloud/docs/advanced/creating-a-sidebar/">Tinymce Sidebar API</a> TinyMCE SideBar</p>
<p>Try here <a href="http://fiddle.tinymce.com/gEfaab" target="_blank" rel="noopener" data-mce-href="http://fiddle.tinymce.com/gEfaab">Tinymce SideBar Fiddle</a> Sidebar is at right sude but i want that at left side</p>
<p>I tried following but it shows at the right side as follow：</p>
<p><img src="http://www.iaspnetcore.com/uploadimages/CGLJe.png" alt="" width="600" height="143" data-mce-src="http://www.iaspnetcore.com/uploadimages/CGLJe.png"></p>
<p>But I want slider at the Right side as follow：</p>
<p><img src="http://www.iaspnetcore.com/uploadimages/CGLJe2.png" alt="" width="900" height="208" data-mce-src="http://www.iaspnetcore.com/uploadimages/CGLJe2.png"></p>
<blockquote><p><em><strong>Important</strong>: TinyMCE 5.10 will include the final release of the Table of Contents plugin (<code class="language-plaintext highlighter-rouge">toc</code>) as an open source plugin. The Table of Contents plugin will be removed from the open source bundle and be available as a premium plugin for TinyMCE 6.0.</em></p></blockquote>
<p><br></p>
<p><br></p>
<h2 id="mcetoc_1g07g1jiaf">Useful links</h2>
<p>手写一个文章目录插件，兼容博客园 markdown 和 TinyMCE 编辑器</p>
<p><a href="https://www.cnblogs.com/guangzan/p/12692795.html" target="_blank" rel="noopener" data-mce-href="https://www.cnblogs.com/guangzan/p/12692795.html">https://www.cnblogs.com/guangzan/p/12692795.html</a></p>
<h3 id="mcetoc_1g07g1jibg"><a href="https://juejin.cn/post/6868554933365374989" target="_blank" rel="noopener" data-mce-href="https://juejin.cn/post/6868554933365374989">tinymce 基于vue + typescript 同步更新左侧目录导航</a></h3>
<p>在富文本编辑器中将某段落设置成H1-H6任意标题时，实时在左侧【目录导航】中生成目录，取消任意H1-H6标签时，同步更新左侧目录导航</p>
<p><a href="https://www.tiny.cloud/docs/plugins/opensource/toc/" target="_blank" rel="noopener" data-mce-href="https://www.tiny.cloud/docs/plugins/opensource/toc/">https://www.tiny.cloud/docs/plugins/opensource/toc/</a></p>
<p><br></p>
<h3 id="mcetoc_1g4qdkoau3">富文本编辑器TinyMCE在vue2中的使用以及动态绑定(全部代码)</h3>
<p><a href="https://juejin.cn/post/7086753431385276447" target="_blank" rel="noopener" data-mce-href="https://juejin.cn/post/7086753431385276447">https://juejin.cn/post/7086753431385276447</a></p>
<h3 id="mcetoc_1g07g1jibh">siderbar left: table of contents demo page</h3>
<p><a href="https://github.com/jgallen23/toc" target="_blank" rel="noopener" data-mce-href="https://github.com/jgallen23/toc">https://github.com/jgallen23/toc</a></p>
<p>demo:<a href="http://projects.jga.me/toc/#toc3" target="_blank" rel="noopener" data-mce-href="http://projects.jga.me/toc/#toc3">http://projects.jga.me/toc/#toc3</a></p>
<p><br></p>
<h3 id="mcetoc_1ge85b0k813">文章页面，左侧滚动内容时右侧目录也在跟着变化</h3>
<p><a href="https://www.cnblogs.com/mahmud/p/11456222.html" target="_blank" rel="noopener" data-mce-href="https://www.cnblogs.com/mahmud/p/11456222.html">https://www.cnblogs.com/mahmud/p/11456222.html</a></p>
<div class="Post-RichTextContainer">
<div class="css-1yuhvjn">
<div class="Catalog isCatalogV2 css-1aatxpc" data-za-detail-view-name="正文"><div class="css-jpzy4w"><div class="css-zkfaav"><span style="display: inline-flex; align-items: center;" data-mce-style="display: inline-flex; align-items: center;"></span><div class="css-5287jj">目录</div></div><div class="css-17oyyq4">收起</div></div><div class="css-1izmkad"><div class="Catalog-content css-a3sv8e"><div class="Catalog-FirstLevelTitle Catalog-Title css-1kilzsx"><div class="css-hvuawc" data-catalog-target-id="h_534164932_0" data-za-detail-view-id="9745" data-za-detail-view-action="Click" data-za-detail-view-name="正文"><div class="css-nj7ofv">富文本编辑器tinymce获取文本内容和设置文本内容</div></div></div><div class="Catalog-FirstLevelTitle Catalog-Title css-1kilzsx"><div class="css-hvuawc" data-catalog-target-id="h_534164932_1" data-za-detail-view-id="9745" data-za-detail-view-action="Click" data-za-detail-view-name="正文"><div class="css-nj7ofv">如何将之前编辑的文章HTML源代码导入到TinyMCE编辑器中</div></div></div><div class="Catalog-FirstLevelTitle Catalog-Title css-1kilzsx"><div class="css-hvuawc" data-catalog-target-id="h_534164932_2" data-za-detail-view-id="9745" data-za-detail-view-action="Click" data-za-detail-view-name="正文"><div class="css-nj7ofv">tinymce5设置光标到内容末尾</div></div></div><div class="Catalog-FirstLevelTitle Catalog-Title css-1kilzsx"><div class="css-hvuawc" data-catalog-target-id="h_534164932_3" data-za-detail-view-id="9745" data-za-detail-view-action="Click" data-za-detail-view-name="正文"><div class="css-nj7ofv">The Table of Contents plugin provides the following JavaScript commands.</div></div></div><div class="Catalog-FirstLevelTitle Catalog-Title css-1kilzsx"><div class="css-hvuawc" data-catalog-target-id="h_534164932_4" data-za-detail-view-id="9745" data-za-detail-view-action="Click" data-za-detail-view-name="正文"><div class="css-nj7ofv">tinymce原装插件源码分析</div></div></div><div class="Catalog-FirstLevelTitle Catalog-Title css-1kilzsx"><div class="css-hvuawc" data-catalog-target-id="h_534164932_5" data-za-detail-view-id="9745" data-za-detail-view-action="Click" data-za-detail-view-name="正文"><div class="css-nj7ofv">Tinymce富文本编辑器的改进——支持导入word</div></div></div><div class="Catalog-FirstLevelTitle Catalog-Title css-1kilzsx"><div class="css-hvuawc" data-catalog-target-id="h_534164932_6" data-za-detail-view-id="9745" data-za-detail-view-action="Click" data-za-detail-view-name="正文"><div class="css-nj7ofv">利用iframe引入自定义功能页面</div></div></div><div class="Catalog-FirstLevelTitle Catalog-Title css-1kilzsx"><div class="css-hvuawc" data-catalog-target-id="h_534164932_7" data-za-detail-view-id="9745" data-za-detail-view-action="Click" data-za-detail-view-name="正文"><div class="css-nj7ofv">jQuery 实现富文本的标题自动生成目录</div></div></div></div></div></div><div class="RichText ztext Post-RichText css-1t3idc4">
<h2 id="h_534164932_0" data-first-child="" data-into-catalog-status="">富文本编辑器tinymce获取文本内容和设置文本内容</h2><div class="highlight">
<pre><code class="language-text">1、如果当前页面只有一个编辑器：
获取内容：tinyMCE.activeEditor.getContent()
设置内容：tinyMCE.activeEditor.setContent(“需要设置的编辑器内容”)
2、如果当前页面有多个编辑器（下面的“[0]”表示第一个编辑器，以此类推）：
获取内容：tinyMCE.editors[0].getContent()
设置内容：tinyMCE.editors[0].setContent(“需要设置的编辑器内容”)
3、获取不带HTML标记的纯文本内容：
var activeEditor = tinymce.activeEditor;
var editBody = activeEditor.getBody();
activeEditor.selection.select(editBody);
var text = activeEditor.selection.getContent( { ‘format’ : ‘text’ } );
取到的 text 即为纯文本内容。
</code></pre>
</div><h2 id="h_534164932_1" data-into-catalog-status="">如何将之前编辑的文章HTML源代码导入到TinyMCE编辑器中</h2><p data-pid="MkYPvNAf">如果你想用TinyMCE来修改你之前写的文章那么你需要将源代码放到TinyMCE中，如果服务器把HTML<a class=" wrap external" href="https://link.zhihu.com/?target=https%3A//so.csdn.net/so/search%3Fq%3D%25E6%25BA%2590%25E7%25A0%2581%26spm%3D1001.2101.3001.7020" target="_blank" rel="nofollow noopener noreferrer" data-za-detail-view-id="1043" data-mce-href="https://link.zhihu.com/?target=https%3A//so.csdn.net/so/search%3Fq%3D%25E6%25BA%2590%25E7%25A0%2581%26spm%3D1001.2101.3001.7020">源码</a>发给我们可是我们应该怎样调用？</p><p data-pid="sBG3tPG9">方法为使用 tinymce.activeEditor.setContent()这个函数</p><p data-pid="o8WlaPfW">具体用法为：</p><div class="highlight">
<pre><code class="language-text">tinymce.activeEditor.setContent() //设置TinyMCE编辑器里的内容源代码
tinymce.activeEditor.getContent() //获取TinyMCE编辑器里的内容源代</code></pre>
</div><p data-pid="AQEX3Bu9">可是我们发现直接放到HTML文件里执行无法获取到这个函数，这是因为TinyMCE这个时候还没有初始化完成，也就是说我们还无法调取这个函数，必须要等到TinyMCE彻底初始化完成后才能调用，所以我们这里有两种写法获取初始化完成的消息。</p><div class="highlight">
<pre><code class="language-text">//第一种：
//使用setup
var data = "<p>这是一个P标签</p><h1>这是一个H1标签</h1><p><em>这是一个斜体字</em></p>";
tinymce.init({
selector: '#mytextarea',
setup: function (editor) {
editor.on('init', function (e) {
console.log('初始化完成');
tinymce.activeEditor.setContent(data);
});
}
})
________________________________________________________________________________________
//第二种
//使用.then回调函数
var data = "<p>这是一个P标签</p><h1>这是一个H1标签</h1><p><em>这是一个斜体字</em></p>";
tinymce.init({
selector: '#mytextarea',
}).then(resolve => {
tinymce.activeEditor.setContent(data);
});
————————————————</code></pre>
</div><h2 id="h_534164932_2" data-into-catalog-status="">tinymce5设置光标到内容末尾</h2><p data-pid="aaKFcjuQ">通常我们设置内容后，<a class=" wrap external" href="https://link.zhihu.com/?target=https%3A//so.csdn.net/so/search%3Fq%3D%25E5%2585%2589%25E6%25A0%2587%26spm%3D1001.2101.3001.7020" target="_blank" rel="nofollow noopener noreferrer" data-za-detail-view-id="1043" data-mce-href="https://link.zhihu.com/?target=https%3A//so.csdn.net/so/search%3Fq%3D%25E5%2585%2589%25E6%25A0%2587%26spm%3D1001.2101.3001.7020">光标</a>会跑到最前面</p><div class="highlight">
<pre><code class="language-text">editor.setContent(content)
</code></pre>
</div><p data-pid="QkbqWZ7N">复制后，通过下面代码即可把光标放到内容最后面</p><div class="highlight">
<pre><code class="language-text">editor.selection.select(editor.getBody(),true);
editor.selection.collapse(false);</code></pre>
</div><h2 id="h_534164932_3" data-into-catalog-status="">The Table of Contents plugin provides the following JavaScript commands.</h2><div class="highlight">
<pre><code class="language-text">The Table of Contents plugin provides the following JavaScript commands.
Command Description
mceInsertToc Inserts a Table of Contents into the editor.
mceUpdateToc Updates an existing Table of Contents.
Examples
tinymce.activeEditor.execCommand('mceInsertToc');
tinymce.activeEditor.execCommand('mceUpdateToc');</code></pre>
</div><h2 id="h_534164932_4" data-into-catalog-status=""><span class="nolink">tinymce原装插件</span></h2><p data-pid="mfHjf_xM"><a class=" external" href="https://link.zhihu.com/?target=https%3A//www.cnblogs.com/xunhanliu/tag/tinymce/" target="_blank" rel="nofollow noopener noreferrer" data-mce-href="https://link.zhihu.com/?target=https%3A//www.cnblogs.com/xunhanliu/tag/tinymce/"><span class="invisible">https://www.</span><span class="visible">cnblogs.com/xunhanliu/t</span><span class="invisible">ag/tinymce/</span></a></p><p class="ztext-empty-paragraph"><br></p><h2 id="mcetoc_1gepu9hsc5" class="ztext-empty-paragraph">tinymce5.1.6 源码下载</h2><p class="ztext-empty-paragraph"><a href="https://www.tiny.cloud/get-tiny/self-hosted/" target="_blank" rel="noopener" data-mce-href="https://www.tiny.cloud/get-tiny/self-hosted/">https://www.tiny.cloud/get-tiny/self-hosted/</a></p><p class="ztext-empty-paragraph">https://www.jb51.net/article/165713.htm</p><h2 id="h_534164932_5" data-into-catalog-status="">Tinymce富文本编辑器的改进——支持导入word</h2><p data-pid="5_svUS9b"><a class=" external" href="https://link.zhihu.com/?target=https%3A//juejin.cn/post/7110046266909949983" target="_blank" rel="nofollow noopener noreferrer" data-mce-href="https://link.zhihu.com/?target=https%3A//juejin.cn/post/7110046266909949983"><span class="invisible">https://</span><span class="visible">juejin.cn/post/71100462</span><span class="invisible">66909949983</span></a></p><h2 id="h_534164932_6" data-into-catalog-status="">利用iframe引入自定义功能页面</h2><p data-pid="5C2nyKe3"><a class=" external" href="https://link.zhihu.com/?target=https%3A//developer.aliyun.com/article/996159%23slide-2" target="_blank" rel="nofollow noopener noreferrer" data-mce-href="https://link.zhihu.com/?target=https%3A//developer.aliyun.com/article/996159%23slide-2"><span class="invisible">https://</span><span class="visible">developer.aliyun.com/ar</span><span class="invisible">ticle/996159#slide-2</span></a></p><p class="ztext-empty-paragraph"><br></p><h2 id="h_534164932_7" data-into-catalog-status="">jQuery 实现富文本的标题自动生成二级目录</h2><p data-pid="Q-M89fYY"><a class=" external" href="https://link.zhihu.com/?target=http%3A//xieboke.net/article/157/" target="_blank" rel="nofollow noopener noreferrer" data-mce-href="https://link.zhihu.com/?target=http%3A//xieboke.net/article/157/"><span class="invisible">http://</span><span class="visible">xieboke.net/article/157</span><span class="invisible">/</span></a></p><p><a href="https://dyclassroom.com/tinymce/how-to-set-data-to-tinymce-text-editor" target="_blank" rel="noopener" data-mce-href="https://dyclassroom.com/tinymce/how-to-set-data-to-tinymce-text-editor">https://dyclassroom.com/tinymce/how-to-set-data-to-tinymce-text-editor</a></p><h3 id="mcetoc_1ge85b0k814">手写一个文章目录插件(博客园)</h3><p><a href="https://www.cnblogs.com/guangzan/p/12692795.html" target="_blank" rel="noopener" data-mce-href="https://www.cnblogs.com/guangzan/p/12692795.html">https://www.cnblogs.com/guangzan/p/12692795.html</a></p>
</div>
</div>
</div>
</body>
</html>
Useful links
https://www.tiny.cloud/docs-4x/plugins/toc/
How To Create A Table Of Contents Shortcode