移植MEditor适配最新的UI库,修复一些bug;调整下拉选择的样式
宇天
parent
d70bb13ad6
commit
81a764db68
File diff suppressed because one or more lines are too long
|
|
@ -109,11 +109,9 @@
|
|||
|
||||
|
||||
/* 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;}
|
||||
&.radius-3 {border-radius:3px;}
|
||||
&.radius-5 {border-radius:5px;}
|
||||
|
||||
&:focus {border-color:nth($ct, 1);}
|
||||
&.alert {border-color:nth($cr, 1);color:nth($cr, 1)}
|
||||
|
|
|
|||
|
|
@ -1,59 +1 @@
|
|||
@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;}
|
||||
.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;}
|
||||
|
||||
.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}
|
||||
|
|
|
|||
|
|
@ -186,48 +186,46 @@ define([
|
|||
file: []
|
||||
},
|
||||
fixCont = function(){
|
||||
return '<div class="do-meditor-attach meditor-font">'
|
||||
+ '<dl class="attach-wrap">'
|
||||
+ '<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 === 2" :click="$switch(2)">本地上传</span>'
|
||||
+ '<span class="item" :class="active:tab === 3" :click="$switch(3)">' + lang[openType][1] + '</span>'
|
||||
+ '<a href="javascript:;" :click="no" class="action-close def-font"></a>'
|
||||
+ '</dt>'
|
||||
+ '<dt class="cont-box">'
|
||||
+ '<div class="remote" :visible="tab === 1">'
|
||||
+ '<section class="section"><span class="label">'+ lang[openType][2] + '</span>'
|
||||
+ '<input class="input" :duplex="attachAlt" />'
|
||||
+ '</section>'
|
||||
+ '<section class="section"><span class="label">'+ lang[openType][3] + '</span>'
|
||||
+ '<input class="input" :duplex="attach" />'
|
||||
+ '</section>'
|
||||
+ '<section class="section">'
|
||||
+ '<a href="javascript:;" class="submit" :click="$confirm">确定</a>'
|
||||
+ '</section>'
|
||||
+ '</div>'
|
||||
+ '<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">(上传大小限制:单文件最大'
|
||||
+ (ME.maxSize/1048576).toFixed(2)
|
||||
+ 'MB)</span></div>'
|
||||
+ '<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" :repeat="uploadFile">'
|
||||
+ '<span class="td name" :text="el.name"></span>'
|
||||
+ '<span class="td progress" :html="el.progress"></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>'
|
||||
return '<dl class="do-meditor-attach do-meditor-font">'
|
||||
+ '<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 === 2" :click="$switch(2)">本地上传</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>'
|
||||
+ '</dt>'
|
||||
+ '<dt class="cont-box">'
|
||||
+ '<div class="remote" :visible="tab === 1">'
|
||||
+ '<section class="section do-fn-cl input"><span class="label">'+ lang[openType][2] + '</span>'
|
||||
+ '<input class="txt" :duplex="attachAlt" />'
|
||||
+ '</section>'
|
||||
+ '<section class="section do-fn-cl input"><span class="label">'+ lang[openType][3] + '</span>'
|
||||
+ '<input class="txt" :duplex="attach" />'
|
||||
+ '</section>'
|
||||
+ '<section class="section do-fn-cl">'
|
||||
+ '<a href="javascript:;" class="submit" :click="$confirm">确定</a>'
|
||||
+ '</section>'
|
||||
+ '</div>'
|
||||
+ '<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">(上传大小限制:单文件最大 '
|
||||
+ ((ME.maxSize/1048576).toFixed(2) - 0)
|
||||
+ 'MB)</span></div>'
|
||||
+ '<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" :repeat="uploadFile">'
|
||||
+ '<span class="td name" :text="el.name"></span>'
|
||||
+ '<span class="td progress" :html="el.progress"></span>'
|
||||
+ '<span class="td option"><a href="javascript:;" :click="$insert(el)">插入</a></span>'
|
||||
+ '</li>'
|
||||
+ '</ul>'
|
||||
+ '</dt>'
|
||||
+ '</dl>'
|
||||
+ '</div>'
|
||||
+ '</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>'
|
||||
+ '</ul>'
|
||||
+ '</dt>'
|
||||
+ '</dl>'
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -243,7 +241,7 @@ define([
|
|||
vm.uploadFile.push({name: it.name, progress: '<span class="red">0%(失败,不允许的文件类型)</span>', url: ''})
|
||||
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: ''})
|
||||
continue
|
||||
}
|
||||
|
|
@ -332,7 +330,7 @@ define([
|
|||
getAttach(vm, function(json){
|
||||
if(json){
|
||||
cache[openType] = json.data.list.map(function(it){
|
||||
it.thumb = openType === 'image' ? '<img src="' + it.url + '"/>' : '<em class="attac-icon"></em>'
|
||||
it.thumb = openType === 'image' ? '<img src="' + it.url + '"/>' : '<em class="attach-icon"></em>'
|
||||
return it
|
||||
})
|
||||
lvm.attachList = json.data.list
|
||||
|
|
|
|||
|
|
@ -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;}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -257,8 +257,10 @@ define(['lib/layer/base'], function(){
|
|||
this.link(elem, vm, false)
|
||||
},
|
||||
inlinecode: function(elem, vm){
|
||||
var wrap = ME.selection(vm.$editor) || '在此输入文本'
|
||||
wrap = '`' + wrap + '`'
|
||||
var wrap = ME.selection(vm.$editor) || '在此输入文本',
|
||||
wraped = trim(wrap, '`');
|
||||
|
||||
wrap = wrap === wraped ? ('`' + wrap + '`') : wraped
|
||||
ME.insert(vm.$editor, wrap, true)
|
||||
},
|
||||
blockcode: function(elem, vm){
|
||||
|
|
@ -311,7 +313,7 @@ define(['lib/layer/base'], function(){
|
|||
layer.close(layid)
|
||||
},
|
||||
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">'
|
||||
+ '<option :repeat="$lang" :attr-value="el.id">{{el.name || el.id}}</option>'
|
||||
+ '</select>'
|
||||
|
|
@ -319,7 +321,7 @@ define(['lib/layer/base'], function(){
|
|||
+ '<section>'
|
||||
+ '<textarea :duplex="code" placeholder="在这里输入/粘贴代码"></textarea>'
|
||||
+ '</section>'
|
||||
+ '<section>'
|
||||
+ '<section class="do-fn-cl">'
|
||||
+ '<a href="javascript:;" class="submit" :click="$confirm">确定</a>'
|
||||
+ '</section>'
|
||||
+ '</div>'
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ define([
|
|||
})
|
||||
|
||||
var editorVM = []
|
||||
yua.ui.meditor = '0.0.1'
|
||||
yua.ui.meditor = '1.0.0'
|
||||
//存放编辑器公共静态资源
|
||||
window.ME = {
|
||||
version: yua.ui.meditor,
|
||||
|
|
@ -225,7 +225,10 @@ define([
|
|||
return new RegExp(exp, 'gi')
|
||||
}
|
||||
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){
|
||||
var cb = elems[i],
|
||||
|
|
@ -306,9 +309,7 @@ define([
|
|||
$template: '<div class="do-meditor do-meditor-font" :visible="editorVisible"'
|
||||
+ ' :class="{fullscreen: fullscreen, preview: preview}">'
|
||||
+ '<div class="tool-bar do-ui-font do-fn-noselect">{toolbar}</div>'
|
||||
+ '<div class="editor-body">'
|
||||
+ '<textarea spellcheck="false" :duplex="plainTxt" :attr="{disabled: disabled}" :on-paste="$paste($event)" id="{uuid}"></textarea>'
|
||||
+ '</div>'
|
||||
+ '<textarea class="editor-body" spellcheck="false" :duplex="plainTxt" :attr="{disabled: disabled}" :on-paste="$paste($event)"></textarea>'
|
||||
+ '<content class="md-preview do-marked-theme" :visible="preview" :html="htmlTxt"></content>'
|
||||
+ '</div>',
|
||||
$$template: function(txt){
|
||||
|
|
@ -335,7 +336,6 @@ define([
|
|||
return base
|
||||
},
|
||||
$init: function(vm){
|
||||
|
||||
vm.$watch('plainTxt', function(val){
|
||||
vm.$compile()
|
||||
//只有开启实时预览,才会赋值给htmlTxt
|
||||
|
|
@ -368,8 +368,9 @@ define([
|
|||
vm.plainTxt = this.value
|
||||
}
|
||||
},
|
||||
$ready: function(vm){
|
||||
vm.$editor = document.querySelector('#' + vm.$id)
|
||||
$ready: function(vm, elem){
|
||||
|
||||
vm.$editor = elem.children[1]
|
||||
|
||||
editorVM.push(vm)
|
||||
//自动加载额外的插件
|
||||
|
|
@ -407,9 +408,11 @@ define([
|
|||
$paste: yua.noop,
|
||||
$compile: function(){
|
||||
var txt = this.plainTxt.trim()
|
||||
txt = txt.replace(/<script([^>]*?)>/g, '<script$1>')
|
||||
.replace(/<\/script>/g, '</script>')
|
||||
|
||||
|
||||
if(this.$safelyCompile){
|
||||
txt = txt.replace(/<script([^>]*?)>/g, '<script$1>')
|
||||
.replace(/<\/script>/g, '</script>')
|
||||
}
|
||||
//只解析,不渲染
|
||||
this.$htmlTxt = marked(txt)
|
||||
},
|
||||
|
|
@ -417,6 +420,7 @@ define([
|
|||
$onSuccess: yua.noop,
|
||||
$onUpdate: yua.noop,
|
||||
$onFullscreen: yua.noop,
|
||||
$safelyCompile: true,
|
||||
disabled: false, //禁用编辑器
|
||||
fullscreen: false, //是否全屏
|
||||
preview: false, //是否显示预览
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -21,18 +21,20 @@
|
|||
|
||||
|
||||
/* 关于编辑器模块*/
|
||||
.do-meditor-about {width:400px;padding:10px 20px;}
|
||||
.do-meditor-about pre {width:100%;padding-bottom:15px;line-height:1;font-size:14px;}
|
||||
.do-meditor-about a {color:#049789}
|
||||
.do-meditor-about p {margin:0 auto 5px;}
|
||||
.do-meditor-about {width:400px;padding:10px 20px;
|
||||
pre {width:100%;padding-bottom:15px;line-height:1;font-size:14px;}
|
||||
a {color:#049789}
|
||||
p {margin:0 auto 5px;}
|
||||
}
|
||||
|
||||
/*表格模块*/
|
||||
|
||||
.do-meditor-table {width:270px;height:270px;padding:10px;}
|
||||
.do-meditor-table li {width:100%;height:25px;}
|
||||
.do-meditor-table li 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);}
|
||||
|
||||
.do-meditor-table {width:270px;height:270px;padding:10px;
|
||||
li {width:100%;height:25px;
|
||||
span {float:left;width:25px;height:25px;border:2px solid #fff;background:#f2f2f2;}
|
||||
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;
|
||||
|
|
@ -71,13 +73,20 @@
|
|||
}
|
||||
}
|
||||
|
||||
.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;}
|
||||
.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;}
|
||||
.do-meditor-codeblock section select {float:left;width:200px;height:35px;border:1px solid #ddd;border-radius:5px;background:#fff}
|
||||
.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;}
|
||||
.do-meditor-codeblock {width:780px;height:auto;padding:15px 20px;background:#fafafa;
|
||||
section {display:block;width:100%;height:auto;margin:10px 0;line-height:35px;
|
||||
|
||||
.label {float: left;width:80px;}
|
||||
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;
|
||||
|
||||
&::-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;
|
||||
|
||||
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:hover {background:none;}
|
||||
.icon-pipe::before {content:"\e62c"}
|
||||
|
|
@ -111,17 +120,14 @@
|
|||
.icon-about::before {content:"\e700"}
|
||||
}
|
||||
|
||||
|
||||
.editor-body {float:left;width:100%;height:100%;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;}
|
||||
.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;}
|
||||
.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;}
|
||||
|
||||
|
||||
|
||||
/*全屏模式*/
|
||||
&.fullscreen {position:fixed;left:0;top:0;z-index:999;}
|
||||
|
||||
&.preview .editor-body,
|
||||
&.fullscreen .editor-body {width:50%}
|
||||
&.preview .editor-body {width:50%}
|
||||
|
||||
}
|
||||
Reference in New Issue