背景信息

Editor.md是2015年开源的项目，那时还没有VUE3版本，所以网上也较少VUE3集成Editor.md的示例。不过还是有些大牛分享了集成的方法。

集成方法

1、下载和安装editor.md、scriptjs及 jquery.js

2、封装一个组件EditorMarkdown，以下为 EditorMarkdown.vue的内容。

3、引用组件EditorMarkdown，以下为App.vue的内容。

运行效果

父组件往子组件传递参数（场景：单击文档的导航节点时可往编辑器中传值），完成编辑器的初始化。

背景信息

Editor.md是2015年开源的项目，那时还没有VUE3版本，所以网上也较少VUE3集成Editor.md的示例。不过还是有些大牛分享了集成的方法。

例如：

vue集成editor.md_流年ln的博客-CSDN博客_vue使用editor.mdk

可是不能直接使用，需要进行一些调整。经过不断尝试，调整成功。

集成方法

1、下载和安装`editor.md、`scriptjs及 jquery.js

editor.md最新版本： v1.5.0，更新于 2015-06-09

Github下载

或者通过 NPM 安装：

npm install editor.md

将下载后的文件放置到VUE3项目的public/static目录下（VUE2是放置到与src并列的static目录中）。

放置好后的目录结构如下（EditorMarkdown.vue为下一步要创建的组件——集成了editor.md，且可获取Markdown内容和解析后的Html内容，可在任意页面中引用）。

安装scriptjs

npm install scriptjs --save

下载jquery.js

从官网下载：Download jQuery | jQuery

建议下载非压缩版的，便于调试，例如Download the uncompressed, development jQuery 3.6.1

将jquery.js放置到：static/editor.md/lib/jquery.js（下文组件中会引用此路径）。

2、封装一个组件EditorMarkdown，以下为 EditorMarkdown.vue的内容。

<template><div><link rel="stylesheet" href="/static/editor.md/css/editormd.css"><!-- editormd --><button id="get-md-btn">Get Markdown</button><button id="get-html-btn">Get HTML</button><div id="editor" style="z-index: 10" /></div>
</template><script>
import scriptjs from 'scriptjs'export default {name: 'EditorMarkdown',props: {modelValue: {type: String,required: false,default: ''},height: {type: String,required: false,default: '720px'}},data() {return {editor: {}}},mounted() {// 设置延迟初始化markdown编辑器, 因为只会初始化一次，需要等待数据加载完成之后再初始化setTimeout(() => {this.initEditor()}, 300)},methods: {initEditor() {(async() => {await this.fetchScript('/static/editor.md/lib/jquery.js')await this.fetchScript('/static/editor.md/editormd.js')// await this.fetchScript('/static/editor.md/editormd.amd.js')this.$nextTick(() => {// 内容var content = this.modelValueconst editor = window.editormd('editor', {path: '/static/editor.md/lib/',height: this.height,emoji: true,// 开启图片上传，图片上传重写了的imageUpload: true,saveHTMLToTextarea: true,// 可分区域定制样式主题theme        : (localStorage.theme) ? localStorage.theme : "dark",editorTheme  : (localStorage.editorTheme) ? localStorage.editorTheme : "3024-night",previewTheme : (localStorage.previewTheme) ? localStorage.previewTheme : "default",imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp","ico"],// 这里需要考虑返回值，所以封装了一层imageUploadURL: '/markdown/upload', //需在服务端定义接口htmlDecode: true, // 识别html标签// 监听更新，更新父组件值change: function() {this.$emit('update:modelValue', this.getMarkdown())},// 退出全屏onfullscreen: function() {// 原生JS修改层级var editor = document.getElementById('editor')editor.style['z-index'] = 13},// 全屏onfullscreenExit: function() {// 原生JS修改层级var editor = document.getElementById('editor')editor.style['z-index'] = 10},// 加载完成后再设置内容onload: function() {this.setMarkdown(content)// 加载ctrl + v粘贴图片插件window.editormd.loadPlugin('/static/editor.md/plugins/image-handle-paste/image-handle-paste', function() {editor.imagePaste()})}})const vm = this// 监听，改变父组件的值editor.on('change', function() {vm.$emit('update:modelValue', this.getMarkdown())})// this.editor = editor// eslint-disable-next-line no-undef$("#get-md-btn").bind('click', function(){  //获取左侧Markdown内容alert(editor.getMarkdown());});// eslint-disable-next-line no-undef$("#get-html-btn").bind('click', function() { //获取右侧html内容alert(editor.getHTML());});})})()},fetchScript(url) {return new Promise((resolve) => {scriptjs(url, () => {resolve()})})}}
}
</script><style scoped>
/* 上传图片弹窗样式有点问题，可能是冲突了 */
#editor::v-deep(.editormd-dialog-header) {padding: 0 20px;
}
</style>

3、引用组件EditorMarkdown，以下为App.vue的内容。

<template>
<!--  <img alt="Vue logo" src="./assets/logo.png">-->
<!--  <HelloWorld msg="Welcome to Your Vue.js App"/>--><h1>VUE3项目中引入 Editor.md</h1><EditorMarkdown modelValue="Welcome to Your Vue.js 3 + TypeScript App"/></template><script>
// import HelloWorld from './components/HelloWorld.vue'
import EditorMarkdown from "@/components/EditorMarkdown.vue";export default {name: 'App',components: {EditorMarkdown}
}
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

运行效果

单击上面的按钮可以分别获取左侧的Markdown内容（用于提交给服务端）和右侧的Html内容。

父组件往子组件传递参数（场景：单击文档的导航节点时可往编辑器中传值），完成编辑器的初始化。

修改APP.VUE的组件引用，通过组件EditorMarkdown 中定义的props/modelValue参数进行进行传值。

<EditorMarkdown modelValue="Welcome to Your Vue.js 3 + TypeScript App"/>

效果：编辑区显示了modelValue设置的值。

VUE3集成Markdown编辑器（http://editor.md.ipandao.com/）相关推荐

开源在线的MarkDown编辑器 --【Editor.md】
开源在线的MarkDown编辑器 --[Editor.md] 下载官网地址: https://pandao.github.io/editor.md/index.html Gitee 地址:https ...
在HTML页面中引用Markdown编辑器（Editor.md）
目录 1.下载Ediotor.md 2.引入Ediotor.md 3.确定Ediotor.md在哪里显示最近写博客项目,用到了Markdown编辑器,这里介绍一款国内好用的Markdown编辑器:E ...
Django集成Markdown编辑器【附源码】
专注内容写作的你一定不要错过markdown 简单介绍 markdown是一种标记语言,通过简单的标记语法可以使普通的文本内容具有一定的格式,使用非常简单,学习成本极低目前各大Blog平台都已支持m ...
jsp SpringMVC 前台页面集成Markdown编辑器及在页面上实现文档编辑保存预下载
首先在官网下载文档编辑插件插件项目地址:Editor.md - 开源在线 Markdown 编辑器将下载好的的插件项目解压,把解压好的包拷贝到我们项目的 webapp-static静态资源文件下. ...
前端页面插件集成-Markdown编辑器
页面插件集成-Markdown 下载MarkDown的插件包引入css.js.Jquary文件定义一个textarea区域作为MarkDown的载体初始化Markdown编辑器最终效果下载M ...
127.0.0.1/dokuwiki/install.php,DokuWiki安装+集成markdown编辑器editor.md
安装安装php和nginx yum install -y php70w php70w-gd php70w-xml php70w-fpm nginx 开机自启动 systemctl enable ng ...
Vue3——v-md-editor(markDown编辑器)使用教程
Vue3--v-md-editor安装使用教程安装 yarn add @wangeditor/editor # 或者 npm install @wangeditor/editor --saveyar ...
Vue + editor.Md 双向数据绑定Markdown编辑器（vue-editormd-wrap）
Vue + editor.Md 双向数据绑定组件(vue-editormd-wrap) 先贴上组件的npm主页和源码,如果有下载了开发过程中build版本的用户,将无法使用,请更新为最新版就可以正常使 ...
快速入门 Editor.MD---在Web项目里使用 Markdown 编辑器
博主参考的文章什么是Markdown Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式. 最直观的方法,CSDN写新文章用Markd ...

VUE3集成Markdown编辑器（http://editor.md.ipandao.com/）

背景信息

Editor.md是2015年开源的项目，那时还没有VUE3版本，所以网上也较少VUE3集成Editor.md的示例。不过还是有些大牛分享了集成的方法。

例如：

集成方法

1、下载和安装`editor.md、`scriptjs及 jquery.js

建议下载非压缩版的，便于调试，例如Download the uncompressed, development jQuery 3.6.1

将jquery.js放置到：static/editor.md/lib/jquery.js（下文组件中会引用此路径）。

2、封装一个组件EditorMarkdown，以下为 EditorMarkdown.vue的内容。

3、引用组件EditorMarkdown，以下为App.vue的内容。

运行效果

父组件往子组件传递参数（场景：单击文档的导航节点时可往编辑器中传值），完成编辑器的初始化。

VUE3集成Markdown编辑器（http://editor.md.ipandao.com/）相关推荐

最新文章

热门文章