Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

anchor 中移除 . #74

Closed
luoyunchong opened this issue Jan 14, 2020 · 5 comments
Closed

anchor 中移除 . #74

luoyunchong opened this issue Jan 14, 2020 · 5 comments
Assignees
Milestone

Comments

@luoyunchong
Copy link

作者您好!
使用vue的单页面

<div id="preview" class="preview" style="width:100% !important" />

import Vditor from "vditor/dist/method.min";
Vditor.preview(document.getElementById("preview"), this.model.content, {
          anchor: true
 });

当h标签中的特殊字符。比如现这个 .NET-Core3.1 中的 .,a标签的id有特殊字符,无法导航锚点,希望作者对这个生成的id进行特殊字符处理

https://github.com/Vanessa219/vditor/blob/master/src/ts/markdown/anchorRender.ts

image

@Vanessa219
Copy link
Owner

我这里无法重现,可以告知一下浏览器么?或者将 https://github.com/Vanessa219/vditor/blob/master/demo/static-preview.html 页面下载后修改标题,看一下是否可以重现。
image

@luoyunchong
Copy link
Author

我知道原因了。
我用的是vue vue-router,定位锚点是通过 vue router中的配置,router.push或router.replace导航路由,而不是通过href。会出现锚点问题。

const scrollBehavior = function (to, from, savedPosition) {
  if (to.hash) {
    return {
      selector: to.hash,
      offset: {
        y: 100
      }
    }
  }
}

这是他报的错。
image
内部调用的是这个方法,document.querySelector(shouldScroll.selector);
selector为#vditorAnchor-.NET-Core3.1,存在.这个字符。
image

@Vanessa219 Vanessa219 changed the title anchor为true时,锚点存在特殊字符 anchor 中移除 . Jan 16, 2020
@HectorJiang
Copy link

作者您好!
使用vue的单页面

<div id="preview" class="preview" style="width:100% !important" />

import Vditor from "vditor/dist/method.min";
Vditor.preview(document.getElementById("preview"), this.model.content, {
          anchor: true
 });

当h标签中的特殊字符。比如现这个 .NET-Core3.1 中的 .,a标签的id有特殊字符,无法导航锚点,希望作者对这个生成的id进行特殊字符处理

https://github.com/Vanessa219/vditor/blob/master/src/ts/markdown/anchorRender.ts

image

大神,你这个在vue中怎么弄的呢,我怎么在vue cli中怎么都没弄好。

@luoyunchong
Copy link
Author

@Hectorwill 最新的代码已经修复这个问题了.vue router 有二种路由模式,如果mode是默认的hash,就通过 router.replace({ path: /post/${articleId}#${id} });来导航,

new Router({
   scrollBehavior
})
const scrollBehavior = function (to, from, savedPosition) {
  if (to.hash) {
    return {
      selector: to.hash,
      offset: {
        y: 100
      }
    }
  }
}

如果mode是history ,就是通过href 链接直接导航。

@HectorJiang
Copy link

@Hectorwill 最新的代码已经修复这个问题了.vue router 有二种路由模式,如果mode是默认的hash,就通过 router.replace({ path: /post/${articleId}#${id} });来导航,

new Router({
   scrollBehavior
})
const scrollBehavior = function (to, from, savedPosition) {
  if (to.hash) {
    return {
      selector: to.hash,
      offset: {
        y: 100
      }
    }
  }
}

如果mode是history ,就是通过href 链接直接导航。

好哒。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants