这是最近用Vue写的一个Markeddown编辑器, 主要目的是扩展Vue-Manager的编辑器功能。核心功能引入了Marked插件,将Markedown文档解析为html。样式基本沿用了vm-editor，并增加了多种主题选择的功能。
项目已经打包上传到npm，欢迎使用。
| 预览地址 | luosijie.github.io/vm-markdown… |
|---|---|
| 源码地址 | github.com/luosijie/vm… |
安装
npm install --save vm-markdwon复制代码使用
import VmMarkdown from 'vm-markdwon'
export default {
...
components: {
VmMarkdown
},
methods: {
showHtml (data) {
console.log(data)
}
}
...
}复制代码<VmMarkdown :theme="theme"
width="1000px"
height="600px"
v-on:getHtml="showHtml"
:defaultText="intro">
</VmMarkdown>复制代码功能实现
vm-markdown作为一款 以简洁易用为目标 的编辑器, 核心解析功能由 Marked 来完成, 而其他功能主要为优化部分不熟悉Markdown语法用户的使用体验。
主要功能可以分为:
- 将Markdown文本插入编辑框
- 将Mardown文本解析为html，并实时预览
- 将Makdown解析的html加入自定义样式
- 实现表格的的快速输入功能
- 实现编辑区域的缩放功能
Markdown文本插入
兼容Firefox浏览器的文本插入函数
function insertText(dom,string) {
if (document.execCommand('insertText', false, string)) {
return
}else{
let start = dom.selectionStart
let end = dom.selectionEnd
dom.value = dom.value.substring(0, start) + string + dom.value.substring(end, dom.value.length)
dom.selectionStart = start + string.length;
dom.selectionEnd = start + string.length;
dom.focus()
}
}
export default insertText复制代码 import insertText from '../assets/js/insertText.js'
...
methods: {
insertText(string){
let content = document.querySelector('.vm-markdown-content')
insertText(content, string)
this.$emit('textChange', content.value)
}
}复制代码按钮绑定 insertText(string) 事件
...
<VmMarkdownButton icon="iconfont icon-bold" @click.native="insertText(' **Bold** ')"></VmMarkdownButton>
<VmMarkdownButton icon="iconfont icon-italic" @click.native="insertText(' *Italic* ')"></VmMarkdownButton>
...复制代码Markdown文本解析为html
Dom结构
...
<div class="vm-markdown-edit" :style="{backgroundColor: themeValue.bgLeft}">
// 输入部分
<textarea v-focus class="content-markdown" v-model="markdString"></textarea>
</div>
// 实时预览部分
<div class="vm-markdown-html" v-html="htmlString" :style="{backgroundColor: themeValue.bgRight}">
</div>
...复制代码引入 Marked 解析, 并实时预览
import marked from 'marked'
watch: {
markdString(value){
marked.setOptions({
renderer: new marked.Renderer(),
gfm: true,
tables: true,
breaks: true,
pedantic: false,
sanitize: false,
smartLists: true,
smartypants: false
})
this.htmlString = marked(value)
...
}
},复制代码增加自定义样式
因为 Marked 解析出来的html，是不带任何样式的，所以需要自定义样式，并确保最后输出带样式的html字符串
parseHtml: function () {
let style = {
ul: `
margin: 10px 20px;
list-style-type: square;
padding: 0;
`,
ol: `
margin: 10px 20px;
list-style-type: decimal;
padding: 0;
`,
li: `
display: list-item;
padding: 0;
`,
hr: `
margin: 15px 0;
border-top: 1px solid #eeeff1;
`,
pre: `
display: block;
margin: 10px 0;
padding: 8px;
border-radius: 4px;
background-color: #f2f2f2;
color: #656565;
font-size: 14px;
`,
blockquote: `
display: block;
border-left: 4px solid #ddd;
margin: 15px 0;
padding: 0 15px;
`,
img: `
margin: 20px 0;
`,
a: `
color: #41b883;
`,
table: `
border: 1px solid #eee;
border-collapse: collapse;
`,
tr: `
border: 1px solid #eee;
`,
th: `
padding: 8px 30px;
border-right: 1px solid #eee;
background-color: #f2f2f2;
`,
td: `
padding: 8px 30px;
border-right: 1px solid #eee;
`
}
let html = document.getElementsByClassName('vm-markdown-html')[0]
let tagNames = Object.keys(style)
for (let i = 0; i < tagNames.length; i++) {
let _tagNames = html.getElementsByTagName(tagNames[i])
if (_tagNames.length > 0) {
for (let j = 0; j < _tagNames.length; j++) {
_tagNames[j].style = style[tagNames[i]]
}
}
}
},
getHtml: function () {
let html = document.querySelector('.vm-markdown-html')
this.$emit('getHtml', html.innerHTML)
}
},复制代码表格的的快速输入
Markdown的表格是相对繁琐的输入，vm-markown借用图形化的操作实现快捷输入
<ul class="vm-markdown-table" v-insertTable:color="filterColor">
</ul>复制代码 directives:{
insertTable: {
inserted: function(el,binding){
// 定义总单元格数目 4*6 = 24
let length = 24
// 鼠标所在的单元格的坐标
let x = 0, y = 0
// 每个单元格赋值：行和列的坐标
for(let i=0; i<length; i++){
let setx = i%6 + 1
let sety = parseInt(i/6) + 1
let li = document.createElement('li')
li.setAttribute('data-x', setx)
li.setAttribute('data-y', sety)
el.appendChild(li)
}
// 鼠标滑过改变颜色
el.addEventListener('mouseover', function(evt){
if (evt.target.tagName === 'LI') {
x= evt.target.getAttribute('data-x')
y= evt.target.getAttribute('data-y')
let lis = el.querySelectorAll('li')
for(let i=0; i<lis.length; i++){
lis[i].style.backgroundColor = '#e0e0e0'
if(lis[i].dataset.x <= x && lis[i].dataset.y <= y){
lis[i].style.backgroundColor = binding.value
}
}
}
})
// 单击插入表格字符串
el.addEventListener('click', function(evt){
if(x && y){
let th = '| Head '
let td = '| Data '
let tl = '| --- '
let str = ''
let ths = '', tls = '', tds = ''
for(let i=0; i<x; i++){
ths = ths.concat(th)
tls = tls.concat(tl)
}
for(let j=0; j<y; j++){
for(let k=0; k<x; k++){
tds = tds.concat(td)
}
tds += ' |\n'
}
ths += ' |\n'
tls += ' |\n'
str += ths + tls + tds
document.execCommand('insertText', false, str)
}
})
}
}
}复制代码编辑区的缩放功能
实现缩放的layout函数
layout: function (event) {
let VmMarkdown = document.querySelector('.vm-markdown')
let VmMarkdownEdit = document.querySelector('.vm-markdown-edit')
function classHas(str){
return event.target.classList.contains(str)
}
if(classHas('icon-layout-zoom')){
if (VmMarkdown.style.position === 'fixed') {
VmMarkdown.style = 'width:' + this.width + ';' +
'height:' + this.height + ';'
}else{
VmMarkdown.style.position = 'fixed'
VmMarkdown.style.left = '0'
VmMarkdown.style.top = '0'
VmMarkdown.style.margin = '0'
VmMarkdown.style.width = '100%'
VmMarkdown.style.height = '100%'
}
}else if (classHas('icon-layout-left')) {
VmMarkdownEdit.style.width = '0'
}else if (classHas('icon-layout-right')) {
VmMarkdownEdit.style.width = '100%'
}else if (classHas('icon-layout-default')) {
VmMarkdownEdit.style.width = '50%'
}
},复制代码将layout绑定到顶部菜单的点击事件中
<VmMarkdownMenu @click.native="layout"></VmMarkdownMenu>复制代码先这样了 欢迎star