From d256f145cf5e45573141a98177b50df656a0ae1e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=AE=87=E5=A4=A9?= Date: Thu, 17 May 2018 04:41:49 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8Dlayer=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E7=9A=84=E5=9B=9E=E8=B0=83=E5=8F=8A=E5=AF=B9shift=E5=B1=9E?= =?UTF-8?q?=E6=80=A7=E7=9A=84=E4=BC=98=E5=8C=96;=E7=A7=BB=E6=A4=8Dmeditor?= =?UTF-8?q?=E5=88=B0=E6=96=B0=E7=9A=84=E6=A1=86=E6=9E=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/css/var.scss | 2 +- src/js/layer/index.js | 8 +- src/js/meditor/addon/attach.js | 806 +++++++++++++++++---------------- src/js/meditor/addon/base.js | 507 ++++++++++++--------- src/js/meditor/addon/test.js | 1 + src/js/meditor/index.js | 153 ++++--- src/js/meditor/skin/main.scss | 153 ++++--- src/js/prism/base.js | 24 +- src/js/prism/index.js | 6 - 9 files changed, 900 insertions(+), 760 deletions(-) create mode 100644 src/js/meditor/addon/test.js diff --git a/src/css/var.scss b/src/css/var.scss index 93efe1d..67f125f 100644 --- a/src/css/var.scss +++ b/src/css/var.scss @@ -4,7 +4,7 @@ $cpp: #651fff #7c4dff #6200ea; $cb: #2196f3 #64b5f6 #1976d2; $cr: #ff5722 #ff7043 #e64a19; $co: #ff9800 #ffa726 #f57c00; -$cp: #e7e8eb #ecf0f1 #bdc3c7; +$cp: #e7e8eb #ecf0f1 #d3d5db; $cgr: #546e7a #607d8b #37474f; @mixin ts($c: all, $t: .2s, $m: ease-in-out){ diff --git a/src/js/layer/index.js b/src/js/layer/index.js index 8dfbb60..683517d 100644 --- a/src/js/layer/index.js +++ b/src/js/layer/index.js @@ -182,8 +182,8 @@ class __layer__ { } }, mounted: function() { - if (typeof this.success === 'function') { - this.success(_id) + if (typeof this.props.success === 'function') { + this.props.success.call(this) } } } @@ -216,7 +216,9 @@ class __layer__ { layBox.classList.add('__' + state.shift) } else { for (let k in state.shift) { - layBox.style.cssText += `${k}: ${state.shift[k]};` + let val = state.shift[k] + val += isFinite(val) ? 'px' : '' + layBox.style.cssText += `${k}: ${val};` } } diff --git a/src/js/meditor/addon/attach.js b/src/js/meditor/addon/attach.js index 6ed893e..642b161 100644 --- a/src/js/meditor/addon/attach.js +++ b/src/js/meditor/addon/attach.js @@ -1,414 +1,438 @@ /** - * + * * @authors yutent (yutent@doui.cc) * @date 2017-04-19 21:17:26 * */ -"use strict"; +'use strict' +define(['lib/layer/base', 'css!./attach'], function() { + var Uploader = function(url) { + this.url = url || '' + this.init() + } -define([ - 'lib/layer/base', - 'css!./attach' - ], function(){ - - var Uploader = function(url){ - this.url = url || '' - this.init() - } - - Uploader.prototype = { - init: function(){ - this.xhr = new XMLHttpRequest() - this.form = new FormData() - return this - }, - field: function(key, val){ - if(typeof key === 'object'){ - for(var i in key){ - this.form.append(i, key[i]) - } - }else{ - this.form.append(key, val) - } - return this - }, - start: function(){ - var _this = this - - this.xhr.open('POST', this.url, true) - - var startTime = Date.now() - - this.xhr.upload.addEventListener('progress', function(evt){ - - if(evt.lengthComputable && _this.progress){ - var res = Math.round(evt.loaded * 100 / evt.total) - _this.progress(res) - } - - }, false) - - this.xhr.onreadystatechange = function(){ - if(_this.xhr.readyState === 4){ - if(_this.xhr.status >= 200 && _this.xhr.status < 205){ - var res = _this.xhr.responseText - try{ - res = JSON.parse(res) - }catch(err){} - _this.end && _this.end(res) - }else{ - console.error(_this.xhr) - } - } - } - - this.xhr.send(this.form) - - }, - onProgress: function(fn){ - this.progress = fn - return this - }, - onEnd: function(fn){ - this.end = fn - return this + Uploader.prototype = { + init: function() { + this.xhr = new XMLHttpRequest() + this.form = new FormData() + return this + }, + field: function(key, val) { + if (typeof key === 'object') { + for (var i in key) { + this.form.append(i, key[i]) } + } else { + this.form.append(key, val) + } + return this + }, + start: function() { + var _this = this + + this.xhr.open('POST', this.url, true) + + var startTime = Date.now() + + this.xhr.upload.addEventListener( + 'progress', + function(evt) { + if (evt.lengthComputable && _this.progress) { + var res = Math.round(evt.loaded * 100 / evt.total) + _this.progress(res) + } + }, + false + ) + + this.xhr.onreadystatechange = function() { + if (_this.xhr.readyState === 4) { + if (_this.xhr.status >= 200 && _this.xhr.status < 205) { + var res = _this.xhr.responseText + try { + res = JSON.parse(res) + } catch (err) {} + _this.end && _this.end(res) + } else { + console.error(_this.xhr) + } + } + } + + this.xhr.send(this.form) + }, + onProgress: function(fn) { + this.progress = fn + return this + }, + onEnd: function(fn) { + this.end = fn + return this + } + } + + function uploadScreenshot(vm, blob) { + var upload = new Uploader(vm.uploadUrl || ME.uploadUrl) + if (ME.beforeUpload) { + ME.beforeUpload(Date.now().toString(16) + '.jpg', function(qn) { + upload + .field('file', blob) + .field('token', qn.token) + .field('key', qn.key) + .onEnd(function(json) { + ME.insert(vm.$editor, '![截图](' + qn.url + ')') + }) + .start() + }) + } else { + upload + .field('file', blob) + .onEnd(function(json) { + ME.insert(vm.$editor, '![截图](' + json.data.url + ')') + }) + .start() + } + } + + var $init = function(vm) { + if (!vm.uploadUrl && !ME.uploadUrl) { + console.error( + '使用附件上传,必须先设置uploadUrl;\n可以给vm增加uploadUrl属性,也可以通过ME.uploadUrl设置' + ) + } + if (!vm.manageUrl && !ME.manageUrl) { + console.error( + '使用附件管理功能,必须先设置manageUrl;\n可以给vm增加manageUrl属性,也可以通过ME.manageUrl设置' + ) + } + if (!ME.maxSize) { + ME.maxSize = 4194304 + } + + vm.$editor.addEventListener('paste', function(ev) { + var txt = ev.clipboardData.getData('text/plain').trim(), + html = ev.clipboardData.getData('text/html').trim() + + //文本类型直接默认处理 + if (txt || html) { + return + } + + if (ev.clipboardData.items) { + var items = ev.clipboardData.items, + len = items.length, + blob = null + for (var i = 0, it; (it = items[i++]); ) { + if (it.type.indexOf('image') > -1) { + blob = it.getAsFile() + } + } + + if (blob !== null) { + layer.msg('截图处理中...') + // 压缩截图,避免文件过大 + var reader = new FileReader() + reader.onload = function() { + var img = document.createElement('img'), + canvas = document.createElement('canvas') + + img.onload = function() { + canvas.width = img.width + canvas.height = img.height + + var ctx = canvas.getContext('2d') + ctx.clearRect(0, 0, canvas.width, canvas.height) + ctx.drawImage(this, 0, 0, canvas.width, canvas.height) + + if (canvas.toBlob) { + canvas.toBlob( + function(obj) { + uploadScreenshot(vm, obj) + }, + 'image/jpeg', + 0.8 + ) + } else { + var base64 = canvas.toDataURL('image/jpeg', 0.8), + buf = atob(base64.split(',')[1]), + arrBuf = new ArrayBuffer(buf.length), + intArr = new Uint8Array(arrBuf), + obj = null + + for (var i = 0; i < buf.length; i++) { + intArr[i] = buf.charCodeAt(i) + } + obj = new Blob([intArr], { type: 'image/jpeg' }) + uploadScreenshot(vm, obj) + } + } + img.src = this.result + } + reader.readAsDataURL(blob) + } + } + ev.preventDefault() + }) + }, + lang = { + image: ['远程图片', '图片管理', '图片描述', '图片地址'], + file: ['远程附件', '附件管理', '附件描述', '附件地址'] + }, + opened = false, //记录是否已经打开 + openType = 'image', //打开类型, 图片/附件 + cache = { + //缓存附件列表 + image: [], + file: [] + }, + fixCont = function() { + return ( + '
' + + '
' + + '' + + lang[openType][0] + + '' + + '本地上传' + + '' + + lang[openType][1] + + '' + + '' + + '
' + + '
' + + '
' + + '
' + + lang[openType][2] + + '' + + '' + + '
' + + '
' + + lang[openType][3] + + '' + + '' + + '
' + + '
' + + '确定' + + '
' + + '
' + + '
' + + '
选择文件(上传大小限制:单文件最大 ' + + ((ME.maxSize / 1048576).toFixed(2) - 0) + + 'MB)
' + + '
    ' + + '
  • 文件名上传进度操作
    • ' + + '
  • ' + + '' + + '' + + '插入' + + '
    • ' + + '
' + + '
' + + '
    ' + + '
  • ' + + '' + + '

    ' + + '
    • ' + + '
' + + '
' + + '
' + ) } + /** + * [uploadFile 文件上传] + * @param {[type]} files [文件列表] + * @param {[type]} vm [vm对象] + * @param {[type]} type [image/file] + */ + function uploadFile(files, vm) { + for (var i = 0, it; (it = files[i++]); ) { + if ( + openType === 'image' && + !/\.(jpg|jpeg|png|gif|bmp|webp|ico)$/.test(it.name) + ) { + vm.uploadFile.push({ + name: it.name, + progress: '0%(失败,不允许的文件类型)', + url: '' + }) + continue + } + if (ME.maxSize > 0 && it.size > ME.maxSize) { + vm.uploadFile.push({ + name: it.name, + progress: '0%(文件体积过大)', + url: '' + }) + continue + } + var fixName = + Date.now().toString(16) + it.name.slice(it.name.lastIndexOf('.')) - function uploadScreenshot(vm, blob){ - var upload = new Uploader(vm.uploadUrl || ME.uploadUrl) - if(ME.beforeUpload){ - ME.beforeUpload(Date.now().toString(16) + '.jpg', function(qn){ - upload.field('file', blob) - .field('token', qn.token) - .field('key', qn.key) - .onEnd(function(json){ - ME.insert(vm.$editor, '![截图](' + qn.url + ')') - }) - .start() + var idx = vm.uploadFile.length, + upload = new Uploader(vm.uploadUrl || ME.uploadUrl) + + vm.uploadFile.push({ name: it.name, progress: '0%', url: '' }) + + upload.field('file', it) + + if (ME.beforeUpload) { + ME.beforeUpload(fixName, function(qn) { + upload + .field('token', qn.token) + .field('key', qn.key) + .onProgress(function(val) { + vm.uploadFile[idx].progress = val + '%' }) - }else{ - upload.field('file', blob) - .onEnd(function(json){ - ME.insert(vm.$editor, '![截图](' + json.data.url + ')') - }) - .start() - } - } - - - var $init = function(vm){ - if(!vm.uploadUrl && !ME.uploadUrl){ - console.error('使用附件上传,必须先设置uploadUrl;\n可以给vm增加uploadUrl属性,也可以通过ME.uploadUrl设置') - } - if(!vm.manageUrl && !ME.manageUrl){ - console.error('使用附件管理功能,必须先设置manageUrl;\n可以给vm增加manageUrl属性,也可以通过ME.manageUrl设置') - } - if(!ME.maxSize){ - ME.maxSize = 4194304 - } - - vm.$editor.addEventListener('paste', function(ev){ - var txt = ev.clipboardData.getData('text/plain').trim(), - html = ev.clipboardData.getData('text/html').trim(); - - //文本类型直接默认处理 - if(txt || html){ - return - } - - if(ev.clipboardData.items){ - var items = ev.clipboardData.items, - len = items.length, - blob = null; - for(var i = 0,it; it = items[i++];){ - if(it.type.indexOf('image') > -1){ - blob = it.getAsFile() - } - } - - if(blob !== null) { - layer.msg('截图处理中...') - // 压缩截图,避免文件过大 - var reader = new FileReader() - reader.onload = function(){ - var img = document.createElement('img'), - canvas = document.createElement('canvas') - - img.onload = function(){ - canvas.width = img.width - canvas.height = img.height - - var ctx = canvas.getContext('2d') - ctx.clearRect(0,0, canvas.width, canvas.height) - ctx.drawImage(this, 0, 0, canvas.width, canvas.height) - - - if(canvas.toBlob){ - canvas.toBlob(function(obj){ - uploadScreenshot(vm, obj) - }, 'image/jpeg', 0.8) - }else{ - var base64 = canvas.toDataURL('image/jpeg', 0.8), - buf = atob(base64.split(',')[1]), - arrBuf = new ArrayBuffer(buf.length), - intArr = new Uint8Array(arrBuf), - obj = null; - - for(var i = 0; i < buf.length; i++){ - intArr[i] = buf.charCodeAt(i) - } - obj = new Blob([intArr], {type: 'image/jpeg'}) - uploadScreenshot(vm, obj) - } - - - } - img.src = this.result - } - reader.readAsDataURL(blob) - } - } - ev.preventDefault() + .onEnd(function(json) { + vm.uploadFile[idx].url = qn.url }) - }, - lang = { - image: ['远程图片', '图片管理', '图片描述', '图片地址'], - file: ['远程附件', '附件管理', '附件描述', '附件地址'] - }, - opened = false, //记录是否已经打开 - openType = 'image', //打开类型, 图片/附件 - cache = { //缓存附件列表 - image: [], - file: [] - }, - fixCont = function(){ - return '
' - + '
' - + '' + lang[openType][0] +'' - + '本地上传' - + '' + lang[openType][1] + '' - + '' - + '
' - + '
' - + '
' - + '
'+ lang[openType][2] + '' - + '' - + '
' - + '
'+ lang[openType][3] + '' - + '' - + '
' - + '
' - + '确定' - + '
' - + '
' - + '
' - + '
选择文件(上传大小限制:单文件最大 ' - + ((ME.maxSize/1048576).toFixed(2) - 0) - + 'MB)
' - + '
    ' - + '
  • 文件名上传进度操作
    • ' - + '
  • ' - + '' - + '' - + '插入' - + '
    • ' - + '
' - + '
' - + '
    ' - + '
  • ' - + '' - + '

    ' - + '
    • ' - + '
' - + '
' - + '
' - }; - - /** - * [uploadFile 文件上传] - * @param {[type]} files [文件列表] - * @param {[type]} vm [vm对象] - * @param {[type]} type [image/file] - */ - function uploadFile(files, vm){ - for(var i = 0, it; it = files[i++];){ - - if(openType === 'image' && !/\.(jpg|jpeg|png|gif|bmp|webp|ico)$/.test(it.name)){ - vm.uploadFile.push({name: it.name, progress: '0%(失败,不允许的文件类型)', url: ''}) - continue - } - if(ME.maxSize > 0 && it.size > ME.maxSize){ - vm.uploadFile.push({name: it.name, progress: '0%(文件体积过大)', url: ''}) - continue - } - var fixName = Date.now().toString(16) + it.name.slice(it.name.lastIndexOf('.')) - - var idx = vm.uploadFile.length, - upload = new Uploader(vm.uploadUrl || ME.uploadUrl) - - vm.uploadFile.push({name: it.name, progress: '0%', url: ''}) - - upload.field('file', it) - - if(ME.beforeUpload){ - ME.beforeUpload(fixName, function(qn){ - - upload.field('token', qn.token) - .field('key', qn.key) - .onProgress(function(val){ - vm.uploadFile[idx].progress = val + '%' - }).onEnd(function(json){ - vm.uploadFile[idx].url = qn.url - }).start() - }) - }else{ - upload.onProgress(function(val){ - vm.uploadFile[idx].progress = val + '%' - }).onEnd(function(json){ - vm.uploadFile[idx].url = json.data.url - }).start() - } - } + .start() + }) + } else { + upload + .onProgress(function(val) { + vm.uploadFile[idx].progress = val + '%' + }) + .onEnd(function(json) { + vm.uploadFile[idx].url = json.data.url + }) + .start() + } } + } - function getAttach(vm, cb){ - var xhr = new XMLHttpRequest(), - url = vm.manageUrl || ME.manageUrl; + function getAttach(vm, cb) { + var xhr = new XMLHttpRequest(), + url = vm.manageUrl || ME.manageUrl - if(/\?/.test(url)){ - url += '&type=' + openType - }else{ - url += '?type=' + openType - } - url += '&t=' + Math.random() - - xhr.open('GET', url, true) - xhr.onreadystatechange = function(){ - if(this.readyState === 4 && - this.status === 200 && - this.responseText !== ''){ - var res = this.responseText - try{ - res = JSON.parse(res) - }catch(err){} - cb(res) - }else{ - if(this.status !== 200 && this.responseText) - console.error(this.responseText) + if (/\?/.test(url)) { + url += '&type=' + openType + } else { + url += '?type=' + openType + } + url += '&t=' + Math.random() + + xhr.open('GET', url, true) + xhr.onreadystatechange = function() { + if ( + this.readyState === 4 && + this.status === 200 && + this.responseText !== '' + ) { + var res = this.responseText + try { + res = JSON.parse(res) + } catch (err) {} + cb(res) + } else { + if (this.status !== 200 && this.responseText) + console.error(this.responseText) + } + } + xhr.send() + } + + function showDialog(elem, vm) { + opened = true + var offset = yua(elem).offset(), + layid = layer.open({ + type: 7, + menubar: false, + shade: false, + fixed: true, + offset: [offset.top + 37 - ME.doc.scrollTop()], + tab: 2, + attach: '', + attachAlt: '', + uploadFile: [], //当前上传的列表 + attachList: [], //附件管理列表 + $switch: function(id) { + var lvm = yua.vmodels[layid] + + lvm.tab = id + if (id === 3) { + lvm.attachList.clear() + if (cache[openType].length) { + lvm.attachList = cache[openType] + } else { + getAttach(vm, function(json) { + if (json) { + cache[openType] = json.data.list.map(function(it) { + it.thumb = + openType === 'image' + ? '' + : '' + return it + }) + lvm.attachList = json.data.list + } + }) } - } - xhr.send() - } - - function showDialog(elem, vm){ - opened = true - var offset = yua(elem).offset(), - layid = layer.open({ - type: 7, - menubar: false, - shade: false, - fixed: true, - offset: [offset.top + 37 - ME.doc.scrollTop()], - tab: 2, - attach: '', - attachAlt: '', - uploadFile: [], //当前上传的列表 - attachList: [], //附件管理列表 - $switch: function(id){ - var lvm = yua.vmodels[layid] - - lvm.tab = id - if(id === 3){ - lvm.attachList.clear() - if(cache[openType].length){ - lvm.attachList = cache[openType] - }else{ - getAttach(vm, function(json){ - if(json){ - cache[openType] = json.data.list.map(function(it){ - it.thumb = openType === 'image' ? '' : '' - return it - }) - lvm.attachList = json.data.list - } - }) - } - } - - - }, - $select: yua.noop, - $change: yua.noop, - $insert: function(it){ - if(!it.url){ - return - } - var val = (openType === 'image' ? '!' : '') - + '[' + it.name + '](' + it.url + ')' - ME.insert(vm.$editor, val) - }, - $confirm: function(){ - var lvm = yua.vmodels[layid] - if(!lvm.attach || !lvm.attachAlt){ - return layer.alert('描述和地址不能为空') - } - var val = '![' + lvm.attachAlt + '](' + lvm.attach + ')' - - ME.insert(vm.$editor, val) - lvm.no() - }, - success: function(id){ - var _this = yua.vmodels[id], - $file = document.body.querySelector('#meditor-attch') - - _this.no = function(){ - layer.close(id) - opened = false - } - _this.$select = function(){ - var ev = document.createEvent('MouseEvent') - ev.initEvent('click', false, false) - $file.dispatchEvent(ev); - } - _this.$change = function(){ - uploadFile(this.files, _this) - } - }, - content: fixCont() - }) - } - - - ME.addon.image = function(elem, vm){ - if(opened){ + } + }, + $select: yua.noop, + $change: yua.noop, + $insert: function(it) { + if (!it.url) { return - } - openType = 'image' - showDialog(elem, vm) + } + var val = + (openType === 'image' ? '!' : '') + + '[' + + it.name + + '](' + + it.url + + ')' + ME.insert(vm.$editor, val) + }, + $confirm: function() { + var lvm = yua.vmodels[layid] + if (!lvm.attach || !lvm.attachAlt) { + return layer.alert('描述和地址不能为空') + } + var val = '![' + lvm.attachAlt + '](' + lvm.attach + ')' + + ME.insert(vm.$editor, val) + lvm.no() + }, + success: function(id) { + var _this = yua.vmodels[id], + $file = document.body.querySelector('#meditor-attch') + + _this.no = function() { + layer.close(id) + opened = false + } + _this.$select = function() { + var ev = document.createEvent('MouseEvent') + ev.initEvent('click', false, false) + $file.dispatchEvent(ev) + } + _this.$change = function() { + uploadFile(this.files, _this) + } + }, + content: fixCont() + }) + } + + ME.addon.image = function(elem, vm) { + if (opened) { + return } + openType = 'image' + showDialog(elem, vm) + } - - ME.addon.file = function(elem, vm){ - if(opened){ - return - } - openType = 'file' - showDialog(elem, vm) + ME.addon.file = function(elem, vm) { + if (opened) { + return } + openType = 'file' + showDialog(elem, vm) + } - - - - - - - - - return $init - - -}) \ No newline at end of file + return $init +}) diff --git a/src/js/meditor/addon/base.js b/src/js/meditor/addon/base.js index 128a1cd..deb64d7 100644 --- a/src/js/meditor/addon/base.js +++ b/src/js/meditor/addon/base.js @@ -6,10 +6,10 @@ */ 'use strict' -import 'layer/base' +import 'layer/index' function objArr(num) { - var arr = [] + let arr = [] while (num > 0) { arr.push({ v: 0 }) num-- @@ -19,292 +19,373 @@ function objArr(num) { function trim(str, sign) { return str.replace(new RegExp('^' + sign + '|' + sign + '$', 'g'), '') } -function getOrderArr(len) { - var arr = [], - i = 0 - while (i < len) { - arr.push(i++) - } - return arr -} + const addon = { h1: function(elem, vm) { - var offset = Anot(elem).offset(), - wrap = ME.selection(vm.$editor, true) || '在此输入文本', - h1ID = layer.open({ - type: 7, - menubar: false, - shadeClose: true, - fixed: true, - $insert: function(level) { - wrap = wrap.replace(/^#{1,6} /, '') - wrap = ME.repeat('#', level) + ' ' + wrap - ME.insert(vm.$editor, wrap, true) - layer.close(h1ID) - }, - offset: [ - offset.top + 37 - ME.doc.scrollTop(), - 'auto', - 'auto', - offset.left - ME.doc.scrollLeft() - ], - content: - '' - }) + let that = this + let editor = vm.$refs.editor + let offset = Anot(elem).offset() + let wrap = this.selection(editor, true) || '在此输入文本' + layer.open({ + type: 7, + menubar: false, + maskClose: true, + fixed: true, + insert: function(level) { + wrap = wrap.replace(/^#{1,6} /, '') + wrap = that.repeat('#', level) + ' ' + wrap + that.insert(editor, wrap, true) + this.close() + }, + offset: [ + offset.top + 40 - that.doc.scrollTop(), + 'auto', + 'auto', + offset.left - that.doc.scrollLeft() + ], + shift: { + top: offset.top - that.doc.scrollTop(), + left: offset.left - that.doc.scrollLeft() + }, + content: ` + ` + }) }, quote: function(elem, vm) { - var wrap = ME.selection(vm.$editor) || '在此输入文本' + let wrap = this.selection(vm.$refs.editor) || '在此输入文本' wrap = '> ' + wrap - ME.insert(vm.$editor, wrap, true) + this.insert(vm.$refs.editor, wrap, true) }, bold: function(elem, vm) { - var wrap = ME.selection(vm.$editor) || '在此输入文本', - wraped = trim(wrap, '\\*\\*') + let wrap = this.selection(vm.$refs.editor) || '在此输入文本' + let wraped = trim(wrap, '\\*\\*') wrap = wrap === wraped ? '**' + wrap + '**' : wraped - ME.insert(vm.$editor, wrap, true) + this.insert(vm.$refs.editor, wrap, true) }, italic: function(elem, vm) { - var wrap = ME.selection(vm.$editor) || '在此输入文本', - wraped = trim(wrap, '_') + let wrap = this.selection(vm.$refs.editor) || '在此输入文本' + let wraped = trim(wrap, '_') wrap = wrap === wraped ? '_' + wrap + '_' : wraped - ME.insert(vm.$editor, wrap, true) + this.insert(vm.$refs.editor, wrap, true) }, through: function(elem, vm) { - var wrap = ME.selection(vm.$editor) || '在此输入文本', - wraped = trim(wrap, '~~') + let wrap = this.selection(vm.$refs.editor) || '在此输入文本' + let wraped = trim(wrap, '~~') wrap = wrap === wraped ? '~~' + wrap + '~~' : wraped - ME.insert(vm.$editor, wrap, true) + this.insert(vm.$refs.editor, wrap, true) }, unordered: function(elem, vm) { - var wrap = ME.selection(vm.$editor) || '在此输入文本' + let wrap = this.selection(vm.$refs.editor) || '在此输入文本' wrap = '* ' + wrap - ME.insert(vm.$editor, wrap, false) + this.insert(vm.$refs.editor, wrap, false) }, ordered: function(elem, vm) { - var wrap = ME.selection(vm.$editor) || '在此输入文本' + let wrap = this.selection(vm.$refs.editor) || '在此输入文本' wrap = '1. ' + wrap - ME.insert(vm.$editor, wrap, false) + this.insert(vm.$refs.editor, wrap, false) }, hr: function(elem, vm) { - ME.insert(vm.$editor, '\n\n---\n\n', false) + this.insert(vm.$refs.editor, '\n\n---\n\n', false) }, link: function(elem, vm) { - var offset = Anot(elem).offset(), - wrap = ME.selection(vm.$editor) || '', - layid = layer.open({ - type: 7, - menubar: false, - shadeClose: true, - fixed: true, - link: '', - linkName: wrap, - linkTarget: 1, - $confirm: function() { - var lvm = Anot.vmodels[layid] - if (!lvm.link || !lvm.linkName) { - return layer.alert('链接文字和地址不能为空') - } - var val = - '[' + - lvm.linkName + - '](' + - lvm.link + - (lvm.linkTarget === 1 ? ' "target=_blank"' : '') + - ')' - ME.insert(vm.$editor, val, false) - layer.close(layid) - }, - offset: [ - offset.top + 37 - ME.doc.scrollTop(), - 'auto', - 'auto', - offset.left - ME.doc.scrollLeft() - ], - content: - '
' + - '
链接文字' + - '' + - '
' + - '
链接地址' + - '' + - '
' + - '
' + - '' + - '' + - '
' + - '
' + - '确定' + - '
' + - '
' - }) + let that = this + let offset = Anot(elem).offset() + let wrap = this.selection(vm.$refs.editor) || '' + + layer.open({ + type: 7, + menubar: false, + maskClose: true, + fixed: true, + link: '', + linkName: wrap, + linkTarget: 1, + insert: function() { + if (!this.link || !this.linkName) { + return layer.toast('链接文字和地址不能为空', 'error') + } + let val = `[${this.linkName}](${this.link} ${ + this.linkTarget === 1 ? ' "target=_blank"' : '' + })` + + that.insert(vm.$refs.editor, val, false) + this.close() + }, + offset: [ + offset.top + 40 - that.doc.scrollTop(), + 'auto', + 'auto', + offset.left - that.doc.scrollLeft() + ], + shift: { + top: offset.top - that.doc.scrollTop(), + left: offset.left - that.doc.scrollLeft() + }, + content: ` +
+
+ +
+
+ +
+
+ + +
+
+ 确定 +
+
` + }) }, time: function(elem, vm) { - ME.insert(vm.$editor, new Date().format(), false) + this.insert(vm.$refs.editor, new Date().format(), false) }, face: function(elem, vm) { - var offset = Anot(elem).offset(), - faceid = 0, - layid = layer.open({ - type: 7, - title: '插入表情', - fixed: true, - shadeClose: true, - arr: getOrderArr(36), - offset: [ - offset.top + 37 - ME.doc.scrollTop(), - 'auto', - 'auto', - offset.left - ME.doc.scrollLeft() - ], - content: - '', - $insert: function(src) { - ME.insert(vm.$editor, '![](' + src + ')', false) - layer.close(layid) - } - }) + let that = this + let offset = Anot(elem).offset() + + layer.open({ + type: 7, + title: '插入表情', + fixed: true, + maskClose: true, + arr: [ + '😀', + '😅', + '😂', + '🤣', + '😇', + '😉', + '😍', + '😗', + '😋', + '😛', + '😜', + '🤨', + '🧐', + '🤓', + '😎', + '😞', + '😔', + '😭', + '😤', + '😡', + '😱', + '😰', + '😓', + '😬', + '🙄', + '😴', + '😪', + '🤮', + '😷', + '💩', + '👻', + '💀', + '🤝', + '👎', + '👍', + '🙏' + ], + offset: [ + offset.top + 40 - that.doc.scrollTop(), + 'auto', + 'auto', + offset.left - that.doc.scrollLeft() + ], + shift: { + top: offset.top - that.doc.scrollTop(), + left: offset.left - that.doc.scrollLeft() + }, + content: ` + `, + insert: function(val) { + that.insert(vm.$refs.editor, val, false) + this.close() + } + }) }, table: function(elem, vm) { - var offset = Anot(elem).offset() + let that = this + let offset = Anot(elem).offset() + layer.open({ type: 7, title: '0行 x 0列', fixed: true, - shadeClose: true, + maskClose: true, offset: [ - offset.top + 37 - ME.doc.scrollTop(), + offset.top + 40 - that.doc.scrollTop(), 'auto', 'auto', - offset.left - ME.doc.scrollLeft() + offset.left - that.doc.scrollLeft() ], + shift: { + top: offset.top - that.doc.scrollTop(), + left: offset.left - that.doc.scrollLeft() + }, matrix: objArr(10).map(function() { return objArr(10) }), - content: - '', - success: function(id) { - var tb = document.querySelector('.do-meditor-table'), - _this = Anot.vmodels[id], - lastx, - lasty - Anot(tb).bind('mousemove', function(ev) { + content: ` + `, + success: function() { + let tb = this.$refs.table + let lastx, lasty + + Anot(tb).bind('mousemove', ev => { if (ev.target.nodeName === 'SPAN') { - var x = ev.target.dataset.x - 0, - y = ev.target.dataset.y - 0 + let x = ev.target.dataset.x - 0 + let y = ev.target.dataset.y - 0 if (x === lastx && y === lasty) { return } lastx = x lasty = y - _this.title = y + 1 + '行 x ' + (x + 1) + '列' - for (var i = 0; i <= 9; i++) { - for (var j = 0; j <= 9; j++) { - _this.matrix[i][j].v = i <= y && j <= x ? 1 : 0 + this.title = y + 1 + '行 x ' + (x + 1) + '列' + for (let i = 0; i <= 9; i++) { + for (let j = 0; j <= 9; j++) { + this.matrix[i][j].v = i <= y && j <= x ? 1 : 0 } } } }) - Anot(tb).bind('mouseleave', function(ev) { + Anot(tb).bind('mouseleave', ev => { lastx = -1 lasty = -1 - _this.title = '0行 x 0列' - for (var i = 0; i <= 9; i++) { - for (var j = 0; j <= 9; j++) { - _this.matrix[i][j].v = 0 + this.title = '0行 x 0列' + for (let i = 0; i <= 9; i++) { + for (let j = 0; j <= 9; j++) { + this.matrix[i][j].v = 0 } } }) - Anot(tb).bind('click', function(ev) { + Anot(tb).bind('click', ev => { if (ev.target.nodeName === 'SPAN') { - var x = ev.target.dataset.x - 0 + 1, - y = ev.target.dataset.y - 0 + 1 + let x = ev.target.dataset.x - 0 + 1 + let y = ev.target.dataset.y - 0 + 1 - var val = - '\n\n' + - ME.repeat('| 表头 ', x) + - '|\n' + - ME.repeat('| -- ', x) + - '|\n' + - ME.repeat(ME.repeat('| ', x) + '|\n', y) - ME.insert(vm.$editor, val, false) - layer.close(id) + let thead = `\n\n${that.repeat('| 表头 ', x)}|\n` + let pipe = `${that.repeat('| -- ', x)}|\n` + let tbody = that.repeat(that.repeat('| ', x) + '|\n', y) + + that.insert(vm.$refs.editor, thead + pipe + tbody, false) + this.close() } }) } }) }, image: function(elem, vm) { - var offset = Anot(elem).offset(), - wrap = ME.selection(vm.$editor) || '', - layid = layer.open({ - type: 7, - menubar: false, - shadeClose: true, - fixed: true, - img: '', - imgAlt: wrap, - $confirm: function() { - var lvm = Anot.vmodels[layid] - if (!lvm.img || !lvm.imgAlt) { - return layer.alert('图片描述和图片地址不能为空') - } - var val = '![' + lvm.imgAlt + '](' + lvm.img + ')' + let that = this + let offset = Anot(elem).offset() + let wrap = this.selection(vm.$refs.editor) || '' - ME.insert(vm.$editor, val, false) - layer.close(layid) - }, - offset: [ - offset.top + 37 - ME.doc.scrollTop(), - 'auto', - 'auto', - offset.left - ME.doc.scrollLeft() - ], - content: - '
' + - '
图片描述' + - '' + - '
' + - '
图片地址' + - '' + - '
' + - '
' + - '确定' + - '
' + - '
' - }) + layer.open({ + type: 7, + menubar: false, + maskClose: true, + fixed: true, + img: '', + imgAlt: wrap, + insert: function() { + if (!this.img || !this.imgAlt) { + return layer.toast('链接文字和地址不能为空', 'error') + } + let val = `![${this.imgAlt}](${this.img})` + + that.insert(vm.$refs.editor, val, false) + this.close() + }, + offset: [ + offset.top + 40 - that.doc.scrollTop(), + 'auto', + 'auto', + offset.left - that.doc.scrollLeft() + ], + shift: { + top: offset.top - that.doc.scrollTop(), + left: offset.left - that.doc.scrollLeft() + }, + content: ` +
+
+ +
+
+ +
+
+ 确定 +
+
+ ` + }) }, - file: function(elem, vm) { - this.link(elem, vm, false) + attach: function(elem, vm) { + this.addon.link.call(this, elem, vm, false) }, inlinecode: function(elem, vm) { - var wrap = ME.selection(vm.$editor) || '在此输入文本', - wraped = trim(wrap, '`') + let wrap = this.selection(vm.$refs.editor) || '在此输入文本' + let wraped = trim(wrap, '`') wrap = wrap === wraped ? '`' + wrap + '`' : wraped - ME.insert(vm.$editor, wrap, true) + this.insert(vm.$refs.editor, wrap, true) }, blockcode: function(elem, vm) { - var layid = layer.open({ + let that = this + layer.open({ type: 7, title: '添加代码块', $lang: [ @@ -350,11 +431,11 @@ const addon = { var val = '\n```' + lvm.lang + '\n' + (lvm.code || '//在此输入代码') + '\n```\n' - ME.insert(vm.$editor, val, false) + that.insert(vm.$refs.editor, val, false) layer.close(layid) }, content: - '
' + + '
' + '
语言类型' + '' + - '' + - '
' - ).replace(/\{toolbar\}/g, toolbar) + + return ` +
+
${toolbar}
+ + +
+ ` }, - construct: function(base, opt, attr) { - Anot.mix(base, opt, attr) - if (base.$addons && Array.isArray(base.$addons)) { - extraAddons = base.$addons.map(function(name) { - return ME.path + '/addon/' + name - }) - delete base.$addons + construct: function(props, state) { + // Anot.mix(base, opt, attr) + // if (base.$addons && Array.isArray(base.$addons)) { + // extraAddons = base.$addons.map(function(name) { + // return ME.path + '/addon/' + name + // }) + // delete base.$addons + // } + if (props.hasOwnProperty('$show')) { + state.editorVisible = props.$show + delete props.$show } - if (base.hasOwnProperty('$show')) { - base.editorVisible = base.$show - delete base.$show - } - return base }, componentWillMount: function(vm) {}, componentDidMount: function(vm, elem) { @@ -411,25 +422,32 @@ Anot.component('meditor', { }, watch: { plainTxt: function(val) { - this.$compile() + this.compile() //只有开启实时预览,才会赋值给htmlTxt if (this.preview) { this.htmlTxt = this.$htmlTxt } - this.$onUpdate(this.plainTxt, vm.$htmlTxt) + if (typeof this.props.onUpdate === 'function') { + this.props.onUpdate(this.plainTxt, this.$htmlTxt) + } } }, state: { disabled: false, //禁用编辑器 fullscreen: false, //是否全屏 preview: false, //是否显示预览 - $editor: null, //编辑器元素 + // $editor: null, //编辑器元素 editorVisible: true, $htmlTxt: '', //临时储存html文本 htmlTxt: '', //用于预览渲染 plainTxt: '', //纯md文本 $safelyCompile: true }, + props: { + onSuccess: Anot.PropsTypes.isFunction(), + onUpdate: Anot.PropsTypes.isFunction(), + onFullscreen: Anot.PropsTypes.isFunction() + }, methods: { onToolClick: function(name, ev) { if (ME.addon[name]) { @@ -438,24 +456,23 @@ Anot.component('meditor', { console.log('%c没有对应的插件%c[%s]', 'color:#f00;', '', name) } }, - $onSuccess: Anot.noop, - $onUpdate: Anot.noop, - $onFullscreen: Anot.noop, - $paste: function(ev) { + onPaste: function(ev) { ev.preventDefault() - var txt = ev.clipboardData.getData('text/plain').trim(), - html = ev.clipboardData.getData('text/html').trim() + let txt = ev.clipboardData.getData('text/plain').trim() + let html = ev.clipboardData.getData('text/html').trim() html = html2md(html) if (html) { - ME.insert(this, html) + ME.insert(ev.target, html) } else if (txt) { - ME.insert(this, txt) + ME.insert(ev.target, txt) } - this.plainTxt = this.value + log(ev.target.value) + this.plainTxt = this.$refs.editor.value }, compile: function() { + log(this) var txt = this.plainTxt.trim() if (this.$safelyCompile) { diff --git a/src/js/meditor/skin/main.scss b/src/js/meditor/skin/main.scss index a4f566e..5929d40 100644 --- a/src/js/meditor/skin/main.scss +++ b/src/js/meditor/skin/main.scss @@ -8,7 +8,11 @@ @import "var.scss"; -.do-meditor {position:relative;width:100%;height:100%;min-height:180px;padding-top:43px;border:1px solid #ddd;background:#fff;color:#666; +@font-face {font-family: "mefont"; + src: url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'); +} + +.do-meditor {position:relative;width:100%;height:100%;min-height:180px;padding-top:41px;border:1px solid nth($cp, 3);background:#fff;color:#666;box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15); ::-webkit-scrollbar {width:5px;height:5px;background:#ebeeec;} ::-webkit-scrollbar:hover {background:rgba(0,0,0,.05);} @@ -16,11 +20,71 @@ ::-webkit-scrollbar-thumb {background:nth($ct, 1);} ::-webkit-scrollbar-thumb:hover {background:nth($ct, 3);} + + + .tool-bar {overflow:hidden;position:absolute;top:0;left:0;z-index:99;width:100%;height:41px;padding:0 3px;line-height:40px;border-bottom:1px solid nth($cp, 1);background:#fff;color:nth($cgr, 2);text-align:center;font-size:24px; + + span {float:left;width:40px;height:40px; + + &:hover {background:#f7f8fb;} + &.icon-pipe {width:28px;background:#fff;color:nth($cp, 3);} + } + } + + .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:#f7f8fb;font-size:14px;} + + .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:#ff0;} + + + + /*全屏模式*/ + &.fullscreen {position:fixed;left:0;top:0;z-index:999;} + + &.preview .editor-body {width:50%} + +} +.do-meditor__font {font-family:"PingFang SC","Helvetica Neue","Hiragino Sans GB","Segoe UI","Microsoft YaHei",sans-serif;} +.do-meditor__icon {display:inline-block;font-family:"mefont" !important;font-style:normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; + + &.icon-attach:before { content: "\e673"; } + &.icon-about:before { content: "\e674"; } + &.icon-blockcode:before { content: "\e675"; } + &.icon-bold:before { content: "\e679"; } + &.icon-through:before { content: "\e67a"; } + &.icon-fullscreen:before { content: "\e67b"; } + &.icon-italic:before { content: "\e67c"; } + &.icon-h2:before { content: "\e67d"; } + &.icon-h1:before { content: "\e67e"; } + &.icon-h4:before { content: "\e67f"; } + &.icon-h5:before { content: "\e680"; } + &.icon-h3:before { content: "\e681"; } + &.icon-help:before { content: "\e682"; } + &.icon-h6:before { content: "\e683"; } + &.icon-inlinecode:before { content: "\e684"; } + &.icon-hr:before { content: "\e685"; } + &.icon-link:before { content: "\e686"; } + &.icon-unordered:before { content: "\e687"; } + &.icon-ordered:before { content: "\e688"; } + &.icon-image:before { content: "\e689"; } + &.icon-pipe:before { content: "\e68a"; } + &.icon-preview:before { content: "\e68c"; } + &.icon-quote:before { content: "\e68d"; } + &.icon-table:before { content: "\e690"; } + &.icon-time:before { content: "\e691"; } + &.icon-face:before { content: "\e677"; } } -.do-meditor-font {font-family:"PingFang SC","Helvetica Neue","Hiragino Sans GB","Segoe UI","Microsoft YaHei",sans-serif;} +.do-meditor__button {overflow:hidden;position:relative;display:inline-block;width:auto;min-width:60px;height:40px;margin-left:5px;padding:0 10px;color:nth($ct, 1);text-align:center; + + &::before {position:absolute;left:-50%;top:-50%;z-index:-1;display:block;width:200%;height:200%;border-radius:50%;background:nth($cp, 2); content:"";opacity:0;transform: scale(0, .0); transition:opacity 1.3s cubic-bezier(0.23, 1, 0.32, 1),transform 1.3s cubic-bezier(0.23, 1, 0.32, 1);} + &:hover { + &::before {opacity:1;transform:scale(1, .8);} + } + &:active {background:nth($cp, 1)} +} + /* 关于编辑器模块*/ .do-meditor-about {width:400px;padding:10px 20px; @@ -31,47 +95,46 @@ /*表格模块*/ -.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;} +.do-meditor-table {width:270px;height:270px;padding:0; + li {width:100%;height:27px; + span {float:left;width:27px;height:27px;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; +.do-meditor-face {float:left;;width:241px;height:241px;border-top:1px solid #e2e2e2;border-left:1px solid #e2e2e2; - li {float:left;width:40px;height:40px;padding:8px;border:1px solid #e2e2e2;border-top:0;border-left:0} - li img {width:100%;@include ts();} - li:hover img {-webkit-transform:scale(3);-moz-transform:scale(3);-ms-transform:scale(3);transform:scale(3);} + li {float:left;width:40px;height:40px;padding:5px;line-height:30px;border:1px solid #e2e2e2;border-top:0;border-left:0;text-align:center;} + li span {display:block;width:100%;height:100%;background:#fff;@include ts();} + li:hover span {box-shadow:0 1px 5px rgba(0,0,0,.2);transform:scale(3);} } /*段落模块*/ -.do-meditor-h1 {width:150px;height:auto;padding:5px 0; +.do-meditor-h1 {width:150px;height:auto; li {width:100%;height:auto;padding:0 10px;line-height:1.5;font-size:18px;cursor:default;} li:hover {background:#f2f2f2;} - li::before {font-family:"ui font" !important;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale;} - li.h1 {font-size:23px;} - li.h2 {font-size:21px;} - li.h1::before {content:"\e62b "} - li.h2::before {content:"\e625 "} - li.h3::before {content:"\e626 "} - li.h4::before {content:"\e629 "} - li.h5::before {content:"\e62a "} - li.h6::before {content:"\e624 "} + li.h1 {font-size:25px;} + li.h2 {font-size:23px;} + li.h3 {font-size:21px;} } /*通用输入模块, 链接/图片插入/文件插入/代码块插入*/ -.do-meditor-common {width:360px;height:auto;padding:15px 20px; - section {width:100%;height: 35px;margin:10px 0;line-height:35px; +.do-meditor-common {width:360px;height:auto;padding:0 20px;font-size:14px;color:nth($cgr, 2); + + section {width:100%;height: 40px;margin:10px 0;line-height:40px; + + &.input {border-radius:5px;background:nth($cp, 2); + + .txt {width:100%;height:40px;padding:0 10px;border:0;background:none;color:nth($cgr, 1);font-size:14px;} + } - &.input {line-height:33px;border:1px solid #e9e9e9;} .label {float: left;width:30%;text-align:center;background:#f7f7f7;} label {float: left;width:50%;} - .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;} + + .submit {float:right;width:30%;} } } @@ -91,45 +154,3 @@ } - - -.do-meditor { - .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:32px;height:32px;line-height:32px;text-align:center;font-size:28px;} - span:hover {background:#e5e5e5;} - .icon-pipe {width:20px;color:nth($cp, 3)} - .icon-pipe:hover {background:none;} - .icon-pipe::before {content:"\e677"} - .icon-h1::before {content:"\e65c"} - .icon-bold::before {content:"\e66c"} - .icon-italic::before {content:"\e670"} - .icon-through::before {content:"\e66d"} - .icon-link::before {content:"\e667"} - .icon-inlinecode::before {content:"\e67a"} - .icon-blockcode::before {content:"\e67b"} - .icon-quote::before {content:"\e66a"} - .icon-hr::before {content:"\e676"} - .icon-time::before {content:"\e675"} - .icon-face::before {content:"\e673"} - .icon-image::before {content:"\e682"} - .icon-file::before {content:"\e66b"} - .icon-preview::before {content:"\e67d"} - .icon-fullscreen::before {content:"\e67e"} - .icon-table::before {content:"\e65a"} - .icon-ordered::before {content:"\e664"} - .icon-unordered::before {content:"\e663"} - .icon-about::before {content:"\e672"} - } - - .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 {width:50%} - -} \ No newline at end of file diff --git a/src/js/prism/base.js b/src/js/prism/base.js index 0ef809a..c9c73b7 100644 --- a/src/js/prism/base.js +++ b/src/js/prism/base.js @@ -7,15 +7,13 @@ import './highlight.scss' -var _self = window - var Prism = (function() { // Private helper vars var lang = /\blang(?:uage)?-(\w+)\b/i var uniqueId = 0 - var _ = (_self.Prism = { - manual: _self.Prism && _self.Prism.manual, + var _ = (window.Prism = { + manual: window.Prism && window.Prism.manual, util: { encode: function(tokens) { if (tokens instanceof Token) { @@ -221,7 +219,7 @@ var Prism = (function() { _.hooks.run('before-highlight', env) - if (async && _self.Worker) { + if (async && window.Worker) { var worker = new Worker(_.filename) worker.onmessage = function(evt) { @@ -487,13 +485,13 @@ var Prism = (function() { ) } - if (!_self.document) { - if (!_self.addEventListener) { + if (!window.document) { + if (!window.addEventListener) { // in Node.js - return _self.Prism + return window.Prism } // In worker - _self.addEventListener( + window.addEventListener( 'message', function(evt) { var message = JSON.parse(evt.data), @@ -501,15 +499,15 @@ var Prism = (function() { code = message.code, immediateClose = message.immediateClose - _self.postMessage(_.highlight(code, _.languages[lang], lang)) + window.postMessage(_.highlight(code, _.languages[lang], lang)) if (immediateClose) { - _self.close() + window.close() } }, false ) - return _self.Prism + return window.Prism } //Get current script and highlight @@ -537,7 +535,7 @@ var Prism = (function() { } } - return _self.Prism + return window.Prism })() Prism.languages.markup = { diff --git a/src/js/prism/index.js b/src/js/prism/index.js index f59a69a..c388c4b 100644 --- a/src/js/prism/index.js +++ b/src/js/prism/index.js @@ -232,7 +232,6 @@ Prism.languages.insertBefore('cpp', 'keyword', { }) /*-----------------------coffeescript-----------------------*/ - ;(function(Prism) { // Ignore comments starting with { to privilege string interpolation highlighting var comment = /#(?!\{).+/, @@ -322,7 +321,6 @@ Prism.languages.insertBefore('cpp', 'keyword', { })(Prism) /*---------------------------ruby---------------------------*/ - ;(function(Prism) { Prism.languages.ruby = Prism.languages.extend('clike', { comment: [ @@ -650,7 +648,6 @@ Prism.languages.haskell = { } /*---------------------------jade---------------------------*/ - ;(function(Prism) { Prism.languages.jade = { comment: { @@ -862,7 +859,6 @@ Prism.languages.json = { Prism.languages.jsonp = Prism.languages.json /*--------------------------kotlin----------------------------*/ - ;(function(Prism) { Prism.languages.kotlin = Prism.languages.extend('clike', { keyword: { @@ -1525,7 +1521,6 @@ Prism.languages.rust = { } /*------------------------------------------------------------*/ - ;(function(Prism) { Prism.languages.sass = Prism.languages.extend('css', { // Sass comments don't need to be closed, only indented @@ -1676,7 +1671,6 @@ Prism.languages.scss['atrule'].inside.rest = Prism.util.clone( ) /*-----------------------------smarty-------------------------*/ - ;(function(Prism) { var smarty_pattern = /\{\*[\s\S]+?\*\}|\{[\s\S]+?\}/g var smarty_litteral_start = '{literal}'