blog markdown php,时光小站-zblogphp安装了markdown编辑器插件后，点击锚点不跳转的解决方法...

zblogphp安装了markdown编辑器插件后，点击锚点不跳转的解决方法

发布于: 2018-05-13 所属分类:

标签:

773

最近在zblog翻译privoxy中文手册过程中， 发现了一个问题， markdown的[TOC]可以正常生成目录，但是点击目录不会跳转。

怀疑是markdown的TOC目录生成有问题， 通过查看源码, 锚点链接 代码是 2.软件安装 正常, 锚点位置代码是 完全正常.

进一步试验， 文章里面， 我直接加html代码 ttt, 然后文章页链接加上#ttt访问，还是一样不会跳转到锚点所在位置

为什么不跳转呢，百思不得解, 于是网上使用各种关键词搜索， 都没找到答案，看来还是得自己解决。

后来， 我又做了个尝试， 也是直接加html代码 ttt, 但是加的方式不一样，不是在网站后台编辑时加， 而是用谷歌浏览器的devtools上， 直接编辑文章内容加上 ， 然后发现， 这样加上的居然可以跳转。 于是，我推断，有可能是markdown的编辑器插件在前台文章内页初始化渲染的问题。

最后查看了markdown在文章内页的初始化脚本， 终于发现了问题所在. 这是markdown的初始化脚本

editormd.emoji = {path : "http://www.sgzhang.com/plugin/Editormd/images/github-emojis/",ext  : ".png"};$(function(){

$("#html_content").hide();

var EditormdView;

EditormdView = editormd.markdownToHTML("md_content", {

emoji : false,

toc : true,

tocm : true,

taskList : false,

tex : false,

flowChart : false,

sequenceDiagram : true,

htmlDecode: true,

});

});

从上面脚本中可以看到， 它首先执行$("#html_content").hide(); 把id为html_content的元素隐藏， 然后通过editormd.markdownToHTML("md_content", ... 把markdown内容渲染到id为md_content的元素, 这样就造成一个问题，md_content和html_content都存在一份文章内容, 两份内容， 也就有两个 ttt 这样的锚点标记，两个锚点的名称相同， 点击链接跳转时， 无法知道要跳转到哪一个锚点， 所以无法跳转。

知道了原因， 解决的方法就简单了， 只需修改一行代码, 把初始化脚本代码的 $("#html_content").hide(); 改成 $("#html_content").remove(); 即可.

发表评论

发表评论

暂无评论