网页MarkDown

最新推荐文章于 2023-12-11 17:59:28 发布

一阵雄风

最新推荐文章于 2023-12-11 17:59:28 发布

阅读量340

点赞数

分类专栏：工具使用文章标签： markdown

本文链接：https://blog.csdn.net/a9541170/article/details/104908501

版权

工具使用专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<div th:fragment="writepage">
	<a href="/admin"><span>文章管理</span></a>
	<button id='btn'>发布</button>
	<textarea id="editMD">
	</textarea>
</div>

<div th:fragment="markdownsettings">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
	<script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
	<script src="https://cdn.jsdelivr.net/highlight.js/latest/highlight.min.js"></script>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/highlight.js/latest/styles/github.min.css">
	<!--markdown图标  https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css-->
	<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
	<script>
		var simplemde = new SimpleMDE({
			element: document.getElementById("editMD"),
			//spellChecker: false,
			autofocus: true,
			autoDownloadFontAwesome: false,
			placeholder: "Type here...",
			autosave: {
				enabled: true,
				uniqueId: "yctop", //必须设置
				delay: 1000, 时间间隔默认 10s
			},
			tabSize: 4,
			status: false,
			lineWrapping: false,
			renderingConfig: {
				codeSyntaxHighlighting: true //代码高亮??
			},
			shortcuts: {
				drawTable: "Alt-T"  //表格快捷键
			},
			toolbar: [{
				name: "bold",
				action: SimpleMDE.toggleBold,
				className: "fa fa-bold",
				title: "加粗",
			},
				{
					name: "italic",
					action: SimpleMDE.toggleItalic,
					className: "fa fa-italic",
					title: "斜体",
				},
				"|", // Separato
				{
					name: "heading",
					action: SimpleMDE.toggleHeadingSmaller,
					className: "fa fa-header",
					title: "标题",
				},
				{
					name: "strikethrough",
					action: SimpleMDE.toggleStrikethrough,
					className: "fa fa-strikethrough",
					title: "删除线",
				},
				{
					name: "unordered-list",
					action: SimpleMDE.toggleUnorderedList,
					className: "fa fa-list-ul",
					title: "无序",
				},
				{
					name: "ordered-list",
					action: SimpleMDE.toggleOrderedList,
					className: "fa fa-list-ol",
					title: "有序",
				},
				{
					name: "quotet",
					action: SimpleMDE.toggleBlockquote,
					className: "fa fa-quote-left",
					title: "引用",
				},
				{
					name: "code",
					action: SimpleMDE.toggleCodeBlock,
					className: "fa fa-code",
					title: "有序",
				},
				{
					name: "preview",
					action: SimpleMDE.togglePreview,
					className: "fa fa-eye no-disable",
					title: "显示效果",
				},
				{
					name: "image",
					action: SimpleMDE.drawImage,
					className: "fa fa-picture-o",
					title: "图片",
				},
				{
					name: "table",
					action: SimpleMDE.drawTable,
					className: "fa fa-table",
					title: "表格",
				},
				{
					name: "horizontal-rule",
					action: SimpleMDE.drawHorizontalRule,
					className: "fa fa-minus",
					title: "水平线",
				},
				{
					name: "link",
					action: SimpleMDE.drawLink,
					className: "fa fa-link",
					title: "链接",
				},
				{
					name: "guide",
					action: "https://simplemde.com/markdown-guide",
					className: "fa fa-question-circle",
					title: "指南",
				},
				{
					name: "fullscreen",
					action: SimpleMDE.toggleFullScreen,
					className: "fa fa-arrows-alt no-disable no-mobile",
					title: "全屏",
				},

			]

		});
		//simplemde.toggleSideBySide()  // 打开时启动全屏 AND 预览

		var val=simplemde.value();
		var html=simplemde.markdown(simplemde.value());
		btn.onclick=function(){  //发布文章  按钮
			/**alert(simplemde.value());
			 alert(val);
			 alert(simplemde.markdown(simplemde.value()));
			 simplemde.value(' 修改了');*/
		}

	</script>
</div>



</html>