博客园编辑页面添加目录跳转

Greasy Fork is available in English.

博客园编辑页面添加目录跳转

博客园编辑页面左上角添加指向所有h1标题的跳转链接目录，以免文章太长滚动麻烦

当前为 2024-02-17 提交的版本，查看最新版本。

换行

// ==UserScript==
// @name         博客园编辑页面添加目录跳转
// @description  博客园编辑页面左上角添加指向所有h1标题的跳转链接目录，以免文章太长滚动麻烦
// @include      https://i.cnblogs.com/posts/edit*
// @version      2024-02-17
/************************************/
// @icon         https://www.google.com/s2/favicons?sz=64&domain=cnblogs.com
// @grant        GM_addStyle
// @license      LGPLv3
// @namespace http://greasyfork.icu/users/1097076
// ==/UserScript==

var nodeRemove;

function createTableOfContents() {
	if (nodeRemove) {
		nodeRemove.remove();
	}

	// let contentsDiv = document.createElement("div");
	nodeRemove = document.createElement("div");
	// contentsDiv.className = "contentsDiv";
	nodeRemove.classList.add("contentsDiv");


	// let tocItems = [];
	let h1list // h1list is not defined 需要放外边
	try {
		h1list = document.querySelector("#Editor_Edit_EditorBody_ifr").contentWindow.document.querySelectorAll("#tinymce > h1")
	} catch (e) {
		h1list = document.querySelector("#postBodyEditor_ifr").contentWindow.document.querySelectorAll("#tinymce > h1") // TinyMCE5
	}


	h1list.forEach(element => {
		let tocItem = document.createElement('a');
		tocItem.style.display = 'block';
		tocItem.textContent = element.innerText;
		nodeRemove.appendChild(tocItem)

		// Add a click event listener to each tocItem
		tocItem.addEventListener('click', function () {
			// Scroll to the corresponding h1 element
			element.scrollIntoView({
				behavior: 'smooth', // Add smooth scrolling effect
				block: 'start', // Align the top of the element with the top of the viewport
			});
		});
	}); // 目录

	document.body.appendChild(nodeRemove)

	const styleText = `
.contentsDiv {
	position: fixed;
  top: 0;
  left: 0;
}

.tooltiptext:hover {
	display: inline;
}
`
	const style = GM_addStyle(styleText); // 点击Styles .cls右边的+号，点击inspector-stylesheet来粘贴调试

}

setTimeout(createTableOfContents, 3000);
setInterval(createTableOfContents, 10000);