基于vue2编写的md编辑器-Bytemd

最近一直在找一个既好用又好看的编辑器，然而找了半天，要不就是和我的后台项目有冲突，要不就是不好看，偶然间发现掘金使用的编辑器是bytemd，看是挺好看的，还有很多种不同的风格，并且我的后台居然支持！！唯一的缺点就是官方的文档极其简陋，还是英文

官方体验网址 https://bytemd.js.org/playground/

npm install @bytemd/vue（或者使用yarn） yarn add @bytemd/vue

上述命令只能下载基本的依赖，这里必须提一嘴，由于bytemd把所有的组件全部拆分开来了，所以依赖得一个一个的下，GitHub上显示的依赖有如下几种

依赖的下载格式如下（其他的一样）
npm install @bytemd/plugin-breaks

以下是示例代码（因为是我自己用，所以基本上把所有依赖都下载了）

<template><div class="details"><Editorclass="editos":value="value":plugins="plugins":locale="zhHans"@change="handleChange":uploadImages="uploadImage"/><Viewerclass="viewer":tabindex="2":sanitize="23":value="value":plugins="plugins":locale="zhHans"></Viewer></div>
</template><script>
// 这里就是引入所有的扩展的插件
import {Editor, Viewer} from '@bytemd/vue'
import gfm from '@bytemd/plugin-gfm'
import highlight from '@bytemd/plugin-highlight'
import breaks from '@bytemd/plugin-breaks'
import footnotes from '@bytemd/plugin-footnotes'
import frontmatter from '@bytemd/plugin-frontmatter'
import gemoji from '@bytemd/plugin-gemoji'
import mediumZoom from '@bytemd/plugin-medium-zoom'
import mermaid from '@bytemd/plugin-mermaid'
import mathssr from '@bytemd/plugin-math-ssr'
import {getProcessor} from 'bytemd'
import zhHans from 'bytemd/locales/zh_Hans.json'
import gfmLocale from '@bytemd/plugin-gfm/locales/zh_Hans.json';
import mathLocale from '@bytemd/plugin-math/locales/zh_Hans.json';
import mermaidLocale from '@bytemd/plugin-mermaid/locales/zh_Hans.json';
import 'highlight.js/styles/vs.css'
// import 'juejin-markdown-themes/dist/juejin.min.css'  // 掘金风格的css文件
import 'juejin-markdown-themes/dist/channing-cyan.min.css'  // channing-cyan风格的css文件，这个确实很好看
import 'bytemd/dist/index.css'  // 导入编辑器样式const plugins = [// 将所有的扩展功能放入插件数组中，然后就可以生效了gfm({locale: gfmLocale}),// highlightssr(),breaks(),highlight(),mermaid({locale: mermaidLocale}),mathssr({locale: mathLocale}),frontmatter(),footnotes(),gemoji(),mediumZoom()
]export default {components: {Editor, Viewer}, // 组件注册data() {return {value: '', // 获取的内容plugins,  // 插件zhHans, // 简体中文}},methods: {// 获取书写文档内容handleChange(v) {console.warn(v)this.$emit("input", v)this.value = v},// 上传图片 点击触发上传图片事件，大家获取文件把图片上传服务器然后返回url既可async uploadImage(files) {console.log('files', files)return [{title: files.map((i) => i.name),url: 'http'}]}}
}
</script>
<style lang="scss">
//.details {//  position: fixed;
//  top: 60px;
//  left: 0;
//  width: 100vw;
//  height: 100vh;
//  .editos {//    .bytemd {//      height: calc(100vh - 150px) !important; // 改变编辑器默认高度，不需要的可以不配置
//    }
//  }
//  .viewer {//    margin-top: 20px;
//    background: #fff;
//    padding: 20px;
//    .bytemd {//      height: calc(100vh - 200px) !important;
//    }
//  }
//  .btn {//    flex-direction: row-reverse;
//    margin: 20px;
//    .el-button {//      margin-right: 20px;
//    }
//  }
//}
</style>

如果遇到下面这种异常，根据我标注的红色方框中的信息下载依赖即可，具体的异常可能和我的不太一样，根据你自己的异常提示下载即可

使用下来，发现数学公式和图标貌似出了点问题，不过其他的都还好，如果大家有什么办法能解决数学公式和图标异常的方法，欢迎大家在评论区告诉我
参考文章：

http://yujky.cn/#/article/details/1538541154178723841

我的blog后台，里面有应用Bytemd，欢迎大家拜访，https://console.yujky.cn/，目前只支持支付宝扫码登录，微信扫码虽然实现了功能，但之前用的是公司的商户号，现在已经废弃了该功能，后续会增加qq扫码功能（正在申请中…），也可以使用测试账号：
登录用户名：test
密码：test

基于vue2编写的md编辑器-Bytemd相关推荐

我也来晒Flex编写的工作流编辑器
我也来晒Flex编写的工作流编辑器 <?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:offi ...
「Android」详细全面的基于vue2.0Weex接入过程（Android视角）
本文来自尚妆Android团队路飞发表于尚妆github博客,欢迎订阅! 一.说在前面的话目前weex已在尚妆旗下的达人店app上线了一个常用的订单管理页面,截止目前Android上未发现问题,渲 ...
基于gulp编写的一个简单实用的前端开发环境
自从Node.js出现以来,基于其的前端开发的工具框架也越来越多了,从Grunt到Gulp再到现在很火的WebPack,所有的这些新的东西的出现都极大的解放了我们在前端领域的开发,作为一个在前端领域里 ...
javascript官方文档_基于Javascript编写的开源Markdown和HTML相互转换器——showdown
介绍 showdown是一个基于Javascript编写的开源Markdown和HTML相互转换器,showdown可以用在客户端(浏览器)或者服务端(nodejs).shodown还支持原始规范中未 ...
基于vue2.0的一个豆瓣电影App
1.搭建项目框架使用vue-cli 没安装的需要先安装 npm intall -g vue-cli 使用vue-cli生成项目框架 vue init webpack-simple vue-movie ...
Markdown (CSDN) MD编辑器（三）- 图片缩放、指定尺寸、居中、左对齐、右对齐
目录一.csdn的MD编辑器插入图片的方式: 1.1 图片对齐方式 1.2 指定图片尺寸二.内嵌HTML语法实现插入图片三.实例讲解 Markdown是一种轻量级标记语言,排版语法简洁,让人 ...
基于webassembly的前端视频编辑器（未写完）
基于webassembly的前端视频编辑器 (这是2020年8月5日写好的草稿,2021年9月9日才想起来还有这个草稿没发,今天登上网站才发现有人在2021年6月给我发了私信问assembly相关问题 ...
基于Vue2.x的前端架构，我们是这么做的
通过Vue CLI可以方便的创建一个Vue项目,但是对于实际项目来说还是不够的,所以一般都会根据业务的情况来在其基础上添加一些共性能力,减少创建新项目时的一些重复操作,本着学习和分享的目的,本文会介绍 ...
基于WebAssembly的前端视频编辑器设计与实现（个人毕设论文删改）
前言: 本来想通过一篇更精简通俗易懂的博文讲述的,但是写到一半发现要讲的东西太多,于是太监了,因此我把个人毕设做了一些删改,把工程源码放在了末尾,发出来供各位参考. (2021年10月8日更新了图片, ...

基于vue2编写的md编辑器-Bytemd

基于vue2编写的md编辑器-Bytemd相关推荐

最新文章

热门文章