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

移植MEditor适配最新的UI库,修复一些bug;调整下拉选择的样式

old
宇天 2017-09-29 13:57:17 +08:00
parent d70bb13ad6
commit 81a764db68
9 changed files with 156 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/basic-elem.css
View File

File diff suppressed because one or more lines are too long

4
css/basic-elem.scss
View File

@ -109,11 +109,9 @@
/* select框 */ /* select框 */
.do-ui-select {display:inline-block;min-height:30px;padding:0 25px 0 5px;border:1px solid nth($cp, 3);background:#fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAQCAMAAADOBMQXAAAAFVBMVEUAAAD///8wMDAwMDAyMjIzMzMyMjLeZPLMAAAAB3RSTlMAABAwkLDARx1RgwAAAD9JREFUeAGlz0UChFAAgFB+3v/GMwZ2K8u3g7DXI40s6zWnuaXaK7IYVVlElUV14lQik8opw6SyiCqLXB9/0D/ZNQE+FhzMpgAAAABJRU5ErkJggg==) no-repeat right 6px;color:nth($cgr, 1);outline:none;-webkit-appearance:none;-moz-appearance: none;@include ts; .do-ui-select {display:inline-block;min-height:30px;padding:0 30px 0 10px;border:0;border-bottom:1px solid #e7e7e7;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAMAAABV0m3JAAAADFBMVEUAAAD///+Pj4+JiYkxcGihAAAABHRSTlMAABBwqVQF9wAAADNJREFUeNqlzjEOACAMw8DQ/v/PSE5FFhaEx5usdekBuzRVH0RtCqJYELUFrVjQigX/5jdvzgDh9izlMQAAAABJRU5ErkJggg==) no-repeat right 8px;color:nth($cgr, 1);outline:none;-webkit-appearance:none;-moz-appearance: none;@include ts;
&::-ms-expand {display:none;} &::-ms-expand {display:none;}
&.radius-3 {border-radius:3px;}
&.radius-5 {border-radius:5px;}
&:focus {border-color:nth($ct, 1);} &:focus {border-color:nth($ct, 1);}
&.alert {border-color:nth($cr, 1);color:nth($cr, 1)} &.alert {border-color:nth($cr, 1);color:nth($cr, 1)}

60
js/lib/meditor/addon/attach.css
View File

@ -1,59 +1 @@
@charset "UTF-8"; .do-meditor-attach{width:630px;height:auto;background:#f7f7f7;cursor:default}.do-meditor-attach .tab-box{width:100%;height:50px;line-height:49px;border-bottom:1px solid #e2e2e2;text-align:center}.do-meditor-attach .tab-box .item{position:relative;float:left;width:100px;height:49px;border-right:1px solid #ddd;cursor:pointer}.do-meditor-attach .tab-box .item.active{background:#fff}.do-meditor-attach .tab-box .item.active::after{position:absolute;left:0;bottom:-1px;width:100%;height:1px;background:#fff;content:""}.do-meditor-attach .tab-box a.action-close{top:5px;width:40px;height:40px;line-height:40px;font-size:20px}.do-meditor-attach .tab-box a.action-close:hover{line-height:40px;border:0}.do-meditor-attach .cont-box{position:relative;width:100%;height:auto;min-height:200px;background:#fff}.do-meditor-attach .cont-box .remote,.do-meditor-attach .cont-box .local{position:relative;width:60%;height:auto;margin:0 auto;padding:15px 0 30px}.do-meditor-attach .cont-box .local{width:96%}.do-meditor-attach .cont-box .hide{display:none}.do-meditor-attach .cont-box .section{display:block;width:100%;height:auto;margin:15px 0;line-height:35px}.do-meditor-attach .cont-box .section.input{line-height:33px;border:1px solid #e9e9e9}.do-meditor-attach .cont-box .section .label{float:left;width:30%;text-align:center;background:#f7f7f7}.do-meditor-attach .cont-box .section .txt{float:left;width:70%;height:33px;padding:0 8px;border:0;border-left:1px solid #e9e9e9;background:#fff;color:#666}.do-meditor-attach .cont-box .section .submit{float:right;width:30%;height:35px;background:#ddd;color:#666;text-align:center}.do-meditor-attach .cont-box .select-file{width:100%;height:35px;line-height:33px}.do-meditor-attach .cont-box .select-file span.file{float:left;width:100px;height:35px;border:1px solid #ddd;background:#f7f7f7;color:#666;text-align:center;cursor:pointer}.do-meditor-attach .cont-box .select-file span.tips{display:inline-block;padding:0 10px;line-height:35px;color:#666}.do-meditor-attach .cont-box .upload-box{width:100%;height:auto;min-height:190px;margin:10px 0;border:1px solid #e2e2e2}.do-meditor-attach .cont-box .upload-box .tr{width:100%;height:35px;line-height:35px;text-align:center}.do-meditor-attach .cont-box .upload-box .tr:hover{background:#fafafa}.do-meditor-attach .cont-box .upload-box .thead{line-height:34px;border-bottom:1px solid #e2e2e2;background:#f7f7f7}.do-meditor-attach .cont-box .upload-box .td{float:left}.do-meditor-attach .cont-box .upload-box .td.name{width:45%}.do-meditor-attach .cont-box .upload-box .td.progress{width:40%}.do-meditor-attach .cont-box .upload-box .td.option{width:15%}.do-meditor-attach .cont-box .upload-box .td.option a{display:inline-block;padding:3px 5px;line-height:13px;border:1px solid #e2e2e2;background:#f7f7f7;color:#666}.do-meditor-attach .cont-box .upload-box .td .red{color:#f30}.do-meditor-attach .cont-box .manager{overflow:hidden;overflow-y:auto;width:100%;height:320px;padding:10px}.do-meditor-attach .cont-box .manager .item{float:left;width:22%;height:130px;margin:10px 1.5%;padding:5px}.do-meditor-attach .cont-box .manager .item:hover{background:#f7f7f7}.do-meditor-attach .cont-box .manager .thumb{display:block;width:100%;height:100px}.do-meditor-attach .cont-box .manager .name{overflow:hidden;height:20px;line-height:30px;text-align:center}.do-meditor-attach .cont-box .manager img{width:100%;height:100%}.do-meditor-attach .cont-box .manager .attach-icon{display:inline-block;width:100%;height:100px;text-align:center;font:50px/100px "ui font" !important;-webkit-font-smoothing:antialiased;-webkit-text-stroke-width:0.2px;-moz-osx-font-smoothing:grayscale}
/**
*
* @authors yutent (yutent@doui.cc)
* @date 2017-04-20 19:13:24
*
*/
.do-meditor-attach {width:630px;height:auto;background:#f7f7f7;cursor:default;}
.do-meditor-attach .attach-wrap {width:100%;height:auto;}
.do-meditor-attach .tab-box {width:100%;height:50px;line-height:49px;border-bottom:1px solid #e2e2e2;text-align:center;}
.do-meditor-attach .tab-box .item {position:relative;float:left;width:100px;height:49px;border-right:1px solid #ddd;cursor:pointer;}
.do-meditor-attach .tab-box .item.active {background:#fff;}
.do-meditor-attach .tab-box .item.active::after {position:absolute;left:0;bottom:-1px;width:100%;height:1px;background:#fff;content:""}
.do-meditor-attach .tab-box a.action-close {top:5px;width:40px;height:40px;line-height:40px;font-size:20px;}
.do-meditor-attach .tab-box a.action-close:hover {line-height:40px;border:0;}
.do-meditor-attach .cont-box {position:relative;width:100%;height:auto;min-height:200px;background:#fff;}
.do-meditor-attach .cont-box .remote,
.do-meditor-attach .cont-box .local {position:relative;width:60%;height:auto;margin:0 auto;padding:15px 0 30px;}
.do-meditor-attach .cont-box .local {width:96%;}
.do-meditor-attach .cont-box .hide {display:none;}
.do-meditor-attach .cont-box .section {display:block;width:100%;height:auto;margin:15px 0;line-height:35px;}
.do-meditor-attach .cont-box .section::after {visibility: hidden;overflow:hidden; display: block;height: 0;content: "."; clear: both;}
.do-meditor-attach .cont-box .section .label {float: left;width:30%;text-align:center;background:#e2e2e2;}
.do-meditor-attach .cont-box .section label {float: left;width:50%;}
.do-meditor-attach .cont-box .section .input {float: left;width:70%;height:35px;padding:0 8px;border:1px solid #e2e2e2;border-left:0;background:#fff;color:#666;}
.do-meditor-attach .cont-box .section .submit {float:right;width:30%;height:35px;border:1px solid #ddd;background:#f7f7f7;color:#666;text-align:center;}
.do-meditor-attach .cont-box .section .submit:hover {border:1px solid #049789;}
.do-meditor-attach .cont-box .select-file {width:100%;height:35px;line-height:33px}
.do-meditor-attach .cont-box .select-file span.file {float:left;width:100px;height:35px;border:1px solid #ddd;background:#f7f7f7;color:#666;text-align:center;cursor:pointer;}
.do-meditor-attach .cont-box .select-file span.tips {display:inline-block;padding:0 10px;line-height:35px;color:#666;}
.do-meditor-attach .cont-box .upload-box {width:100%;height:auto;min-height:190px;margin:10px 0;border:1px solid #e2e2e2;}
.do-meditor-attach .cont-box .upload-box .tr {width:100%;height:35px;line-height:35px;text-align:center;}
.do-meditor-attach .cont-box .upload-box .tr:hover {background:#fafafa}
.do-meditor-attach .cont-box .upload-box .thead {line-height:34px;border-bottom:1px solid #e2e2e2;background:#f7f7f7;}
.do-meditor-attach .cont-box .upload-box .td {float:left;}
.do-meditor-attach .cont-box .upload-box .td.name {width:45%;}
.do-meditor-attach .cont-box .upload-box .td.progress {width:40%;}
.do-meditor-attach .cont-box .upload-box .td.option {width:15%;}
.do-meditor-attach .cont-box .upload-box .td.option a {display:inline-block;padding:3px 5px;line-height:13px;border:1px solid #e2e2e2;background:#f7f7f7;color:#666;}
.do-meditor-attach .cont-box .upload-box .td .red {color:#f30;}
.do-meditor-attach .cont-box .manager {overflow:hidden;overflow-y:auto;width:100%;height:320px;padding:10px;}
.do-meditor-attach .cont-box .manager .item {float:left;width:22%;height:130px;margin:10px 1.5%;padding:5px;}
.do-meditor-attach .cont-box .manager .item:hover {background:#f7f7f7;}
.do-meditor-attach .cont-box .manager .thumb {display:block;width:100%;height:100px;}
.do-meditor-attach .cont-box .manager .name {overflow:hidden;height:20px;line-height:30px;text-align:center;}
.do-meditor-attach .cont-box .manager img {width:100%;height:100%;}
.do-meditor-attach .cont-box .manager .attac-icon {display:inline-block;width:100%;height:100px;text-align:center;font:50px/100px "edicon" !important;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale;}

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

@ -186,48 +186,46 @@ define([
file: [] file: []
}, },
fixCont = function(){ fixCont = function(){
return '<div class="do-meditor-attach meditor-font">' return '<dl class="do-meditor-attach do-meditor-font">'
+ '<dl class="attach-wrap">' + '<dt class="tab-box" :drag="do-layer" data-limit="window">'
+ '<dt class="tab-box" :drag="do-layer" data-limit="window">' + '<span class="item" :class="active:tab === 1" :click="$switch(1)">' + lang[openType][0] +'</span>'
+ '<span class="item" :class="active:tab === 1" :click="$switch(1)">' + lang[openType][0] +'</span>' + '<span class="item" :class="active:tab === 2" :click="$switch(2)">本地上传</span>'
+ '<span class="item" :class="active:tab === 2" :click="$switch(2)">本地上传</span>' + '<span class="item" :class="active:tab === 3" :click="$switch(3)">' + lang[openType][1] + '</span>'
+ '<span class="item" :class="active:tab === 3" :click="$switch(3)">' + lang[openType][1] + '</span>' + '<a href="javascript:;" :click="no" class="action-close do-ui-font"></a>'
+ '<a href="javascript:;" :click="no" class="action-close def-font"></a>' + '</dt>'
+ '</dt>' + '<dt class="cont-box">'
+ '<dt class="cont-box">' + '<div class="remote" :visible="tab === 1">'
+ '<div class="remote" :visible="tab === 1">' + '<section class="section do-fn-cl input"><span class="label">'+ lang[openType][2] + '</span>'
+ '<section class="section"><span class="label">'+ lang[openType][2] + '</span>' + '<input class="txt" :duplex="attachAlt" />'
+ '<input class="input" :duplex="attachAlt" />' + '</section>'
+ '</section>' + '<section class="section do-fn-cl input"><span class="label">'+ lang[openType][3] + '</span>'
+ '<section class="section"><span class="label">'+ lang[openType][3] + '</span>' + '<input class="txt" :duplex="attach" />'
+ '<input class="input" :duplex="attach" />' + '</section>'
+ '</section>' + '<section class="section do-fn-cl">'
+ '<section class="section">' + '<a href="javascript:;" class="submit" :click="$confirm">确定</a>'
+ '<a href="javascript:;" class="submit" :click="$confirm">确定</a>' + '</section>'
+ '</section>' + '</div>'
+ '</div>' + '<div class="local" :visible="tab === 2">'
+ '<div class="local" :visible="tab === 2">' + '<div class="select-file"><input id="meditor-attch" multiple :change="$change" type="file" class="hide" /><span class="file" :click="$select">选择文件</span><span class="tips">(上传大小限制:单文件最大 '
+ '<div class="select-file"><input id="meditor-attch" multiple :change="$change" type="file" class="hide" /><span class="file" :click="$select">选择文件</span><span class="tips">(上传大小限制:单文件最大' + ((ME.maxSize/1048576).toFixed(2) - 0)
+ (ME.maxSize/1048576).toFixed(2) + 'MB)</span></div>'
+ 'MB)</span></div>' + '<ul class="upload-box">'
+ '<ul class="upload-box">' + '<li class="tr thead"><span class="td name">文件名</span><span class="td progress">上传进度</span><span class="td option">操作</span></li>'
+ '<li class="tr thead"><span class="td name">文件名</span><span class="td progress">上传进度</span><span class="td option">操作</span></li>' + '<li class="tr" :repeat="uploadFile">'
+ '<li class="tr" :repeat="uploadFile">' + '<span class="td name" :text="el.name"></span>'
+ '<span class="td name" :text="el.name"></span>' + '<span class="td progress" :html="el.progress"></span>'
+ '<span class="td progress" :html="el.progress"></span>' + '<span class="td option"><a href="javascript:;" :click="$insert(el)">插入</a></span>'
+ '<span class="td option"><a href="javascript:;" :click="$insert(el)">插入</a></span>'
+ '</li>'
+ '</ul>'
+ '</div>'
+ '<ul class="manager" :visible="tab === 3">'
+ '<li class="item" :repeat="attachList" :click="$insert(el)">'
+ '<span class="thumb" :html="el.thumb"></span>'
+ '<p class="name" :attr-title="el.name" :text="el.name"></p>'
+ '</li>' + '</li>'
+ '</ul>' + '</ul>'
+ '</dt>' + '</div>'
+ '</dl>' + '<ul class="manager" :visible="tab === 3">'
+ '</div>' + '<li class="item" :repeat="attachList" :click="$insert(el)">'
+ '<span class="thumb" :html="el.thumb"></span>'
+ '<p class="name" :attr-title="el.name" :text="el.name"></p>'
+ '</li>'
+ '</ul>'
+ '</dt>'
+ '</dl>'
}; };
/** /**
@ -243,7 +241,7 @@ define([
vm.uploadFile.push({name: it.name, progress: '<span class="red">0%(失败,不允许的文件类型)</span>', url: ''}) vm.uploadFile.push({name: it.name, progress: '<span class="red">0%(失败,不允许的文件类型)</span>', url: ''})
continue continue
} }
if(it.size > ME.maxSize){ if(ME.maxSize > 0 && it.size > ME.maxSize){
vm.uploadFile.push({name: it.name, progress: '<span class="red">0%(文件体积过大)</span>', url: ''}) vm.uploadFile.push({name: it.name, progress: '<span class="red">0%(文件体积过大)</span>', url: ''})
continue continue
} }
@ -332,7 +330,7 @@ define([
getAttach(vm, function(json){ getAttach(vm, function(json){
if(json){ if(json){
cache[openType] = json.data.list.map(function(it){ cache[openType] = json.data.list.map(function(it){
it.thumb = openType === 'image' ? '<img src="' + it.url + '"/>' : '<em class="attac-icon">&#xe603;</em>' it.thumb = openType === 'image' ? '<img src="' + it.url + '"/>' : '<em class="attach-icon">&#xe73e;</em>'
return it return it
}) })
lvm.attachList = json.data.list lvm.attachList = json.data.list

62
js/lib/meditor/addon/attach.scss Normal file
View File

@ -0,0 +1,62 @@
@charset "UTF-8";
/**
*
* @authors yutent (yutent@doui.cc)
* @date 2017-04-20 19:13:24
*
*/
.do-meditor-attach {width:630px;height:auto;background:#f7f7f7;cursor:default;
.tab-box {width:100%;height:50px;line-height:49px;border-bottom:1px solid #e2e2e2;text-align:center;
.item {position:relative;float:left;width:100px;height:49px;border-right:1px solid #ddd;cursor:pointer;}
.item.active {background:#fff;}
.item.active::after {position:absolute;left:0;bottom:-1px;width:100%;height:1px;background:#fff;content:""}
a.action-close {top:5px;width:40px;height:40px;line-height:40px;font-size:20px;}
a.action-close:hover {line-height:40px;border:0;}
}
.cont-box {position:relative;width:100%;height:auto;min-height:200px;background:#fff;
.remote,
.local {position:relative;width:60%;height:auto;margin:0 auto;padding:15px 0 30px;}
.local {width:96%;}
.hide {display:none;}
.section {display:block;width:100%;height:auto;margin:15px 0;line-height:35px;
&.input {line-height:33px;border:1px solid #e9e9e9;}
.label {float: left;width:30%;text-align:center;background:#f7f7f7;}
.txt {float: left;width:70%;height:33px;padding:0 8px;border:0;border-left:1px solid #e9e9e9;background:#fff;color:#666;}
.submit {float:right;width:30%;height:35px;background:#ddd;color:#666;text-align:center;}
}
.select-file {width:100%;height:35px;line-height:33px}
.select-file span.file {float:left;width:100px;height:35px;border:1px solid #ddd;background:#f7f7f7;color:#666;text-align:center;cursor:pointer;}
.select-file span.tips {display:inline-block;padding:0 10px;line-height:35px;color:#666;}
.upload-box {width:100%;height:auto;min-height:190px;margin:10px 0;border:1px solid #e2e2e2;}
.upload-box .tr {width:100%;height:35px;line-height:35px;text-align:center;}
.upload-box .tr:hover {background:#fafafa}
.upload-box .thead {line-height:34px;border-bottom:1px solid #e2e2e2;background:#f7f7f7;}
.upload-box .td {float:left;}
.upload-box .td.name {width:45%;}
.upload-box .td.progress {width:40%;}
.upload-box .td.option {width:15%;}
.upload-box .td.option a {display:inline-block;padding:3px 5px;line-height:13px;border:1px solid #e2e2e2;background:#f7f7f7;color:#666;}
.upload-box .td .red {color:#f30;}
.manager {overflow:hidden;overflow-y:auto;width:100%;height:320px;padding:10px;}
.manager .item {float:left;width:22%;height:130px;margin:10px 1.5%;padding:5px;}
.manager .item:hover {background:#f7f7f7;}
.manager .thumb {display:block;width:100%;height:100px;}
.manager .name {overflow:hidden;height:20px;line-height:30px; text-align:center;}
.manager img {width:100%;height:100%;}
.manager .attach-icon {display:inline-block;width:100%;height:100px;text-align:center;font:50px/100px "ui font" !important;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale;}
}
}

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

@ -257,8 +257,10 @@ define(['lib/layer/base'], function(){
this.link(elem, vm, false) 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 + '`' wraped = trim(wrap, '`');
wrap = wrap === wraped ? ('`' + wrap + '`') : wraped
ME.insert(vm.$editor, wrap, true) ME.insert(vm.$editor, wrap, true)
}, },
blockcode: function(elem, vm){ blockcode: function(elem, vm){
@ -311,7 +313,7 @@ define(['lib/layer/base'], function(){
layer.close(layid) layer.close(layid)
}, },
content: '<div class="do-meditor-codeblock do-meditor-font">' content: '<div class="do-meditor-codeblock do-meditor-font">'
+ '<section><span class="label">语言类型</span>' + '<section class="do-fn-cl"><span class="label">语言类型</span>'
+ '<select :duplex="lang">' + '<select :duplex="lang">'
+ '<option :repeat="$lang" :attr-value="el.id">{{el.name || el.id}}</option>' + '<option :repeat="$lang" :attr-value="el.id">{{el.name || el.id}}</option>'
+ '</select>' + '</select>'
@ -319,7 +321,7 @@ define(['lib/layer/base'], function(){
+ '<section>' + '<section>'
+ '<textarea :duplex="code" placeholder="在这里输入/粘贴代码"></textarea>' + '<textarea :duplex="code" placeholder="在这里输入/粘贴代码"></textarea>'
+ '</section>' + '</section>'
+ '<section>' + '<section class="do-fn-cl">'
+ '<a href="javascript:;" class="submit" :click="$confirm">确定</a>' + '<a href="javascript:;" class="submit" :click="$confirm">确定</a>'
+ '</section>' + '</section>'
+ '</div>' + '</div>'

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

@ -22,7 +22,7 @@ define([
}) })
var editorVM = [] var editorVM = []
yua.ui.meditor = '0.0.1' yua.ui.meditor = '1.0.0'
//存放编辑器公共静态资源 //存放编辑器公共静态资源
window.ME = { window.ME = {
version: yua.ui.meditor, version: yua.ui.meditor,
@ -225,7 +225,10 @@ define([
return new RegExp(exp, 'gi') return new RegExp(exp, 'gi')
} }
function html2md(str){ function html2md(str){
str = decodeURIComponent(str).replace(/\t/g, ' ').replace(/<meta [^>]*>/, '') try{
str = decodeURIComponent(str)
}catch(err){}
str = str.replace(/\t/g, ' ').replace(/<meta [^>]*>/, '')
for(var i in elems){ for(var i in elems){
var cb = elems[i], var cb = elems[i],
@ -306,9 +309,7 @@ define([
$template: '<div class="do-meditor do-meditor-font" :visible="editorVisible"' $template: '<div class="do-meditor do-meditor-font" :visible="editorVisible"'
+ ' :class="{fullscreen: fullscreen, preview: preview}">' + ' :class="{fullscreen: fullscreen, preview: preview}">'
+ '<div class="tool-bar do-ui-font do-fn-noselect">{toolbar}</div>' + '<div class="tool-bar do-ui-font do-fn-noselect">{toolbar}</div>'
+ '<div class="editor-body">' + '<textarea class="editor-body" spellcheck="false" :duplex="plainTxt" :attr="{disabled: disabled}" :on-paste="$paste($event)"></textarea>'
+ '<textarea spellcheck="false" :duplex="plainTxt" :attr="{disabled: disabled}" :on-paste="$paste($event)" id="{uuid}"></textarea>'
+ '</div>'
+ '<content class="md-preview do-marked-theme" :visible="preview" :html="htmlTxt"></content>' + '<content class="md-preview do-marked-theme" :visible="preview" :html="htmlTxt"></content>'
+ '</div>', + '</div>',
$$template: function(txt){ $$template: function(txt){
@ -335,7 +336,6 @@ define([
return base return base
}, },
$init: function(vm){ $init: function(vm){
vm.$watch('plainTxt', function(val){ vm.$watch('plainTxt', function(val){
vm.$compile() vm.$compile()
//只有开启实时预览,才会赋值给htmlTxt //只有开启实时预览,才会赋值给htmlTxt
@ -368,8 +368,9 @@ define([
vm.plainTxt = this.value vm.plainTxt = this.value
} }
}, },
$ready: function(vm){ $ready: function(vm, elem){
vm.$editor = document.querySelector('#' + vm.$id)
vm.$editor = elem.children[1]
editorVM.push(vm) editorVM.push(vm)
//自动加载额外的插件 //自动加载额外的插件
@ -407,9 +408,11 @@ define([
$paste: yua.noop, $paste: yua.noop,
$compile: function(){ $compile: function(){
var txt = this.plainTxt.trim() var txt = this.plainTxt.trim()
txt = txt.replace(/<script([^>]*?)>/g, '&lt;script$1&gt;')
.replace(/<\/script>/g, '&lt;/script&gt;')
if(this.$safelyCompile){
txt = txt.replace(/<script([^>]*?)>/g, '&lt;script$1&gt;')
.replace(/<\/script>/g, '&lt;/script&gt;')
}
//只解析,不渲染 //只解析,不渲染
this.$htmlTxt = marked(txt) this.$htmlTxt = marked(txt)
}, },
@ -417,6 +420,7 @@ define([
$onSuccess: yua.noop, $onSuccess: yua.noop,
$onUpdate: yua.noop, $onUpdate: yua.noop,
$onFullscreen: yua.noop, $onFullscreen: yua.noop,
$safelyCompile: true,
disabled: false, //禁用编辑器 disabled: false, //禁用编辑器
fullscreen: false, //是否全屏 fullscreen: false, //是否全屏
preview: false, //是否显示预览 preview: false, //是否显示预览

2
js/lib/meditor/skin/main.css
View File

File diff suppressed because one or more lines are too long

52
js/lib/meditor/skin/main.scss
View File

@ -21,18 +21,20 @@
/* 关于编辑器模块*/ /* 关于编辑器模块*/
.do-meditor-about {width:400px;padding:10px 20px;} .do-meditor-about {width:400px;padding:10px 20px;
.do-meditor-about pre {width:100%;padding-bottom:15px;line-height:1;font-size:14px;} pre {width:100%;padding-bottom:15px;line-height:1;font-size:14px;}
.do-meditor-about a {color:#049789} a {color:#049789}
.do-meditor-about p {margin:0 auto 5px;} p {margin:0 auto 5px;}
}
/*表格模块*/ /*表格模块*/
.do-meditor-table {width:270px;height:270px;padding:10px;} .do-meditor-table {width:270px;height:270px;padding:10px;
.do-meditor-table li {width:100%;height:25px;} li {width:100%;height:25px;
.do-meditor-table li span {float:left;width:25px;height:25px;border:2px solid #fff;background:#f2f2f2;} span {float:left;width:25px;height:25px;border:2px solid #fff;background:#f2f2f2;}
.do-meditor-table li span.active {background:rgba(4,151,137,.2);} span.active {background:rgba(4,151,137,.2);}
}
}
/*表情模块*/ /*表情模块*/
.do-meditor-face {float:left;;width:241px;height:241px;margin:10px;border-top:1px solid #e2e2e2;border-left:1px solid #e2e2e2; .do-meditor-face {float:left;;width:241px;height:241px;margin:10px;border-top:1px solid #e2e2e2;border-left:1px solid #e2e2e2;
@ -71,13 +73,20 @@
} }
} }
.do-meditor-codeblock {width:780px;height:auto;padding:15px 20px;background:#fafafa;} .do-meditor-codeblock {width:780px;height:auto;padding:15px 20px;background:#fafafa;
.do-meditor-codeblock section {display:block;width:100%;height:auto;margin:10px 0;line-height:35px;} section {display:block;width:100%;height:auto;margin:10px 0;line-height:35px;
.do-meditor-codeblock section::after {visibility: hidden;overflow:hidden; display: block;height: 0;content: "."; clear: both;}
.do-meditor-codeblock section .label {float: left;width:80px;} .label {float: left;width:80px;}
.do-meditor-codeblock section select {float:left;width:200px;height:35px;border:1px solid #ddd;border-radius:5px;background:#fff} select {float:left;width:200px;height:35px;padding:0 30px 0 10px;border:0;border-bottom:1px solid #e7e7e7;background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAMAAABV0m3JAAAADFBMVEUAAAD///+Pj4+JiYkxcGihAAAABHRSTlMAABBwqVQF9wAAADNJREFUeNqlzjEOACAMw8DQ/v/PSE5FFhaEx5usdekBuzRVH0RtCqJYELUFrVjQigX/5jdvzgDh9izlMQAAAABJRU5ErkJggg==) no-repeat right 8px;color:nth($cgr, 1);outline:none;-webkit-appearance:none;-moz-appearance: none;@include ts;
.do-meditor-codeblock section textarea {width:100%;height:300px;padding:5px 10px;border:1px solid #ddd;background:#fff;resize:none;}
.do-meditor-codeblock section .submit {float:right;width:80px;height:35px;background:#ddd;color:#666;text-align:center;} &::-ms-expand {display:none;}
&:focus {border-color:nth($ct, 1);}
}
textarea {width:100%;height:300px;padding:5px 10px;border:1px solid #ddd;background:#fff;resize:none;outline:none;}
.submit {float:right;width:80px;height:35px;background:#ddd;color:#666;text-align:center;}
}
}
@ -86,7 +95,7 @@
.tool-bar {overflow:hidden;position:absolute;top:0;left:0;z-index:99;width:100%;height:43px;padding:5px 10px;border-bottom:1px solid #ddd;background:#f5f5f5;color:#666; .tool-bar {overflow:hidden;position:absolute;top:0;left:0;z-index:99;width:100%;height:43px;padding:5px 10px;border-bottom:1px solid #ddd;background:#f5f5f5;color:#666;
span {display:inline-block;width:30px;height:32px;line-height:32px;text-align:center;font-size:20px;} span {display:inline-block;width:30px;height:32px;line-height:32px;text-align:center;font-size:20px;}
.edicon:hover {background:#e5e5e5;} span:hover {background:#e5e5e5;}
.icon-pipe {width:20px;} .icon-pipe {width:20px;}
.icon-pipe:hover {background:none;} .icon-pipe:hover {background:none;}
.icon-pipe::before {content:"\e62c"} .icon-pipe::before {content:"\e62c"}
@ -111,17 +120,14 @@
.icon-about::before {content:"\e700"} .icon-about::before {content:"\e700"}
} }
.editor-body{overflow:hidden;overflow-y:auto;float:left;width:100%;height:100%;padding:5px 5px 50px;border:0;outline:none;resize:none;color:#666;background:#fff;}
.editor-body {float:left;width:100%;height:100%;background:#fff;} .md-preview {float:right;overflow:hidden;overflow-y:auto;display:block;width:50%;height:100%;padding:10px 10px 50px;line-height:2;border-left:1px solid #ddd;color:#666;font-size:14px;background:#fff;}
.editor-body>textarea {overflow:hidden;overflow-y:auto;width:100%;height:100%;padding:5px;border:0;outline:none;resize:none;color:#666;background:none;}
.md-preview {float:right;overflow:hidden;overflow-y:auto;display:block;width:50%;height:100%;padding:10px;line-height:2;border-left:1px solid #ddd;color:#666;font-size:14px;background:#fff;}
/*全屏模式*/ /*全屏模式*/
&.fullscreen {position:fixed;left:0;top:0;z-index:999;} &.fullscreen {position:fixed;left:0;top:0;z-index:999;}
&.preview .editor-body, &.preview .editor-body {width:50%}
&.fullscreen .editor-body {width:50%}
} }