文档： editor.md.ipandao.com
editor.md编辑器
- 需要依赖 jquery.js 或者 zepto.js
- 引入editormd.min.css，editormd.min.js
- 除此之外，editor.md项目中的lib/plugins/fonts/images/languages 几个文件夹也不能删除，因为代码运行时，会引入里面的文件
代码：
<button onclick="handleEditormdUnWatch()">关闭实时预览</button>
<button onclick="handleEditormdWatch()">实时预览</button>
<button onclick="getMarkdown()">getMarkdown</button>
<button onclick="getHTML()">getHTML</button>
<div id="editor-md">
<textarea style="display:none;" class="content-markdown" name="content-markdown"></textarea>
</div>
<script type="text/javascript">
var editor = editormd("editor-md", {
width : "100%", //宽度，不填为100%
height : "500px", //高度，不填为100%
//theme : "dark", //主题,不填为默认主题
path : "editormd/lib/", //editor.md插件的lib目录地址
saveHTMLToTextarea : true, // 保存 HTML 到 Textarea
toolbarAutoFixed:true, //工具栏自动固定定位的开启与禁用
watch : false, // 关闭实时预览
toolbar : false, //关闭工具栏
emoji : true,
taskList : true,
tocm : true, // Using [TOCM]
tex : true, // 开启科学公式TeX语言支持，默认关闭
flowChart : true, // 开启流程图支持，默认关闭
sequenceDiagram : true, // 开启时序/序列图支持，默认关闭,
imageUpload : true,
imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
imageUploadURL : "./php/upload.php",
onload : function() {
// console.log('onload', this);
//this.fullscreen();
//this.unwatch();
//this.watch().fullscreen();
//this.setMarkdown("#PHP");
//this.width("100%");
//this.height(480);
//this.resize("100%", 640);
}
});
editormd.katexURL = {
js : "./editormd/plugins/KaTeX/katex.min", // default: //cdnjs.cloudflare.com/ajax/libs/KaTeX/0.3.0/katex.min
css : "./editormd/plugins/KaTeX/katex.min" // default: //cdnjs.cloudflare.com/ajax/libs/KaTeX/0.3.0/katex.min
};
// editor.gotoLine(90);//转到第90行
// editor.show();//显示编辑器
// editor.hide();//隐藏编辑器
// alert(testEditor.getMarkdown());//获取编辑器内容（不含html）
// alert(editor.getHTML());//获取编辑器html内容
// editor.watch();//开启双窗口对比
// editor.unwatch();//取消双窗口对比
// editor.previewing();//预览效果
// editor.fullscreen();//全屏（按ESC取消）
// editor.showToolbar();//显示工具栏
// editor.hideToolbar();//隐藏工具栏
// editor.config({
// tocDropdown : true,
// tocTitle : "目录 Table of Contents",
// });//TOC下拉菜单
// editor.config("tocDropdown", false);//TOC默认
function handleEditormdWatch () {
editor.watch()
}
function handleEditormdUnWatch() {
editor.unwatch()
}
function getMarkdown() {
console.log(editor.getMarkdown())
}
function getHTML() {
console.log(editor.getHTML())
}
</script>
vue 集成editor.md：
image.png
// src/components/EditorMd.vue
<template>
<div :id="id">
<!-- Tips: Editor.md can auto append a `<textarea>` tag -->
<textarea style="display:none;" v-model="contentMd"></textarea>
</div>
</template>
<script>
import '/public/editormd/css/editormd.min.css'
if (typeof window !== 'undefined') {
// scriptjs 是一个加载js文件的插件
var $s = require('scriptjs');
}
export default {
name: 'editor.md',
props: {
id: {
type: String,
default: 'editor-md'
},
content: {
type: String,
default: '### Hello Editor.md !'
},
editorPath: {
type: String,
default: '/editormd',
},
editorConfig: {
type: Object,
default() {
return {
width: this.width,
height: window.innerHeight > 400 ? (window.innerHeight - 100) : 380,
path: '/editormd/lib/',
codeFold: true,
saveHTMLToTextarea: true,
searchReplace: true,
htmlDecode: 'style,script,iframe|on*',
emoji: true,
onchange : ()=>{
this.$emit('change',this.instance.getPreviewedHTML(),this.instance.getMarkdown())
}
}
}
}
},
data() {
return {
instance: null,
contentMd: ''
};
},
mounted () {
//加载依赖
$s([
`${this.editorPath}/jquery.min.js`,
`${this.editorPath}/lib/marked.min.js`,
`${this.editorPath}/lib/prettify.min.js`,
`${this.editorPath}/lib/underscore.min.js`,
`${this.editorPath}/lib/raphael.min.js`,
// `${this.editorPath}/lib/flowchart.min.js`,
// `${this.editorPath}/lib/jquery.flowchart.min.js`,
// `${this.editorPath}/lib/sequence-diagram.min.js`
], () => {
$s(`${this.editorPath}/editormd.js`, () => {
let editorMD = window.editormd
this.$nextTick(() => {
if (editorMD) {
this.instance = editorMD(this.id, this.editorConfig);
}
});
});
});
},
watch: {
content: {
handler(newVal) {
console.log(newVal)
this.contentMd = newVal
},
immediate: true
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
</style>
// src/views/About.vue
<template>
<editor-md :content="content" @change="handleChange"></editor-md>
</template>
<script>
// @ is an alias to /src
import EditorMd from '@/components/EditorMd.vue'
export default {
name: 'About',
components: {
EditorMd
},
data () {
return {
content: '',
editorPath: '/editormd'
}
},
created () {
this.fileMd()
},
methods: {
fileMd () {
let demo = `### Hello Editor.md !!!!!!`
this.content = demo
},
handleChange (html, md) {
console.log('handleChange: >>>>')
console.log(html)
console.log(md)
console.log('handleChange: <<<<')
}
}
}
</script>
