最强markdown编辑器
2021-05-08 本文已影响0人
青春向来如此
"editor.md": "^1.5.0"
官网http://editor.md.ipandao.com/examples/index.html
支持复制粘贴
public/index.html中加入jquery和zepto等依赖
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- <meta name="viewport" content="width=device-width,initial-scale=1.0" /> -->
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title>xxx平台</title>
<link rel="stylesheet" href="<%= BASE_URL %>editor.md/css/editormd.css" />
<script src="https://cdn.jsdelivr.net/npm/zepto@1.2.0/dist/zepto.min.js"></script>
<script src="<%= BASE_URL %>editor.md/editormd.min.js"></script>
</head>
<body>
<noscript>
<strong
>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript
enabled. Please enable it to continue.</strong
>
</noscript>
<div id="app"></div>
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- built files will be auto injected -->
</body>
</html>
src/views/editor-md/index.vue
<!-- 此页面用于测试editor.md -->
<template>
<div>
<div id="editormdid">
<textarea v-model="content"></textarea>
</div>
<el-button @click="save">保存</el-button>
</div>
</template>
<script>
export default {
name: "Editor",
props: {
content: {
type: String,
default: ""
}
},
data() {
return {
instance: null
};
},
mounted() {
this.initEditor();
},
methods: {
initEditor() {
this.instance = window.editormd("editormdid", {
height: 500,
emoji: true,
path: "editor.md/lib/",
saveHTMLToTextarea: true
});
},
save() {
console.log(this.instance.getHTML());
}
}
};
</script>
展示 data是上一步保存的html结构
<div v-html="data" class="markdown-body editormd-html-preview"></div>
