In this tutorial we will learn to set data to a TinyMCE text editor.
Integrating Table of Contents plugin with Sidebar at Left Side in ASP.NET Core（ jQuery）step by step
https://dyclassroom.com/tinymce/how-to-set-data-to-tinymce-text-editor
Table of Contents
Requirement
We will need the following items.
vs 2022
Web Browser ： Chrome or Firefox
TinyMCE
jQuery
效果图
基本实现原理：首先要求博主在写博文的时候，将主标题和次级标题用 HTML标签中的 title tag（如：h1、h2、h3...）包起来；
Step 1: Create files
Create index.html file inside the tinymce project folder.
Create setdata.js file inside the js folder. This file will contain the javascript code that we are going to write.
Step 2: Code
Open index.html file and write the following code.
<!DOCTYPE html>
<html>
<head>
<title>TinyMCE - Set Data</title>
</head>
<body>
<button id="set-data-btn" >Set Data</button>
<form id="form-data" method="post">
<textarea class="tinymce" id="texteditor"></textarea>
<input type="submit" value="View Data">
</form>
<script>
tinymce.init({
/* selector: 'textarea#Blazorservertinymce'*/
selector: '#texteditor',
plugins: [ //配置插件：填写要使用的插件名称，可自己随意选择，但如果是上传本地图片image和imagetools是必要的
'link media image codesample code paste textcolor toc'
],
toolbar: 'undo redo | code codesample |toc link image | paste | bold | formatselect | forecolor backcolor emoticons',
});
</script>
<div id="data-container">
</div>
<!-- javascript -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="plugin/tinymce/tinymce.min.js"></script>
<script type="text/javascript" src="js/setdata.js"></script>
</body>
</html>
Step 2：Getting it working
Basic setup
init - source code
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Privacy Policy - AspnetcorewebviewWithTinymceBlazor</title>
<link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/site.css?v=pAGv4ietcJNk_EwsQZ5BN9-K4MuNYS2a9wl4Jw-q9D0">
<link rel="stylesheet" href="/AspnetcorewebviewWithTinymceBlazor.styles.css?v=RItQ6xTI5Iqqm99YinTR0ry7eu5gUKZKnWhQx4cZ1ss">
<script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>
<script src="/lib/jquery/dist/jquery.min.js"></script>
<script src="/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<link rel="stylesheet" type="text/css" id="u0" href="https://cdn.tiny.cloud/1/no-api-key/tinymce/4.9.11-104/skins/lightgray/skin.min.css">
</head>
<body>
<header>
<nav b-lfhir2zmlj="" class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div b-lfhir2zmlj="" class="container-fluid">
<a class="navbar-brand" href="/">AspnetcorewebviewWithTinymceBlazor</a>
<button b-lfhir2zmlj="" class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span b-lfhir2zmlj="" class="navbar-toggler-icon"></span>
</button>
<div b-lfhir2zmlj="" class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul b-lfhir2zmlj="" class="navbar-nav flex-grow-1">
<li b-lfhir2zmlj="" class="nav-item">
<a class="nav-link text-dark" href="/">Home</a>
</li>
<li b-lfhir2zmlj="" class="nav-item">
<a class="nav-link text-dark" href="/Home/Privacy">Privacy</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div b-lfhir2zmlj="" class="container">
<main b-lfhir2zmlj="" role="main" class="pb-3">
<h1>Privacy Policy</h1>
<p>Use this page to detail your site's privacy policy.</p>
<button id="set-data-btn">Set Data</button>
<button id="mceinserttoc-btn">mceInsertToc-btn</button>
<button id="mceupdatetoc-btn">mceUpdateToc-btn</button>
<form id="form-data" method="post">
<div id="mceu_11" class="mce-tinymce mce-container mce-panel" hidefocus="1" tabindex="-1" role="application" style="visibility: hidden; border-width: 1px; width: 100%;"><div id="mceu_11-body" class="mce-container-body mce-stack-layout"><div id="mceu_12" class="mce-top-part mce-container mce-stack-layout-item mce-first"><div id="mceu_12-body" class="mce-container-body"><div id="mceu_13" class="mce-container mce-menubar mce-toolbar mce-first" role="menubar" style="border-width: 0px 0px 1px;"><div id="mceu_13-body" class="mce-container-body mce-flow-layout"><div id="mceu_14" class="mce-widget mce-btn mce-menubtn mce-flow-layout-item mce-first mce-btn-has-text" tabindex="-1" aria-labelledby="mceu_14" role="menuitem" aria-haspopup="true"><button id="mceu_14-open" role="presentation" type="button" tabindex="-1"><span class="mce-txt">File</span> <i class="mce-caret"></i></button></div><div id="mceu_15" class="mce-widget mce-btn mce-menubtn mce-flow-layout-item mce-btn-has-text" tabindex="-1" aria-labelledby="mceu_15" role="menuitem" aria-haspopup="true"><button id="mceu_15-open" role="presentation" type="button" tabindex="-1"><span class="mce-txt">Edit</span> <i class="mce-caret"></i></button></div><div id="mceu_16" class="mce-widget mce-btn mce-menubtn mce-flow-layout-item mce-btn-has-text" tabindex="-1" aria-labelledby="mceu_16" role="menuitem" aria-haspopup="true"><button id="mceu_16-open" role="presentation" type="button" tabindex="-1"><span class="mce-txt">View</span> <i class="mce-caret"></i></button></div><div id="mceu_17" class="mce-widget mce-btn mce-menubtn mce-flow-layout-item mce-btn-has-text" tabindex="-1" aria-labelledby="mceu_17" role="menuitem" aria-haspopup="true"><button id="mceu_17-open" role="presentation" type="button" tabindex="-1"><span class="mce-txt">Insert</span> <i class="mce-caret"></i></button></div><div id="mceu_18" class="mce-widget mce-btn mce-menubtn mce-flow-layout-item mce-btn-has-text mce-toolbar-item" tabindex="-1" aria-labelledby="mceu_18" role="menuitem" aria-haspopup="true" aria-expanded="false"><button id="mceu_18-open" role="presentation" type="button" tabindex="-1"><span class="mce-txt">Format</span> <i class="mce-caret"></i></button></div><div id="mceu_19" class="mce-widget mce-btn mce-menubtn mce-flow-layout-item mce-last mce-btn-has-text" tabindex="-1" aria-labelledby="mceu_19" role="menuitem" aria-haspopup="true"><button id="mceu_19-open" role="presentation" type="button" tabindex="-1"><span class="mce-txt">Tools</span> <i class="mce-caret"></i></button></div></div></div><div id="mceu_20" class="mce-toolbar-grp mce-container mce-panel mce-last" hidefocus="1" tabindex="-1" role="group"><div id="mceu_20-body" class="mce-container-body mce-stack-layout"><div id="mceu_21" class="mce-container mce-toolbar mce-stack-layout-item mce-first mce-last" role="toolbar"><div id="mceu_21-body" class="mce-container-body mce-flow-layout"><div id="mceu_22" class="mce-container mce-flow-layout-item mce-first mce-btn-group" role="group"><div id="mceu_22-body"><div id="mceu_0" class="mce-widget mce-btn mce-first" tabindex="-1" role="button" aria-label="Undo" aria-disabled="false"><button id="mceu_0-button" role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-undo"></i></button></div><div id="mceu_1" class="mce-widget mce-btn mce-last mce-disabled" tabindex="-1" role="button" aria-label="Redo" aria-disabled="true"><button id="mceu_1-button" role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-redo"></i></button></div></div></div><div id="mceu_23" class="mce-container mce-flow-layout-item mce-btn-group" role="group"><div id="mceu_23-body"><div id="mceu_2" class="mce-widget mce-btn mce-first" tabindex="-1" role="button" aria-label="Source code"><button id="mceu_2-button" role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-code"></i></button></div><div id="mceu_3" class="mce-widget mce-btn" tabindex="-1" role="button" aria-label="Insert/Edit code sample"><button id="mceu_3-button" role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-codesample"></i></button></div><div id="mceu_4" class="mce-widget mce-btn" tabindex="-1" aria-pressed="false" role="button" aria-label="Insert/edit link"><button id="mceu_4-button" role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-link"></i></button></div><div id="mceu_5" class="mce-widget mce-btn mce-last" tabindex="-1" aria-pressed="false" role="button" aria-label="Insert/edit image"><button id="mceu_5-button" role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-image"></i></button></div></div></div><div id="mceu_24" class="mce-container mce-flow-layout-item mce-btn-group" role="group"><div id="mceu_24-body"><div id="mceu_6" class="mce-widget mce-btn mce-first mce-last" tabindex="-1" role="button" aria-label="Paste"><button id="mceu_6-button" role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-paste"></i></button></div></div></div><div id="mceu_25" class="mce-container mce-flow-layout-item mce-btn-group" role="group"><div id="mceu_25-body"><div id="mceu_7" class="mce-widget mce-btn mce-first mce-last" tabindex="-1" aria-pressed="false" role="button" aria-label="Bold"><button id="mceu_7-button" role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-bold"></i></button></div></div></div><div id="mceu_26" class="mce-container mce-flow-layout-item mce-btn-group" role="group"><div id="mceu_26-body"><div id="mceu_8" class="mce-widget mce-btn mce-menubtn mce-fixed-width mce-listbox mce-first mce-last mce-btn-has-text" tabindex="-1" aria-labelledby="mceu_8" role="button" aria-haspopup="true" aria-expanded="false"><button id="mceu_8-open" role="presentation" type="button" tabindex="-1"><span class="mce-txt">Paragraph</span> <i class="mce-caret"></i></button></div></div></div><div id="mceu_27" class="mce-container mce-flow-layout-item mce-last mce-btn-group" role="group"><div id="mceu_27-body"><div id="mceu_9" class="mce-widget mce-btn mce-splitbtn mce-colorbutton mce-first" role="button" tabindex="-1" aria-haspopup="true" aria-label="Text color"><button role="presentation" hidefocus="1" type="button" tabindex="-1"><i class="mce-ico mce-i-forecolor"></i><span id="mceu_9-preview" class="mce-preview"></span></button><button type="button" class="mce-open" hidefocus="1" tabindex="-1"> <i class="mce-caret"></i></button></div><div id="mceu_10" class="mce-widget mce-btn mce-splitbtn mce-colorbutton mce-last" role="button" tabindex="-1" aria-haspopup="true" aria-label="Background color"><button role="presentation" hidefocus="1" type="button" tabindex="-1"><i class="mce-ico mce-i-backcolor"></i><span id="mceu_10-preview" class="mce-preview"></span></button><button type="button" class="mce-open" hidefocus="1" tabindex="-1"> <i class="mce-caret"></i></button></div></div></div></div></div></div></div></div></div><div id="mceu_28" class="mce-edit-area mce-container mce-panel mce-stack-layout-item" hidefocus="1" tabindex="-1" role="group" style="border-width: 1px 0px 0px;"><iframe id="texteditor_ifr" frameborder="0" allowtransparency="true" title="Rich Text Area. Press ALT-F9 for menu. Press ALT-F10 for toolbar. Press ALT-0 for help" style="width: 100%; height: 100px; display: block;"></iframe></div><div id="mceu_29" class="mce-statusbar mce-container mce-panel mce-stack-layout-item mce-last" hidefocus="1" tabindex="-1" role="group" style="border-width: 1px 0px 0px;"><div id="mceu_29-body" class="mce-container-body mce-flow-layout"><div id="mceu_30" class="mce-path mce-flow-layout-item mce-first"><div role="button" class="mce-path-item mce-last" data-index="0" tabindex="-1" id="mceu_30-0" aria-level="1">div</div></div><div id="mceu_31" class="mce-flow-layout-item mce-resizehandle"><i class="mce-ico mce-i-resize"></i></div><span id="mceu_32" class="mce-branding mce-widget mce-label mce-flow-layout-item mce-last"> Powered by <a href="https://www.tiny.cloud/?utm_campaign=editor_referral&utm_medium=poweredby&utm_source=tinymce" rel="noopener" target="_blank" role="presentation" tabindex="-1">Tiny</a></span></div></div></div></div><textarea class="tinymce" id="texteditor" aria-hidden="true" style="display: none;"></textarea>
<input type="submit" value="View Data">
<input name="__RequestVerificationToken" type="hidden" value="CfDJ8CPTfgpDhztKod-aZZxDxtfj3sntcebDgRrxw4BBsX96vgGC0Cw24IVz516pdFFL7Nwa6aFP13dnRmjx1cZ_85PhIEkxiJIJXj-yAC51oTmnufFL1Z-wtratWYlq1YEGyISYxHg1fDJSFWdBbkHHr0Q">
</form>
<div id="data-container">
<div class="mce-toc">
<h2>Table of Contents</h2>
<ul>
<li><a href="#mcetoc_1gevc1cv31">Hello World</a></li>
</ul>
</div>
</div>
<script>
tinymce.init({
/* selector: 'textarea#Blazorservertinymce'*/
selector: '#texteditor',
plugins: [ //配置插件：填写要使用的插件名称，可自己随意选择，但如果是上传本地图片image和imagetools是必要的
'link media image codesample code paste textcolor toc'
],
toolbar: 'undo redo | code codesample |toc link image | paste | bold | formatselect | forecolor backcolor emoticons',
});
</script>
<script type="text/javascript" src="/js/setdata.js"></script>
</main>
</div>
<footer b-lfhir2zmlj="" class="border-top footer text-muted">
<div b-lfhir2zmlj="" class="container">
© 2022 - AspnetcorewebviewWithTinymceBlazor - <a href="/Home/Privacy">Privacy</a>
</div>
</footer>
<script src="/lib/jquery/dist/jquery.min.js"></script>
<script src="/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="/js/site.js?v=4q1jwFhaPaZgr8WAUSrux6hAuh0XDg9kPS3xIVq36I0"></script>
<div id="mceu_33" class="mce-widget mce-notification mce-notification-warning mce-has-close mce-in" style="max-width: 1296px; left: 1.5px; top: 302.547px; z-index: 65534;" role="presentation"><div class="mce-notification-inner">This domain is not registered with Tiny Cloud. Please see the <a target="_blank" href="https://www.tiny.cloud/docs/quick-start/">quick start guide</a> or <a target="_blank" href="https://www.tiny.cloud/auth/signup/">create an account</a>.</div><button type="button" class="mce-close" aria-hidden="true">×</button><div style="clip: rect(1px, 1px, 1px, 1px);height: 1px;overflow: hidden;position: absolute;width: 1px;" aria-live="assertive" aria-relevant="additions" aria-atomic="true">This domain is not registered with Tiny Cloud. Please see the <a target="_blank" href="https://www.tiny.cloud/docs/quick-start/">quick start guide</a> or <a target="_blank" href="https://www.tiny.cloud/auth/signup/">create an account</a>.</div></div>
<div id="mceu_34" class="mce-container mce-panel mce-floatpanel mce-menu mce-animate mce-menu-align" hidefocus="1" tabindex="-1" role="application" aria-labelledby="mceu_34" aria-describedby="mceu_34-none" style="border-width: 1px; z-index: 65535; left: 583px; top: 267px; width: 185.165px; display: none;"><div id="mceu_34-body" class="mce-container-body mce-stack-layout" role="menu" style="width: 185.165px;"><div id="mceu_35" class="mce-menu-item mce-menu-item-normal mce-stack-layout-item mce-first mce-active" tabindex="-1" role="menuitem" aria-checked="true" aria-pressed="true"><i class="mce-ico mce-i-none"></i> <span id="mceu_35-text" class="mce-text" style="font-family:Verdana, Arial, Helvetica, sans-serif;font-size:14px;font-weight:400;font-style:normal;text-decoration:none solid rgb(0, 0, 0);text-transform:none;padding:0 2px;border:0px none rgb(0, 0, 0);border-radius:0px;outline:rgb(0, 0, 0) none 0px;text-shadow:none;">Paragraph</span></div><div id="mceu_36" class="mce-menu-item mce-menu-item-normal mce-stack-layout-item" tabindex="-1" role="menuitem" aria-checked="false"><i class="mce-ico mce-i-none"></i> <span id="mceu_36-text" class="mce-text" style="font-family:Verdana, Arial, Helvetica, sans-serif;font-size:28px;font-weight:700;font-style:normal;text-decoration:none solid rgb(0, 0, 0);text-transform:none;padding:0 2px;border:0px none rgb(0, 0, 0);border-radius:0px;outline:rgb(0, 0, 0) none 0px;text-shadow:none;">Heading 1</span></div><div id="mceu_37" class="mce-menu-item mce-menu-item-normal mce-stack-layout-item" tabindex="-1" role="menuitem" aria-checked="false"><i class="mce-ico mce-i-none"></i> <span id="mceu_37-text" class="mce-text" style="font-family:Verdana, Arial, Helvetica, sans-serif;font-size:21px;font-weight:700;font-style:normal;text-decoration:none solid rgb(0, 0, 0);text-transform:none;padding:0 2px;border:0px none rgb(0, 0, 0);border-radius:0px;outline:rgb(0, 0, 0) none 0px;text-shadow:none;">Heading 2</span></div><div id="mceu_38" class="mce-menu-item mce-menu-item-normal mce-stack-layout-item" tabindex="-1" role="menuitem" aria-checked="false"><i class="mce-ico mce-i-none"></i> <span id="mceu_38-text" class="mce-text" style="font-family:Verdana, Arial, Helvetica, sans-serif;font-size:16.38px;font-weight:700;font-style:normal;text-decoration:none solid rgb(0, 0, 0);text-transform:none;padding:0 2px;border:0px none rgb(0, 0, 0);border-radius:0px;outline:rgb(0, 0, 0) none 0px;text-shadow:none;">Heading 3</span></div><div id="mceu_39" class="mce-menu-item mce-menu-item-normal mce-stack-layout-item" tabindex="-1" role="menuitem" aria-checked="false"><i class="mce-ico mce-i-none"></i> <span id="mceu_39-text" class="mce-text" style="font-family:Verdana, Arial, Helvetica, sans-serif;font-size:14px;font-weight:700;font-style:normal;text-decoration:none solid rgb(0, 0, 0);text-transform:none;padding:0 2px;border:0px none rgb(0, 0, 0);border-radius:0px;outline:rgb(0, 0, 0) none 0px;text-shadow:none;">Heading 4</span></div><div id="mceu_40" class="mce-menu-item mce-menu-item-normal mce-stack-layout-item" tabindex="-1" role="menuitem" aria-checked="false"><i class="mce-ico mce-i-none"></i> <span id="mceu_40-text" class="mce-text" style="font-family:Verdana, Arial, Helvetica, sans-serif;font-size:11.62px;font-weight:700;font-style:normal;text-decoration:none solid rgb(0, 0, 0);text-transform:none;padding:0 2px;border:0px none rgb(0, 0, 0);border-radius:0px;outline:rgb(0, 0, 0) none 0px;text-shadow:none;">Heading 5</span></div><div id="mceu_41" class="mce-menu-item mce-menu-item-normal mce-stack-layout-item" tabindex="-1" role="menuitem" aria-checked="false"><i class="mce-ico mce-i-none"></i> <span id="mceu_41-text" class="mce-text" style="font-family:Verdana, Arial, Helvetica, sans-serif;font-size:9.38px;font-weight:700;font-style:normal;text-decoration:none solid rgb(0, 0, 0);text-transform:none;padding:0 2px;border:0px none rgb(0, 0, 0);border-radius:0px;outline:rgb(0, 0, 0) none 0px;text-shadow:none;">Heading 6</span></div><div id="mceu_42" class="mce-menu-item mce-menu-item-normal mce-stack-layout-item mce-last" tabindex="-1" role="menuitem" aria-checked="false"><i class="mce-ico mce-i-none"></i> <span id="mceu_42-text" class="mce-text" style="font-family:monospace;font-size:14px;font-weight:400;font-style:normal;text-decoration:none solid rgb(0, 0, 0);text-transform:none;padding:0 2px;border:0px none rgb(0, 0, 0);border-radius:0px;outline:rgb(0, 0, 0) none 0px;text-shadow:none;">Preformatted</span></div></div></div>
<div id="mceu_43" class="mce-container mce-panel mce-floatpanel mce-menu mce-animate mce-menu-has-icons mce-menu-align" hidefocus="1" tabindex="-1" role="application" aria-labelledby="mceu_43" aria-describedby="mceu_43-none" style="border-width: 1px; z-index: 65536; left: 538.359px; top: 231px; width: 187.487px; display: none;"><div id="mceu_43-body" class="mce-container-body mce-stack-layout" role="menu" style="width: 187.487px;"><div id="mceu_44" class="mce-menu-item mce-menu-item-normal mce-stack-layout-item mce-first" tabindex="-1" role="menuitem"><i class="mce-ico mce-i-bold"></i> <span id="mceu_44-text" class="mce-text">Bold</span><div id="mceu_44-shortcut" class="mce-menu-shortcut">Ctrl+B</div></div><div id="mceu_45" class="mce-menu-item mce-menu-item-normal mce-stack-layout-item" tabindex="-1" role="menuitem"><i class="mce-ico mce-i-italic"></i> <span id="mceu_45-text" class="mce-text">Italic</span><div id="mceu_45-shortcut" class="mce-menu-shortcut">Ctrl+I</div></div><div id="mceu_46" class="mce-menu-item mce-menu-item-normal mce-stack-layout-item" tabindex="-1" role="menuitem"><i class="mce-ico mce-i-underline"></i> <span id="mceu_46-text" class="mce-text">Underline</span><div id="mceu_46-shortcut" class="mce-menu-shortcut">Ctrl+U</div></div><div id="mceu_47" class="mce-menu-item mce-menu-item-normal mce-stack-layout-item" tabindex="-1" role="menuitem"><i class="mce-ico mce-i-strikethrough"></i> <span id="mceu_47-text" class="mce-text">Strikethrough</span></div><div id="mceu_48" class="mce-menu-item mce-menu-item-normal mce-stack-layout-item" tabindex="-1" role="menuitem"><i class="mce-ico mce-i-superscript"></i> <span id="mceu_48-text" class="mce-text">Superscript</span></div><div id="mceu_49" class="mce-menu-item mce-menu-item-normal mce-stack-layout-item" tabindex="-1" role="menuitem"><i class="mce-ico mce-i-subscript"></i> <span id="mceu_49-text" class="mce-text">Subscript</span></div><div id="mceu_50" class="mce-menu-item mce-menu-item-normal mce-stack-layout-item" tabindex="-1" role="menuitem"><i class="mce-ico mce-i-code"></i> <span id="mceu_50-text" class="mce-text">Code</span></div><div id="mceu_51" class="mce-menu-item mce-menu-item-sep mce-menu-item-normal mce-stack-layout-item" tabindex="-1" role="separator"></div><div id="mceu_52" class="mce-menu-item mce-menu-item-expand mce-menu-item-normal mce-stack-layout-item" tabindex="-1" role="menuitem" aria-haspopup="true" aria-expanded="false"><i class="mce-ico mce-i-none"></i> <span id="mceu_52-text" class="mce-text">Blocks</span><div class="mce-caret"></div></div><div id="mceu_53" class="mce-menu-item mce-menu-item-expand mce-menu-item-normal mce-stack-layout-item" tabindex="-1" role="menuitem" aria-haspopup="true" aria-expanded="false"><i class="mce-ico mce-i-none"></i> <span id="mceu_53-text" class="mce-text">Align</span><div class="mce-caret"></div></div><div id="mceu_54" class="mce-menu-item mce-menu-item-sep mce-menu-item-normal mce-stack-layout-item" tabindex="-1" role="separator"></div><div id="mceu_55" class="mce-menu-item mce-menu-item-normal mce-stack-layout-item mce-last" tabindex="-1" role="menuitem"><i class="mce-ico mce-i-removeformat"></i> <span id="mceu_55-text" class="mce-text">Clear formatting</span></div></div></div>
<div id="mceu_56" class="mce-container mce-panel mce-floatpanel mce-menu mce-menu-sub mce-menu-align mce-menu-sub-tr-tl" hidefocus="1" tabindex="-1" role="application" aria-labelledby="mceu_56" aria-describedby="mceu_56-none" style="border-width: 1px; z-index: 65537; left: 726.844px; top: 458px; width: 180px; display: none;"><div id="mceu_56-body" class="mce-container-body mce-stack-layout" role="menu" style="width: 180px;"><div id="mceu_57" class="mce-menu-item mce-menu-item-normal mce-stack-layout-item mce-first" tabindex="-1" role="menuitem"><i class="mce-ico mce-i-none"></i> <span id="mceu_57-text" class="mce-text" style="font-family:Verdana, Arial, Helvetica, sans-serif;font-size:14px;font-weight:400;font-style:normal;text-decoration:none solid rgb(0, 0, 0);text-transform:none;padding:0 2px;border:0px none rgb(0, 0, 0);border-radius:0px;outline:rgb(0, 0, 0) none 0px;text-shadow:none;">Paragraph</span></div><div id="mceu_58" class="mce-menu-item mce-menu-item-normal mce-stack-layout-item" tabindex="-1" role="menuitem"><i class="mce-ico mce-i-none"></i> <span id="mceu_58-text" class="mce-text" style="font-family:Verdana, Arial, Helvetica, sans-serif;font-size:28px;font-weight:700;font-style:normal;text-decoration:none solid rgb(0, 0, 0);text-transform:none;padding:0 2px;border:0px none rgb(0, 0, 0);border-radius:0px;outline:rgb(0, 0, 0) none 0px;text-shadow:none;">Heading 1</span></div><div id="mceu_59" class="mce-menu-item mce-menu-item-normal mce-stack-layout-item" tabindex="-1" role="menuitem"><i class="mce-ico mce-i-none"></i> <span id="mceu_59-text" class="mce-text" style="font-family:Verdana, Arial, Helvetica, sans-serif;font-size:21px;font-weight:700;font-style:normal;text-decoration:none solid rgb(0, 0, 0);text-transform:none;padding:0 2px;border:0px none rgb(0, 0, 0);border-radius:0px;outline:rgb(0, 0, 0) none 0px;text-shadow:none;">Heading 2</span></div><div id="mceu_60" class="mce-menu-item mce-menu-item-normal mce-stack-layout-item" tabindex="-1" role="menuitem"><i class="mce-ico mce-i-none"></i> <span id="mceu_60-text" class="mce-text" style="font-family:Verdana, Arial, Helvetica, sans-serif;font-size:16.38px;font-weight:700;font-style:normal;text-decoration:none solid rgb(0, 0, 0);text-transform:none;padding:0 2px;border:0px none rgb(0, 0, 0);border-radius:0px;outline:rgb(0, 0, 0) none 0px;text-shadow:none;">Heading 3</span></div><div id="mceu_61" class="mce-menu-item mce-menu-item-normal mce-stack-layout-item" tabindex="-1" role="menuitem"><i class="mce-ico mce-i-none"></i> <span id="mceu_61-text" class="mce-text" style="font-family:Verdana, Arial, Helvetica, sans-serif;font-size:14px;font-weight:700;font-style:normal;text-decoration:none solid rgb(0, 0, 0);text-transform:none;padding:0 2px;border:0px none rgb(0, 0, 0);border-radius:0px;outline:rgb(0, 0, 0) none 0px;text-shadow:none;">Heading 4</span></div><div id="mceu_62" class="mce-menu-item mce-menu-item-normal mce-stack-layout-item" tabindex="-1" role="menuitem"><i class="mce-ico mce-i-none"></i> <span id="mceu_62-text" class="mce-text" style="font-family:Verdana, Arial, Helvetica, sans-serif;font-size:11.62px;font-weight:700;font-style:normal;text-decoration:none solid rgb(0, 0, 0);text-transform:none;padding:0 2px;border:0px none rgb(0, 0, 0);border-radius:0px;outline:rgb(0, 0, 0) none 0px;text-shadow:none;">Heading 5</span></div><div id="mceu_63" class="mce-menu-item mce-menu-item-normal mce-stack-layout-item" tabindex="-1" role="menuitem"><i class="mce-ico mce-i-none"></i> <span id="mceu_63-text" class="mce-text" style="font-family:Verdana, Arial, Helvetica, sans-serif;font-size:9.38px;font-weight:700;font-style:normal;text-decoration:none solid rgb(0, 0, 0);text-transform:none;padding:0 2px;border:0px none rgb(0, 0, 0);border-radius:0px;outline:rgb(0, 0, 0) none 0px;text-shadow:none;">Heading 6</span></div><div id="mceu_64" class="mce-menu-item mce-menu-item-normal mce-stack-layout-item mce-last" tabindex="-1" role="menuitem"><i class="mce-ico mce-i-none"></i> <span id="mceu_64-text" class="mce-text" style="font-family:monospace;font-size:14px;font-weight:400;font-style:normal;text-decoration:none solid rgb(0, 0, 0);text-transform:none;padding:0 2px;border:0px none rgb(0, 0, 0);border-radius:0px;outline:rgb(0, 0, 0) none 0px;text-shadow:none;">Preformatted</span></div></div></div>
<div id="mceu_65" class="mce-container mce-panel mce-floatpanel mce-menu mce-menu-has-icons mce-menu-sub mce-menu-align mce-menu-sub-tr-tl" hidefocus="1" tabindex="-1" role="application" aria-labelledby="mceu_65" aria-describedby="mceu_65-none" style="border-width: 1px; z-index: 65538; left: 726.844px; top: 487px; width: 180px; display: none;"><div id="mceu_65-body" class="mce-container-body mce-stack-layout" role="menu" style="width: 180px;"><div id="mceu_66" class="mce-menu-item mce-menu-item-normal mce-stack-layout-item mce-first" tabindex="-1" role="menuitem"><i class="mce-ico mce-i-alignleft"></i> <span id="mceu_66-text" class="mce-text">Left</span></div><div id="mceu_67" class="mce-menu-item mce-menu-item-normal mce-stack-layout-item" tabindex="-1" role="menuitem"><i class="mce-ico mce-i-aligncenter"></i> <span id="mceu_67-text" class="mce-text">Center</span></div><div id="mceu_68" class="mce-menu-item mce-menu-item-normal mce-stack-layout-item" tabindex="-1" role="menuitem"><i class="mce-ico mce-i-alignright"></i> <span id="mceu_68-text" class="mce-text">Right</span></div><div id="mceu_69" class="mce-menu-item mce-menu-item-normal mce-stack-layout-item mce-last" tabindex="-1" role="menuitem"><i class="mce-ico mce-i-alignjustify"></i> <span id="mceu_69-text" class="mce-text">Justify</span></div></div></div>
<div id="mceu_81" class="mce-tinymce mce-tinymce-inline mce-arrow mce-container mce-panel mce-floatpanel mce-arrow-up" hidefocus="1" tabindex="-1" role="dialog" aria-label="Inline toolbar" aria-labelledby="mceu_81" aria-describedby="mceu_81-none" style="border-width: 1px; z-index: 65535; left: 944px; top: 356.484px; width: 34px; height: 34px; display: none;"><div id="mceu_81-body" class="mce-container-body mce-abs-layout" style="width: 34px; height: 34px;"><div id="mceu_81-absend" class="mce-abs-end"></div><div id="mceu_82" class="mce-container mce-toolbar mce-abs-layout-item mce-first mce-last" role="toolbar" style="left: 0px; top: 0px; width: 34px; height: 34px;"><div id="mceu_82-body" class="mce-container-body mce-flow-layout" style="width: 34px; height: 34px;"><div id="mceu_83" class="mce-container mce-flow-layout-item mce-first mce-last mce-btn-group" role="group"><div id="mceu_83-body"><div id="mceu_80" class="mce-widget mce-btn mce-first mce-last" tabindex="-1" role="button" aria-label="Update"><button id="mceu_80-button" role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-reload"></i></button></div></div></div></div></div></div></div>
</body>
</html>
Rendering the TOC -code gen
显示的iframe，tinymce 是通过 iframe 的形式嵌入
<iframe id="texteditor_ifr" frameborder="0" allowtransparency="true" title="Rich Text Area. Press ALT-F9 for menu. Press ALT-F10 for toolbar. Press ALT-0 for help" style="width: 100%; height: 100px; display: block;">
</iframe>
<html>
<head>
<style id="mceDefaultStyles" type="text/css">
.mce-content-body div.mce-resizehandle {
position: absolute;
border: 1px solid black;
box-sizing: content-box;
background: #FFF;
width: 7px;
height: 7px;
z-index: 10000
}
.mce-content-body .mce-resizehandle:hover {
background: #000
}
.mce-content-body img[data-mce-selected], .mce-content-body hr[data-mce-selected] {
outline: 1px solid black;
resize: none
}
.mce-content-body .mce-clonedresizable {
position: absolute;
outline: 1px dashed black;
opacity: .5;
filter: alpha(opacity=50);
z-index: 10000
}
.mce-content-body .mce-resize-helper {
background: #555;
background: rgba(0,0,0,0.75);
border-radius: 3px;
border: 1px;
color: white;
display: none;
font-family: sans-serif;
font-size: 12px;
white-space: nowrap;
line-height: 14px;
margin: 5px 10px;
padding: 5px;
position: absolute;
z-index: 10001
}
.mce-visual-caret {
position: absolute;
background-color: black;
background-color: currentcolor;
}
.mce-visual-caret-hidden {
display: none;
}
*[data-mce-caret] {
position: absolute;
left: -1000px;
right: auto;
top: 0;
margin: 0;
padding: 0;
}
.mce-content-body .mce-offscreen-selection {
position: absolute;
left: -9999999999px;
max-width: 1000000px;
}
.mce-content-body *[contentEditable=false] {
cursor: default;
}
.mce-content-body *[contentEditable=true] {
cursor: text;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" id="u0" crossorigin="anonymous" href="https://cdn.tiny.cloud/1/no-api-key/tinymce/4.9.11-104/skins/lightgray/content.min.css">
<link rel="stylesheet" data-mce-href="https://cdn.tiny.cloud/1/no-api-key/tinymce/4.9.11-104/plugins/codesample/css/prism.css" href="https://cdn.tiny.cloud/1/no-api-key/tinymce/4.9.11-104/plugins/codesample/css/prism.css">
</head>
<body id="tinymce" class="mce-content-body " data-id="texteditor" contenteditable="true" spellcheck="false">
<div class="mce-toc" contenteditable="false">
<h2 contenteditable="true">Table of Contents</h2>
<ul>
<li>
<a href="#mcetoc_1gevc1cv31" data-mce-href="#mcetoc_1gevc1cv31">Hello World</a>
</li>
</ul>
</div>
</body>
</html>
原生js实现获取iframe标签中的document
https://blog.csdn.net/qq_43332570/article/details/107118579
手动获取内容
@*因为iframe加载是需要时间的，还没加载完就在js中直接获取对象了，所以获取为空。
解决方法：在onload中进行。*@
<script>
//需要window.onload，等iframe加载完毕后再获取
window.onload = function () {
let ifr = document.querySelector("iframe");
console.log('1.ifr', ifr); //run ok
console.log('2.ifr', ifr.contentDocument); //获取#document 即html runok
const iframeDoc1 = ifr.contentDocument.querySelector('#tinymce');
console.log('3.ifr', iframeDoc1);
// ifr.contentDocument 获取的是iframe中的document
let ddd = ifr.contentDocument.querySelector('#tinymce');
console.log('ddd', ddd);
}
</script>
output
<iframe id="texteditor_ifr" frameborder="0" allowtransparency="true" title="Rich Text Area. Press ALT-F9 for menu. Press ALT-F10 for toolbar. Press ALT-0 for help" style="width: 100%; height: 100px; display: block;">
Document
</iframe>
https://www.tiny.cloud/blog/how-to-get-content-and-set-content-in-tinymce/