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的另外的一些玩法,比如组件,插件等.今天,我就分享一个组件的练手项目--焦点图切换 ...
随机推荐
- Pyhton学习——Day61
class Pagination(object): def __init__(self,totalCount,currentPage,perPageItemNum=10,maxPageNum=7): ...
- org.xml.sax.SAXParseException: Failed to read schema document 的原因分析与解决方法
现象: org.xml.sax.SAXParseException: schema_reference.4: Failed to read schema documen t 'http://www.s ...
- NOIP 2017 时间复杂度 (模拟)
题目大意:略 傻了吧唧的我wa了好几次 我的模拟功底真的不咋地 linux下用gets会报错,我用的fgets #include <string> #include "stdio ...
- Shell(二)运算符
基本运算符 Shell 和其他编程语言一样,支持多种运算符,包括: 算数运算符 关系运算符 布尔运算符 字符串运算符 文件测试运算符 原生bash不支持简单的数学运算,但是可以通过其他命令来实现,例如 ...
- Python-基础-day4
深浅copy 1.先看赋值运算 h1 = [1,2,3,['aihuidi','hhhh']] h2 = h1 h1[0] = 111 print(h1) print(h2) #结果: # [111, ...
- Java 多线程均匀处理同一个List中的数据
需求:使用多线程来处理同一个List中的数据,希望每个线程处理的数量是均匀的 事例代码如下: public class Test { static class HandleThread extends ...
- jenkins 安装遇到的坑
最后启用安全的时候遇到一点坑,直接写了一个用户上去,没有勾选权限,然后在登录就说没有 overright/等,然后需要修改配置文件conf.xml 在主目录下. ...
- sql查询语句中on和where的区别
sql中的连接查询分为3种, cross join,inner join,和outer join , 在 cross join和inner join中,筛选条件放在on后面还是where后面是没区别 ...
- cogs 2170. 大整数取模
2170. 大整数取模 ★ 输入文件:bigint.in 输出文件:bigint.out 简单对比时间限制:1 s 内存限制:256 MB [题目描述] 输入正整数n和m,输出n mo ...
- iOS-MBProgressHUD使用
在码代码过程中,我们经常用到MBProgressHUD,但我很少实例化使用,一般都是偷个懒直接显示隐藏,这里贴上详解,以便日后有样式要求时使用. 1,MBProgressHUD常用属性和用法Demo ...