imzbf / md-editor-v3

Markdown editor for vue3, developed in jsx and typescript, dark theme、beautify content by prettier、render articles directly、paste or clip the picture and upload it...
https://imzbf.github.io/md-editor-v3
MIT License
1.6k stars 154 forks source link

使用标题时会跳转,希望不要跳转 #49

Closed tech-xs closed 2 years ago

tech-xs commented 2 years ago

使用标题时会跳转,点击标题会自动跳转, 希望点击之后不要跳转,这个怎么做

# Web文档
### Web文档
imzbf commented 2 years ago

你可以自定义一下标题就不会跳转,参考一下markedHeading这个api,文档示例地址:https://imzbf.github.io/md-editor-v3/demo/index#%F0%9F%9B%AC%20%E8%87%AA%E5%AE%9A%E4%B9%89%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84。切换成中文就会自动定位到示例位置。

tech-xs commented 2 years ago

好的 多谢 我试试

tech-xs commented 2 years ago

你可以自定义一下标题就不会跳转,参考一下markedHeading这个api,文档示例地址:https://imzbf.github.io/md-editor-v3/demo/index#%F0%9F%9B%AC%20%E8%87%AA%E5%AE%9A%E4%B9%89%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84。切换成中文就会自动定位到示例位置

在仅预览模式下 这个函数是无效的 markedHeading 仅预览模式属性 previewOnly

<template>
  <Mgr>
    <md-editor class="body" v-model="mdText"
               @markedHeading="markedHeading"
               previewOnly/>
  </Mgr>
</template>

<script>
import Mgr from '@/components/mgr/Mgr'
import MdEditor from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';
// import {getDocContent} from "@/api/doc/doc";

export default {
  name: "WebDoc",
  components: {Mgr, MdEditor},
  data() {
    return {
      mdText: '# AAAA'
    }
  },
  created() {
    // getDocContent('/web/webDoc').then(res => {
    //   this.mdText = res
    // })
  },
  methods:{
    markedHeading(text, level, raw){
      console.log('aaaaa')
      console.log(text)
      console.log(level)
      console.log(raw)
    }
  }
}
</script>
<style lang="less" scoped>
.body {
  margin-left: 50px;
  margin-right: 50px;
}
</style>
imzbf commented 2 years ago

抱歉,文档有点问题,请像下面这样使用:

<md-editor class="body" v-model="mdText" :markedHeading="markedHeading" preview-only />

imzbf commented 2 years ago

已在 #50 中回复示例