This repository has been archived on 2023-08-30. You can view files and clone it, but cannot push or open issues/pull-requests.
bytedo
/
wcui
Archived
1
0
Fork 0
Code Issues Pull Requests Wiki Activity

优化MD解析;修复MD编辑器样式定位bug

old
宇天 2017-09-27 01:20:50 +08:00
parent a597117368
commit 055d15436a
4 changed files with 46 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
js/lib/marked/main.js
View File

@ -799,7 +799,7 @@ function Renderer(options) {
} }
Renderer.prototype.code = function(code, lang, escaped) { Renderer.prototype.code = function(code, lang, escaped) {
code = code.replace(/&lt;script&gt;/g, '<script>') code = code.replace(/&lt;script([^&]*?)&gt;/g, '<script$1>')
.replace(/&lt;\/script&gt;/g, '</script>') .replace(/&lt;\/script&gt;/g, '</script>')
if (this.options.highlight) { if (this.options.highlight) {
var out = this.options.highlight(code, lang); var out = this.options.highlight(code, lang);

6
js/lib/meditor/addon/attach.js
View File

@ -314,7 +314,7 @@ define([
menubar: false, menubar: false,
shade: false, shade: false,
fixed: true, fixed: true,
offset: [offset.top + 37 - document.body.scrollTop], offset: [offset.top + 37 - document.documentElement.scrollTop],
tab: 2, tab: 2,
attach: '', attach: '',
attachAlt: '', attachAlt: '',
@ -355,10 +355,10 @@ define([
}, },
$confirm: function(){ $confirm: function(){
var lvm = yua.vmodels[layid] var lvm = yua.vmodels[layid]
if(!lvm.img || !lvm.imgAlt){ if(!lvm.attach || !lvm.attachAlt){
return layer.alert('描述和地址不能为空') return layer.alert('描述和地址不能为空')
} }
var val = '![' + lvm.imgAlt + '](' + lvm.img + ')' var val = '![' + lvm.attachAlt + '](' + lvm.attach + ')'
ME.insert(vm.$editor, val) ME.insert(vm.$editor, val)
lvm.no() lvm.no()

48
js/lib/meditor/addon/base.js
View File

@ -31,7 +31,7 @@ define(['lib/layer/base'], function(){
h1: function(elem, vm){ h1: function(elem, vm){
var offset = yua(elem).offset(), var offset = yua(elem).offset(),
wrap = ME.selection(vm.$editor, true) || '在此输入文本', wrap = ME.selection(vm.$editor, true) || '在此输入文本',
h1Obj = layer.open({ h1ID = layer.open({
type: 7, type: 7,
menubar: false, menubar: false,
shadeClose: true, shadeClose: true,
@ -39,10 +39,10 @@ define(['lib/layer/base'], function(){
$insert: function(level){ $insert: function(level){
wrap = wrap.replace(/^#{1,6} /, '') wrap = wrap.replace(/^#{1,6} /, '')
wrap = ME.repeat('#', level) + ' ' + wrap wrap = ME.repeat('#', level) + ' ' + wrap
ME.insert(vm.$editor, wrap) ME.insert(vm.$editor, wrap, true)
layer.close(h1Obj) layer.close(h1ID)
}, },
offset: [offset.top + 37 - document.body.scrollTop, 'auto', 'auto', offset.left - document.body.scrollLeft], offset: [offset.top + 37 - document.documentElement.scrollTop, 'auto', 'auto', offset.left - document.documentElement.scrollLeft],
content: '<ul class="do-meditor-h1 do-fn-noselect meditor-font">' content: '<ul class="do-meditor-h1 do-fn-noselect meditor-font">'
+ '<li :click="$insert(1)" class="h1">一级标题</li>' + '<li :click="$insert(1)" class="h1">一级标题</li>'
+ '<li :click="$insert(2)" class="h2">二级标题</li>' + '<li :click="$insert(2)" class="h2">二级标题</li>'
@ -57,7 +57,7 @@ define(['lib/layer/base'], function(){
var wrap = ME.selection(vm.$editor) || '在此输入文本' var wrap = ME.selection(vm.$editor) || '在此输入文本'
wrap = '> ' + wrap wrap = '> ' + wrap
ME.insert(vm.$editor, wrap) ME.insert(vm.$editor, wrap, true)
}, },
bold: function(elem, vm){ bold: function(elem, vm){
var wrap = ME.selection(vm.$editor) || '在此输入文本', var wrap = ME.selection(vm.$editor) || '在此输入文本',
@ -65,7 +65,7 @@ define(['lib/layer/base'], function(){
wrap = wrap === wraped ? ('**' + wrap + '**') : wraped wrap = wrap === wraped ? ('**' + wrap + '**') : wraped
ME.insert(vm.$editor, wrap) ME.insert(vm.$editor, wrap, true)
}, },
italic: function(elem, vm){ italic: function(elem, vm){
var wrap = ME.selection(vm.$editor) || '在此输入文本', var wrap = ME.selection(vm.$editor) || '在此输入文本',
@ -73,7 +73,7 @@ define(['lib/layer/base'], function(){
wrap = wrap === wraped ? ('_' + wrap + '_') : wraped wrap = wrap === wraped ? ('_' + wrap + '_') : wraped
ME.insert(vm.$editor, wrap) ME.insert(vm.$editor, wrap, true)
}, },
through: function(elem, vm){ through: function(elem, vm){
var wrap = ME.selection(vm.$editor) || '在此输入文本', var wrap = ME.selection(vm.$editor) || '在此输入文本',
@ -81,22 +81,22 @@ define(['lib/layer/base'], function(){
wrap = wrap === wraped ? ('~~' + wrap + '~~') : wraped wrap = wrap === wraped ? ('~~' + wrap + '~~') : wraped
ME.insert(vm.$editor, wrap) ME.insert(vm.$editor, wrap, true)
}, },
unordered: function(elem, vm){ unordered: function(elem, vm){
var wrap = ME.selection(vm.$editor) || '在此输入文本' var wrap = ME.selection(vm.$editor) || '在此输入文本'
wrap = '* ' + wrap wrap = '* ' + wrap
ME.insert(vm.$editor, wrap) ME.insert(vm.$editor, wrap, false)
}, },
ordered: function(elem, vm){ ordered: function(elem, vm){
var wrap = ME.selection(vm.$editor) || '在此输入文本' var wrap = ME.selection(vm.$editor) || '在此输入文本'
wrap = '1. ' + wrap wrap = '1. ' + wrap
ME.insert(vm.$editor, wrap) ME.insert(vm.$editor, wrap, false)
}, },
hr: function(elem, vm){ hr: function(elem, vm){
ME.insert(vm.$editor, '\n\n---\n\n') ME.insert(vm.$editor, '\n\n---\n\n', false)
}, },
link: function(elem, vm){ link: function(elem, vm){
var offset = yua(elem).offset(), var offset = yua(elem).offset(),
@ -118,10 +118,10 @@ define(['lib/layer/base'], function(){
+ lvm.link + lvm.link
+ (lvm.linkTarget === 1 ? ' "target=_blank"' : '') + (lvm.linkTarget === 1 ? ' "target=_blank"' : '')
+ ')' + ')'
ME.insert(vm.$editor, val) ME.insert(vm.$editor, val, false)
layer.close(layid) layer.close(layid)
}, },
offset: [offset.top + 37 - document.body.scrollTop, 'auto', 'auto', offset.left - document.body.scrollLeft], offset: [offset.top + 37 - document.documentElement.scrollTop, 'auto', 'auto', offset.left - document.documentElement.scrollLeft],
content: '<div class="do-meditor-common meditor-font">' content: '<div class="do-meditor-common meditor-font">'
+ '<section><span class="label">链接文字</span>' + '<section><span class="label">链接文字</span>'
+ '<input class="input" :duplex="linkName" />' + '<input class="input" :duplex="linkName" />'
@ -140,7 +140,7 @@ define(['lib/layer/base'], function(){
}) })
}, },
time: function(elem, vm){ time: function(elem, vm){
ME.insert(vm.$editor, new Date().format()) ME.insert(vm.$editor, new Date().format(), false)
}, },
face: function(elem, vm){ face: function(elem, vm){
var offset = yua(elem).offset(), var offset = yua(elem).offset(),
@ -151,12 +151,12 @@ define(['lib/layer/base'], function(){
fixed: true, fixed: true,
shadeClose: true, shadeClose: true,
arr: getOrderArr(36), arr: getOrderArr(36),
offset: [offset.top + 37 - document.body.scrollTop, 'auto', 'auto', offset.left - document.body.scrollLeft], offset: [offset.top + 37 - document.documentElement.scrollTop, 'auto', 'auto', offset.left - document.documentElement.scrollLeft],
content: '<ul class="do-meditor-face">' content: '<ul class="do-meditor-face">'
+ '<li class="item" :repeat="arr" ><img :attr-src="ME.path + \'/addon/face/\' + el + \'.gif\'" :click="$insert(this.src)" /></li>' + '<li class="item" :repeat="arr" ><img :attr-src="ME.path + \'/addon/face/\' + el + \'.gif\'" :click="$insert(this.src)" /></li>'
+ '</ul>', + '</ul>',
$insert: function(src){ $insert: function(src){
ME.insert(vm.$editor, '![](' + src + ')') ME.insert(vm.$editor, '![](' + src + ')', false)
layer.close(layid) layer.close(layid)
} }
}) })
@ -168,7 +168,7 @@ define(['lib/layer/base'], function(){
title: '0行 x 0列', title: '0行 x 0列',
fixed: true, fixed: true,
shadeClose: true, shadeClose: true,
offset: [offset.top + 37 - document.body.scrollTop, 'auto', 'auto', offset.left - document.body.scrollLeft], offset: [offset.top + 37 - document.documentElement.scrollTop, 'auto', 'auto', offset.left - document.documentElement.scrollLeft],
matrix: objArr(10).map(function(){return objArr(10)}), matrix: objArr(10).map(function(){return objArr(10)}),
content: '<ul class="do-meditor-table">' content: '<ul class="do-meditor-table">'
+ '<li :repeat="matrix"><span :repeat-o="el" :class="{active: o.v}" :data="{x: $index, y: $outer.$index}"></span></li>' + '<li :repeat="matrix"><span :repeat-o="el" :class="{active: o.v}" :data="{x: $index, y: $outer.$index}"></span></li>'
@ -212,7 +212,7 @@ define(['lib/layer/base'], function(){
var val = '\n\n' + ME.repeat('| 表头 ', x) + '|\n' var val = '\n\n' + ME.repeat('| 表头 ', x) + '|\n'
+ ME.repeat('| -- ', x) + '|\n' + ME.repeat('| -- ', x) + '|\n'
+ ME.repeat(ME.repeat('| ', x) + '|\n', y) + ME.repeat(ME.repeat('| ', x) + '|\n', y)
ME.insert(vm.$editor, val) ME.insert(vm.$editor, val, false)
layer.close(id) layer.close(id)
} }
}) })
@ -236,10 +236,10 @@ define(['lib/layer/base'], function(){
} }
var val = '![' + lvm.imgAlt + '](' + lvm.img + ')' var val = '![' + lvm.imgAlt + '](' + lvm.img + ')'
ME.insert(vm.$editor, val) ME.insert(vm.$editor, val, false)
layer.close(layid) layer.close(layid)
}, },
offset: [offset.top + 37 - document.body.scrollTop, 'auto', 'auto', offset.left - document.body.scrollLeft], offset: [offset.top + 37 - document.documentElement.scrollTop, 'auto', 'auto', offset.left - document.documentElement.scrollLeft],
content: '<div class="do-meditor-common meditor-font">' content: '<div class="do-meditor-common meditor-font">'
+ '<section><span class="label">图片描述</span>' + '<section><span class="label">图片描述</span>'
+ '<input class="input" :duplex="imgAlt" />' + '<input class="input" :duplex="imgAlt" />'
@ -254,12 +254,12 @@ define(['lib/layer/base'], function(){
}) })
}, },
file: function(elem, vm){ file: function(elem, vm){
this.link(elem, vm) this.link(elem, vm, false)
}, },
inlinecode: function(elem, vm){ inlinecode: function(elem, vm){
var wrap = ME.selection(vm.$editor) || '在此输入文本' var wrap = ME.selection(vm.$editor) || '在此输入文本'
wrap = '`' + wrap + '`' wrap = '`' + wrap + '`'
ME.insert(vm.$editor, wrap) ME.insert(vm.$editor, wrap, true)
}, },
blockcode: function(elem, vm){ blockcode: function(elem, vm){
var layid = layer.open({ var layid = layer.open({
@ -307,7 +307,7 @@ define(['lib/layer/base'], function(){
var lvm = yua.vmodels[layid] var lvm = yua.vmodels[layid]
var val = '\n```' + lvm.lang + '\n' + (lvm.code || '//在此输入代码') + '\n```\n' var val = '\n```' + lvm.lang + '\n' + (lvm.code || '//在此输入代码') + '\n```\n'
ME.insert(vm.$editor, val) ME.insert(vm.$editor, val, false)
layer.close(layid) layer.close(layid)
}, },
content: '<div class="do-meditor-codeblock meditor-font">' content: '<div class="do-meditor-codeblock meditor-font">'
@ -340,7 +340,7 @@ define(['lib/layer/base'], function(){
layer.open({ layer.open({
type: 7, type: 7,
title: '关于编辑器', title: '关于编辑器',
offset: [offset.top + 37 - document.body.scrollTop], offset: [offset.top + 37 - document.documentElement.scrollTop],
content: '<div class="do-meditor-about meditor-font">' content: '<div class="do-meditor-about meditor-font">'
+ '<pre>' + '<pre>'
+ ' __ __ _____ _ _ _\n' + ' __ __ _____ _ _ _\n'

34
js/lib/meditor/main.js
View File

@ -7,7 +7,7 @@
"use strict"; "use strict";
var log = console.log;
define([ define([
'yua', 'yua',
'lib/prism/base', 'lib/prism/base',
@ -264,7 +264,6 @@ define([
} }
return li.join('\n') return li.join('\n')
}) })
log(match)
return '\n' + match.trim() return '\n' + match.trim()
}) })
} }
@ -353,6 +352,21 @@ define([
console.log('%c没有对应的插件%c[%s]', 'color:#f00;', '',name) console.log('%c没有对应的插件%c[%s]', 'color:#f00;', '',name)
} }
} }
vm.$paste = function(ev){
ev.preventDefault()
var txt = ev.clipboardData.getData('text/plain').trim(),
html = ev.clipboardData.getData('text/html').trim();
html = html2md(html)
if(html){
ME.insert(this, html)
}else if(txt) {
ME.insert(this, txt)
}
vm.plainTxt = this.value
}
}, },
$ready: function(vm){ $ready: function(vm){
vm.$editor = document.querySelector('#' + vm.$id) vm.$editor = document.querySelector('#' + vm.$id)
@ -390,22 +404,10 @@ define([
//编辑器成功加载的回调 //编辑器成功加载的回调
vm.$onSuccess(ME.get(), vm) vm.$onSuccess(ME.get(), vm)
}, },
$paste: function(ev){ $paste: yua.noop,
var txt = ev.clipboardData.getData('text/plain').trim(),
html = ev.clipboardData.getData('text/html').trim();
html = html2md(html)
if(html){
ME.insert(this, html)
}else if(txt) {
ME.insert(this, txt)
}
ev.preventDefault()
},
$compile: function(){ $compile: function(){
var txt = this.plainTxt.trim() var txt = this.plainTxt.trim()
txt = txt.replace(/<script>/g, '&lt;script&gt;') txt = txt.replace(/<script([^>]*?)>/g, '&lt;script$1&gt;')
.replace(/<\/script>/g, '&lt;/script&gt;') .replace(/<\/script>/g, '&lt;/script&gt;')
//只解析,不渲染 //只解析,不渲染