宁波哪里有网站建设,谷歌广告投放步骤,网站平台优化,免费cms网站当前编辑器作者已经很久没有维护了#xff0c;已经不推荐大家使用了#xff01;#xff01;#xff01; 推荐另一个markdown编辑器 md-editor-v3 使用方式查看我另一篇博客 https://blog.csdn.net/weixin_44192363/article/details/143669649 最近一直在找一个既好用又好看…当前编辑器作者已经很久没有维护了已经不推荐大家使用了 推荐另一个markdown编辑器 md-editor-v3 使用方式查看我另一篇博客 https://blog.csdn.net/weixin_44192363/article/details/143669649 最近一直在找一个既好用又好看的编辑器然而找了半天要不就是和我的后台项目有冲突要不就是不好看偶然间发现掘金使用的编辑器是bytemd看是挺好看的还有很多种不同的风格并且我的后台居然支持唯一的缺点就是官方的文档极其简陋还是英文 官方体验网址 https://bytemd.js.org/playground/
npm install bytemd/vue或者使用yarn yarn add bytemd/vue 上述命令只能下载基本的依赖这里必须提一嘴由于bytemd把所有的组件全部拆分开来了所以依赖得一个一个的下GitHub上显示的依赖有如下几种 依赖的下载格式如下其他的一样 npm install bytemd/plugin-breaks
以下是示例代码因为是我自己用所以基本上把所有依赖都下载了
templatediv classdetailsEditorclasseditos:valuevalue:pluginsplugins:localezhHanschangehandleChange:uploadImagesuploadImage/Viewerclassviewer:tabindex2:sanitize23:valuevalue:pluginsplugins:localezhHans/Viewer/div
/templatescript
// 这里就是引入所有的扩展的插件
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 langscss
//.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如果遇到下面这种异常根据我标注的红色方框中的信息下载依赖即可具体的异常可能和我的不太一样根据你自己的异常提示下载即可 使用下来发现数学公式和图标貌似出了点问题不过其他的都还好如果大家有什么办法能解决数学公式和图标异常的方法欢迎大家在评论区告诉我 个人网站 https://web.yujky.cn/ 租户体验租户 用户名cxks 密码 cxks123
