Vue组件开发 -- Markdown
利用marked 和 highlight.js开发markdown组件
实现效果图如下:
markdown组件已这种形式<Markdown v-model="markdown"></Markdown>
来绑定markdown的值
我们可以通过 value prop 和 input事件来达到这个效果用法详情
代码部分:
<Markdown v-model="markdown"></Markdown>
markdown组件
1.响应v-model
// 通过监听input事件 触发handleModelInput方法
<textarea v-model="val" @input="handleModelInput" ref="text" @keydown.tab="tabMarkdown"></textarea>
import marked from 'marked'
import highlightJs from 'highlight.js'
export default {
props: ['value'],
data() {
return {
val: this.value
}
},
methods: {
handleModelInput() {// 通过$emit来把值返回给父组件
this.$emit('input', this.val)
}
}
}
2.插入markdown语法
async insertImg(e) { // 插入图片
let formData = new FormData(),
img = '';
formData.append('img', e.target.files[0]);
try {
let data = await this.axios({
method: 'post',
url: 'http://localhost:3000/markdown_upload_img',
data: formData
})
img = data.data.img
} catch (e) {
console.log(e)
}
let val = ``
this.setCursorPosition(this.$refs.text, val, 6)
},
insertLink () { //插入链接
this.maskBol = false
let val = `[链接描述](${this.link})`
this.setCursorPosition(this.$refs.text, val, 5)
},
setCursorPosition (dom,val,posLen) { // 设置光标位置
var cursorPosition = 0;
if(dom.selectionStart){
cursorPosition = dom.selectionStart;
}
this.insertAtCursor(dom,val);
dom.focus();
dom.setSelectionRange(dom.value.length,cursorPosition + (posLen || val.length));
this.val = dom.value
},
insertAtCursor(dom, val) { // 光标所在位置插入字符
if (document.selection){
dom.focus();
sel = document.selection.createRange();
sel.text = val;
sel.select();
}else if (dom.selectionStart || dom.selectionStart == '0'){
let startPos = dom.selectionStart;
let endPos = dom.selectionEnd;
let restoreTop = dom.scrollTop;
dom.value = dom.value.substring(0, startPos) + val + dom.value.substring(endPos, dom.value.length);
if (restoreTop > 0){
dom.scrollTop = restoreTop;
}
dom.focus();
dom.selectionStart = startPos + val.length;
dom.selectionEnd = startPos + val.length;
} else {
dom.value += val;
dom.focus();
}
}
通过 setCursorPosition
跟 insertAtCursor
方法 插入光标所在位置并设置光标位置
- 转化markdown语法显示区域
<div class="render fmt" v-html="renderHtml"></div>
// 实时转化textarea里面的markdown语法
computed: {
renderHtml() {
marked.setOptions({
renderer: new marked.Renderer(),
gfm: true, //允许 Git Hub标准的markdown.
tables: true, //允许支持表格语法。该选项要求 gfm 为true。
breaks: true, //允许回车换行。该选项要求 gfm 为true。
pedantic: false, //尽可能地兼容 markdown.pl的晦涩部分。不纠正原始模型任何的不良行为和错误。
sanitize: true, //对输出进行过滤(清理),将忽略任何已经输入的html代码(标签)
smartLists: true, //使用比原生markdown更时髦的列表。 旧的列表将可能被作为pedantic的处理内容过滤掉.
smartypants: false, //使用更为时髦的标点,比如在引用语法中加入破折号。
highlight: function (code) {
return highlightJs.highlightAuto(code).value;
}
});
return marked(this.val)
}
}
因为习惯使用tab缩进,所以在textarea里面输入的时候 按tab会切换元素,不会进行缩进, 所有我们得处理下tab键
tabMarkdown (e) { // 禁止tabs键的默认事件,并设置tab等于4个空格
e.preventDefault()
let indent = ' '
let start = this.textarea.selectionStart
let end = this.textarea.selectionEnd
let selected = window.getSelection().toString()
selected = indent + selected.replace(/\n/g, '\n' + indent)
this.textarea.value = this.textarea.value.substring(0, start) + selected
+ this.textarea.value.substring(end);
this.textarea.setSelectionRange(start + indent.length, start
+ selected.length)
}
markdown样式我是直接从 segmentfault上抠下来的
原文地址:https://segmentfault.com/a/1190000012866925
Vue组件开发 -- Markdown的更多相关文章
- vue前端开发那些事——vue组件开发
vue的学习曲线不是很陡(相比其它框架,如anglarjs),官方文档比较全面,分为基础篇和高级篇.我们刚开始学习的时候,肯定像引用jquery那样,先把vue的js引进来,然后学习基础内容.如果仅仅 ...
- Vue组件开发实例(详细注释)
Vue组件开发实例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...
- Vue (三) --- Vue 组件开发
------------------------------------------------------------------好心情,会让你峰回路转. 5. 组件化开发 5.1 组件[compo ...
- vue 组件开发、vue自动化工具、axios使用与router的使用(3)
一. 组件化开发 1.1 组件[component] 在网页中实现一个功能,需要使用html定义功能的内容结构,使用css声明功能的外观样式,还要使用js定义功能的特效,因此就产生了一个功能先关的代码 ...
- 三: vue组件开发及自动化工具vue-cli
一: 组件化开发 1 组件 1: 组件(Component)是自定义封装的功能.在前端开发过程中,经常出现多个网页的功能是重复的,而且很多不同的网站之间,也存在同样的功能. 2: 什么是组件 而在网页 ...
- vue 开发系列(三) vue 组件开发
概要 vue 的一个特点是进行组件开发,组件的优势是我们可以封装自己的控件,实现重用,比如我们在平台中封装了自己的附件控件,输入控件等. 组件的开发 在vue 中一个组件,就是一个独立的.vue 文件 ...
- Vue组件开发实践之scopedSlot的传递
收录待用,修改转载已取得腾讯云授权 导语 现今的前端开发都讲究模块化组件化,即把公共的交互和功能封装到一个个的组件之中,在开发整体界面的时候就能像搭积木一样快速清晰高效.在使用Vue开发我们的vhtm ...
- Vue组件开发分享
在开始本文之前,你可能需要先了解以下相关内容: Vue.js 一款高性能轻量化的MVVM框架 Webpack 前端模块化代码构建工具 Vue组件介绍 基于vue.js高效的双向数据绑定特性,让我们 ...
- vue组件开发练习--焦点图切换
1.前言 vue用了有一段时间了,开发的后台管理系统也趋于完善,现在时间比较算是有点空闲吧!这个空闲时间我在研究vue的另外的一些玩法,比如组件,插件等.今天,我就分享一个组件的练手项目--焦点图切换 ...
随机推荐
- 浅谈自底向上的Shell脚本编程及效率优化
作者:沐星晨 出处:http://blog.csdn.net/sosodream/article/details/6276758 浅谈自底向上的Shell脚本编程及效率优化 小论文,大家多批评指导:) ...
- "啃下"插入排序
插入排序法基本原理 插入排序法较冒泡排序法和选择排序法更贴近生活,应该来说理解起来更快.如果你现在能够得到一副麻将,请把里面的“一万”到“六万”拿出来,打乱顺序,再重新排好,就像打麻将开始那样.是否需 ...
- Linux150个命令
命令 功能说明 线上查询及帮助命令(2个) man 查看命令帮助,命令的词典,更复杂的还有info,但不常用. help 查看Linux内置命令的帮助,比如cd命令. 文件和目录操作命令(18个) l ...
- python_字符串常用操作
name = "monicao"name.capitalize() #首字母大写print(name.capitalize()) print(name.count("o& ...
- windows部署iBase4J
所需环境:jdk 1.8.eclipse(myeclipse不可以).nginx.activeMQ .zookeeper.redis 第一步 下载jdk1.8 按步骤安装至指定位置即可 第二步 安装e ...
- Hibernate关系映射中的注解
一.@Entity 写在映射表的类上面,表示这是映射来的实体 二.@Id @Column(name = "fid", nullable = false) @Basic @Colum ...
- python写个简单的文件上传是有多难,要么那么复杂,要么各种,,,老子来写个简单的
def upload(url,params): ''' 上传文件到server,不适合大文件 @params url 你懂的 @params {"action":"xxx ...
- bzoj2229: [Zjoi2011]最小割(分治最小割+最小割树思想)
2229: [Zjoi2011]最小割 题目:传送门 题解: 一道非常好的题目啊!!! 蒟蒻的想法:暴力枚举点对跑最小割记录...绝对爆炸啊.... 开始怀疑是不是题目骗人...难道根本不用网络流?? ...
- ios学习--第三方框架-MBProgressHUD以及扩展
MBProgressHUD提示框官网地址:https://github.com/jdg/MBProgressHUD 一. 模式 首先, MBProgressHUD有以下几种视图模式. typedef ...
- ThinkPHP5.0最最最最最简单实例
ThinkPHP5.0最最最最最简单实例 一.效果图 二.操作步骤 1.用mysql数据库建立数据库 2.按照ThinkPHP官网的指示装好ThinkPHP5.0 tp5里面的目录结构如下: 3.配置 ...