Vue配置marked链接添加target="_blank"的方法

1."引入marked

package.json

"dependencies": {
  "marked": "^0.3.9"
}
import marked from "marked";

1.修改生成的HTML的方法

const renderer = new marked.Renderer();
//https://github.com/markedjs/marked/issues/655#issuecomment-383226346
const linkRenderer = renderer.link;
renderer.link = (href, title, text) => {
  const html = linkRenderer.call(renderer, href, title, text);
  return html.replace(/^<a /, '<a target="_blank" ');
};
const html = marked(markdown, { renderer });

Tips:marked参数配置

const renderer = new marked.Renderer();
//基本设置
marked.setOptions({
  renderer: renderer,
  gfm: true, //允许 Git Hub标准的markdown.
  tables: true, //允许支持表格语法（该选项要求 gfm 为true）
  breaks: true, //允许回车换行（该选项要求 gfm 为true）
  pedantic: false, //不纠正原始模型任何的不良行为和错误（默认为false）
  sanitize: false, //对输出进行过滤（清理），将忽略任何已经输入的html代码（标签）
  smartLists: true, //使用比原生markdown更时髦的列表
  smartypants: false //使用更为时髦的标点
});

ps：vue实现类似target="_blank"打开新窗口

//href的{}不能少
let {href} = this.$router.resolve({path:'/applySocSecCard'});
window.open(href, '_blank');

总结

以上所述是小编给大家介绍的Vue配置marked链接添加target="_blank"的方法,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • 网页打开新窗口target=_blank不符合标准

    "there is no attribute target for this element(in this HTML version)" 原来在HTML4.01/XHTML1.0/XHTML1.1严格DOCTYPE下,target="_blank".target="_self"等等语法都是无效的,我们只能通过JavaScript来变通实现. 有朋友问为什么不允许使用target="_blank"?这个属性很方便啊.呵呵,不知

  • 谈谈target=_new和_blank的不同之处

    谈谈target=_new和_blank的不同之处

    为了弄清楚这个问题我们来看三段代码产生的结果: code1: <html> <head> <title> new和blank的区别 </title> </head> <frameset cols="30%, *"> <!-- 分别调用target为new和blank的两段代码 --> <frame name="left" src="t_new.html"&g

  • 用正则表达式批量为a增加target=''_blank''新窗口打开的方法

    用正则表达式批量为a增加target=''_blank''新窗口打开的方法

    dreamweaver工具,在替换那里自己写了一个正则,批量匹配后,果然不让我失望!感叹正则的强大啊!正则规则如下 复制代码 代码如下: 正则查找  <(a.*?)> 替换成    <$1 target="_blank"> 如图 用js批量处理a标签的target属性_blank 若是针对整个页面的所有a标签,那可以在head区域加上<base target="_blank">即可解决了,但如果是针对某一块区域呢,那就只能用js代

  • Vue配置marked链接添加target="_blank"的方法

    1."引入marked package.json "dependencies": { "marked": "^0.3.9" } import marked from "marked"; 1.修改生成的HTML的方法 const renderer = new marked.Renderer(); //https://github.com/markedjs/marked/issues/655#issuecomment-3

  • vue实现微信分享链接添加动态参数的方法

    微信分享时 分享链接携带参数可能不是固定的 需要在分享的前一刻才知道 这里就是动态设置分享链接的基本写法 代码不是那么详尽 但大致流程如下 1.安装引用jssdk npm install --save weixin-js-sdk const wx=require('weixin-js-sdk') 2.通过config接口注入配置信息 const jsApiList = ['onMenuShareQQ', 'onMenuShareAppMessage', 'onMenuShareTimeline'

  • 在Vue组件上动态添加和删除属性方法

    如下所示: 在组件上添加属性 this.$set(this.data,"obj",value'); 删除属性this.$delete(this.data,"obj",value'); 以上这篇在Vue组件上动态添加和删除属性方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: Vue.js动态添加.删除选题的实例代码 详解Vue 动态添加模板的几种方法

  • 详解WordPress中给链接添加查询字符串的方法

    详解WordPress中给链接添加查询字符串的方法

    查询字符串指的是链接中后边的问号后的查询语句,格式为 key=value,多个查询语句用 & 符号分开.add_query_arg() 函数就是 WordPress 提供的一个方便的函数,可以帮你给一个链接添加一个或者多个查询语句. 有人会问,添加查询字符串直接在链接后边手动追加不就可以了吗?这样有时候可行,但链接如果本身就有查询字符串就会造成格式错误的问题,而且也不利于 PHP 编写管理,而 add_query_arg() 函数帮你把一切都想好了,你只需要给出要添加查询字符串的链接和一个或多个

  • Vue实现动态创建和删除数据的方法

    视图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> //导入vue.js <script type="text/javascript" src="./vue.js"></script> //非常简单了设置了一下css样式 <style typ

  • 用javascript来控制 链接的target 属性的代码

    在HTML 4.0 Strict和XHTML 1.0 STRICT里不允许在<a>标签里使用target属性,这是一件令网页设计者懊恼的事.在过渡的规范里还是允许使用的.但通过一定的方法,我们可以解决这一问题. HTMl4.0规范里拿掉了target属性.但它添加了另外一个属性:rel.这个属性是用来指定包含链接的文档和所链接文档之间的关系的.规范里定义了其属性值(如:next,previous,chapter,section),在这些属性里大多数是用来定义一个大文档里各个小部分之间的关系的.

  • VUE 配置vue-devtools调试工具及安装方法

    1. 通过 Git 克隆项目到本地 git clone https://github.com/vuejs/vue-devtools.git 2. Git 进入到 vue-devtools 所在目录,然后运行以下两个指令. 先运行 npm install 安装项目依赖 再运行 npm run build 进行编译生成 这两条指令的运行都需要一定的时间,请耐心等待,build 成功后如下图: 3.修改安装目录vue-devtools\shells\chrome 中 的manifest.json文件.

  • vue配置多代理服务接口地址操作

    一.介绍 随着微服务架构的流行,后台项目逐渐被拆分成不同的模块进行通信,但是前端还是只有一个项目所以在访问不同模块后台时,需要请求不同的地址,在vue项目中,通过配置代理可以进行后端服务器接口地址访问,当需要访问不同微服务的后端接口时就需要配置不同的地址. 二.代码 config/index.js文件中配置代理地址: 自己项目中定义所有接口api管理文件src/api/getData.js: 页面调用接口时xxx.vue 三.总结 1.vue使用配置多代理地址方式可以访问不同的项目地址,使用以上

  • Vue 配置代理详情

    Vue 配置代理详情

    目录 方式一 方式二 vue 脚手架配置代理总结 方式一 首先安装 axios:npm i axios 修改 App.vue <template>   <div>     <button @click="getBookInfo">获取书籍信息</button>   </div> </template> <script> import axios from "axios" export

随机推荐