├── .babelrc ├── .gitignore ├── LICENSE ├── README.md ├── dist └── index.js ├── example ├── .babelrc ├── .gitignore ├── asset │ └── icon.png ├── dist │ └── build.js ├── index.html ├── package.json ├── src │ ├── App.vue │ ├── main.js │ └── vue-editor │ │ ├── icon.vue │ │ ├── index.js │ │ └── vue-editor.vue └── webpack.config.js ├── package.json ├── src ├── icon.vue ├── index.js └── vue-editor.vue └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015"], 3 | "plugins": ["transform-runtime"], 4 | "comments": false 5 | } 6 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | npm-debug.log 3 | .DS_Store 4 | .idea/ 5 | .vscode/ 6 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 goodboy 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ### vue-editor 2 | #### install 3 | ``` 4 | npm install vue-editor-component 5 | ``` 6 | [预览](http://xyxiao.cn/vue-editor/example/) 7 | -------------------------------------------------------------------------------- /dist/index.js: -------------------------------------------------------------------------------- 1 | !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("vue-cropper",[],t):"object"==typeof exports?exports["vue-cropper"]=t():e["vue-cropper"]=t()}(this,function(){return function(e){function t(n){if(o[n])return o[n].exports;var i=o[n]={i:n,l:!1,exports:{}};return e[n].call(i.exports,i,i.exports,t),i.l=!0,i.exports}var o={};return t.m=e,t.c=o,t.i=function(e){return e},t.d=function(e,o,n){t.o(e,o)||Object.defineProperty(e,o,{configurable:!1,enumerable:!0,get:n})},t.n=function(e){var o=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(o,"a",o),o},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=6)}([function(e,t){e.exports=function(){var e=[];return e.toString=function(){for(var e=[],t=0;to.parts.length&&(n.parts.length=o.parts.length)}else{for(var a=[],i=0;i

",selectedRange:"",iconList:[{name:"标签",type:"style",icon:"icon-magic",drop:!0,canChoose:!0,choose:!1},{name:"粗体",type:"bold",icon:"icon-bold",drop:!1,canChoose:!0,choose:!1},{name:"斜体",type:"italic",icon:"icon-italic",drop:!1,canChoose:!0,choose:!1},{name:"下划线",type:"underline",icon:"icon-underline",drop:!1,canChoose:!0,choose:!1},{name:"删除线",type:"strike",icon:"icon-strike",drop:!1,canChoose:!0,choose:!1},{name:"清除样式",type:"clear",icon:"icon-xiangpi",drop:!1,canChoose:!1,choose:!1},{name:"字体颜色",type:"fontFamily",icon:"icon-char",drop:!1,canChoose:!0,choose:!1},{name:"无序列表",type:"unorderedlist",icon:"icon-unorderedlist",drop:!1,canChoose:!0,choose:!1},{name:"有序列表",type:"orderedlist",icon:"icon-orderedlist",drop:!1,canChoose:!0,choose:!1},{name:"对齐方式",type:"alignjustify",icon:"icon-alignjustify",drop:!0,canChoose:!0,choose:!1}]}},methods:{iconClick:function(e,t,o){var n=this;e.preventDefault(),this.$refs.editor.focus(),this.selectedRange=this.getSelect(),this.restoreSelection(),this.changeStyle(t),this.$nextTick(function(){o&&(t=o);var e=n.iconList.map(function(e,o){return t===e.type&&e.canChoose&&(e.choose=!e.choose),e});if("clear"===t)var e=n.iconList.map(function(e,t){return e.choose=!1,e});n.iconList=e})},getSelect:function(){if(window.getSelection){var e=window.getSelection();if(e.rangeCount>0)return e.getRangeAt(0)}else if(document.selection)return document.selection.createRange();return null},changeStyle:function(e){switch(e){case"bold":document.execCommand("bold",!1);break;case"underline":document.execCommand("underline",!1);break;case"strike":document.execCommand("strikeThrough",!1);break;case"italic":document.execCommand("italic",!1);break;case"clear":document.execCommand("removeFormat",!1);break;case"unorderedlist":document.execCommand("insertUnorderedList",!1);break;case"orderedlist":document.execCommand("insertorderedList",!1);break;case"h1":case"h2":case"h3":case"h4":case"h5":case"h6":case"p":case"pre":case"blockquote":document.execCommand("formatBlock",!1,e);break;case"justifyCenter":case"justifyFull":case"justifyLeft":case"justifyRight":document.execCommand(e,!1);break;default:console.log("none")}},restoreSelection:function(){var e=window.getSelection();if(this.selectedRange){try{e.removeAllRanges()}catch(e){document.body.createTextRange().select(),document.selection.empty()}e.addRange(this.selectedRange)}}},components:{Icon:i.default}}},function(e,t,o){"use strict";var n=o(3);e.exports=n},function(e,t,o){t=e.exports=o(0)(),t.push([e.i,".vue-editor blockquote{padding:10px 20px;font-size:17.5px;border-left:5px solid #f86466;background:#fff}.vue-editor pre{display:block;padding:9.5px;font-size:13px;line-height:1.42857143;color:#333;word-break:break-all;word-wrap:break-word;background-color:#f5f5f5;border:1px solid #ccc;border-radius:4px}.editor-body blockquote{margin-bottom:30px}.editor-body pre{margin-bottom:10px}.editor-body ul{list-style-type:disc}.editor-body ol,.editor-body ul{padding-left:40px}",""])},function(e,t,o){t=e.exports=o(0)(),t.push([e.i,"@import url(//at.alicdn.com/t/font_8e1zfc5tlz6ywrk9.css);",""]),t.push([e.i,".h1[data-v-237749dc],.h2[data-v-237749dc],.h3[data-v-237749dc],.h4[data-v-237749dc],.h5[data-v-237749dc],.h6[data-v-237749dc],a[data-v-237749dc],h1[data-v-237749dc],h2[data-v-237749dc],h3[data-v-237749dc],h4[data-v-237749dc],h5[data-v-237749dc],h6[data-v-237749dc],p[data-v-237749dc]{font-family:inherit;font-weight:500;line-height:1.1;color:inherit;margin:0;text-decoration:none}code[data-v-237749dc],kbd[data-v-237749dc],pre[data-v-237749dc],samp[data-v-237749dc]{font-family:Menlo,Monaco,Consolas,Courier New,monospace}.vue-editor[data-v-237749dc]{position:relative;background-color:#fff;border-radius:4px;border:1px solid #a9a9a9;box-shadow:0 1px 1px rgba(0,0,0,.05);font-family:Helvetica Neue,Helvetica,Arial,sans-serif}.editor-control[data-v-237749dc]{display:flex;flex-flow:row wrap;min-height:40px;color:#333;border-bottom:1px solid transparent;border-top-left-radius:3px;border-top-right-radius:3px;background-color:#f5f5f5;border-color:#ddd}.dropmenu[data-v-237749dc]{display:none;position:absolute;top:32px;left:0;z-index:1000;min-width:160px;padding:5px 0;margin:2px 0 0;font-size:14px;background-color:#fff;background-clip:padding-box;border:1px solid #ccc;border:1px solid rgba(0,0,0,.15);border-radius:4px;box-shadow:0 6px 12px rgba(0,0,0,.175)}.dropmenu[data-v-237749dc],.dropmenu ul li[data-v-237749dc]{text-align:left;list-style:none}.dropmenu ul li a[data-v-237749dc]{display:block;padding:5px 10px}.drop-align[data-v-237749dc]{min-width:100px}.editor-body[data-v-237749dc]{height:300px;padding:10px;color:#000;background-color:#fff;overflow:auto;outline:none}.editor-body p[data-v-237749dc]{font-size:14px;color:#68747f;margin:0 0 10px}",""])},function(e,t,o){t=e.exports=o(0)(),t.push([e.i,'.editor-item[data-v-821f1f7e]{border:1px solid #ccc;line-height:20px;border-radius:3px;margin:4px 0 4px 5px}.editor-item .item-icon[data-v-821f1f7e],.editor-item[data-v-821f1f7e]{position:relative;vertical-align:middle;cursor:pointer;background-color:#fff}.editor-item .item-icon[data-v-821f1f7e]{display:inline-block;width:100%;height:100%;padding:2px 10px;font-size:18px;font-weight:400;white-space:nowrap;touch-action:manipulation;user-select:none;border:1px solid #fff;outline:none;transition:all .1s ease-out}.editor-item .item-icon[data-v-821f1f7e]:after{position:absolute;top:0;content:attr(data-info);top:40px;left:20px;padding:5px 8px;border-radius:4px;white-space:nowrap;line-height:1.5;font-size:13px;color:#fff;background:rgba(0,0,0,.8);-webkit-transform:translateX(-50%);transform:translateX(-50%);visibility:hidden;opacity:.9;letter-spacing:1px;z-index:9999}.editor-item .item-icon[data-v-821f1f7e]:before{position:absolute;content:"";top:35px;left:20px;width:0;height:0;margin:0 0 0 -6px;font-size:0;color:rgba(0,0,0,.8);border-bottom:6px solid currentColor;border-left:6px solid transparent;border-right:6px solid transparent;visibility:hidden;opacity:.9;z-index:9999}.item-icon.activity[data-v-821f1f7e],.item-icon[data-v-821f1f7e]:hover{color:#333;background-color:#e6e6e6;border-color:#e6e6e6}.editor-item .item-icon[data-v-821f1f7e]:hover:after,.editor-item .item-icon[data-v-821f1f7e]:hover:before{visibility:visible}.item-icon.activity+.dropmenu[data-v-821f1f7e]{display:block}',""])},function(e,t,o){o(15);var n=o(2)(o(4),o(12),"data-v-821f1f7e",null);e.exports=n.exports},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,o=e._self._c||t;return o("div",{staticClass:"vue-editor"},[o("div",{staticClass:"editor-control"},e._l(e.iconList,function(t,n){return o("Icon",{key:"item.type",attrs:{name:t.name,type:t.type,icon:t.icon,choose:t.choose},on:{iconClick:e.iconClick}},["style"===t.type?o("div",{staticClass:"dropmenu drop-style"},[o("ul",[o("li",[o("a",{attrs:{href:"#"},on:{click:function(t){e.iconClick(t,"p","style")}}},[o("p",[e._v("正文")])])]),e._v(" "),o("li",[o("a",{attrs:{href:"#"},on:{click:function(t){e.iconClick(t,"pre","style")}}},[o("pre",[e._v("code")])])]),e._v(" "),o("li",[o("a",{attrs:{href:"#"},on:{click:function(t){e.iconClick(t,"blockquote","style")}}},[o("blockquote",[e._v("引用")])],1)]),e._v(" "),o("li",[o("a",{attrs:{href:"#"},on:{click:function(t){e.iconClick(t,"h1","style")}}},[o("h1",[e._v("标题一")])])]),e._v(" "),o("li",[o("a",{attrs:{href:"#"},on:{click:function(t){e.iconClick(t,"h2","style")}}},[o("h2",[e._v("标题二")])])]),e._v(" "),o("li",[o("a",{attrs:{href:"#"},on:{click:function(t){e.iconClick(t,"h3","style")}}},[o("h3",[e._v("标题三 ")])])]),e._v(" "),o("li",[o("a",{attrs:{href:"#"},on:{click:function(t){e.iconClick(t,"h4","style")}}},[o("h4",[e._v("标题四 ")])])]),e._v(" "),o("li",[o("a",{attrs:{href:"#"},on:{click:function(t){e.iconClick(t,"h5","style")}}},[o("h5",[e._v("标题五 ")])])]),e._v(" "),o("li",[o("a",{attrs:{href:"#"},on:{click:function(t){e.iconClick(t,"h6","style")}}},[o("h6",[e._v("标题六")])])])])]):e._e(),e._v(" "),"alignjustify"===t.type?o("div",{staticClass:"dropmenu drop-align"},[o("ul",[o("li",[o("a",{attrs:{href:"#"},on:{click:function(t){e.iconClick(t,"justifyCenter","alignjustify")}}},[o("i",{staticClass:"iconfont icon-aligncenter"}),e._v(" "),o("span",[e._v("居中")])])]),e._v(" "),o("li",[o("a",{attrs:{href:"#"},on:{click:function(t){e.iconClick(t,"justifyLeft","alignjustify")}}},[o("i",{staticClass:"iconfont icon-alignleft"}),e._v(" "),o("span",[e._v("左对齐")])])]),e._v(" "),o("li",[o("a",{attrs:{href:"#"},on:{click:function(t){e.iconClick(t,"justifyRight","alignjustify")}}},[o("i",{staticClass:"iconfont icon-alignright"}),e._v(" "),o("span",[e._v("右对齐")])])]),e._v(" "),o("li",[o("a",{attrs:{href:"#"},on:{click:function(t){e.iconClick(t,"justifyFull","alignjustify")}}},[o("i",{staticClass:"iconfont icon-alignjustify"}),e._v(" "),o("span",[e._v("默认对齐")])])])])]):e._e()])})),e._v(" "),o("div",{ref:"editor",staticClass:"editor-body",attrs:{contenteditable:"true",spellcheck:"false"},domProps:{innerHTML:e._s(e.html)}})])},staticRenderFns:[]}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,o=e._self._c||t;return o("div",{staticClass:"editor-item"},[o("button",{staticClass:"item-icon",class:{activity:e.choose},attrs:{"data-info":e.name,"data-type":e.type},on:{click:function(t){e.iconClick(t,e.type)}}},[e.icon.length>0?o("i",{staticClass:"iconfont",class:e.icon}):e._e()]),e._v(" "),e._t("default")],2)},staticRenderFns:[]}},function(e,t,o){var n=o(7);"string"==typeof n&&(n=[[e.i,n,""]]),n.locals&&(e.exports=n.locals);o(1)("0912f2ea",n,!0)},function(e,t,o){var n=o(8);"string"==typeof n&&(n=[[e.i,n,""]]),n.locals&&(e.exports=n.locals);o(1)("bf88c7fa",n,!0)},function(e,t,o){var n=o(9);"string"==typeof n&&(n=[[e.i,n,""]]),n.locals&&(e.exports=n.locals);o(1)("612fd18b",n,!0)},function(e,t){e.exports=function(e,t){for(var o=[],n={},i=0;i=0&&m.splice(e,1)}function a(t){var e=document.createElement("style");return e.type="text/css",o(t,e),e}function s(t,e){var n,r,o;if(e.singleton){var s=h++;n=v||(v=a(e)),r=c.bind(null,n,s,!1),o=c.bind(null,n,s,!0)}else n=a(e),r=l.bind(null,n),o=function(){i(n)};return r(t),function(e){if(e){if(e.css===t.css&&e.media===t.media&&e.sourceMap===t.sourceMap)return;r(t=e)}else o()}}function c(t,e,n,r){var o=n?"":r.css;if(t.styleSheet)t.styleSheet.cssText=y(e,o);else{var i=document.createTextNode(o),a=t.childNodes;a[e]&&t.removeChild(a[e]),a.length?t.insertBefore(i,a[e]):t.appendChild(i)}}function l(t,e){var n=e.css,r=e.media,o=e.sourceMap;if(r&&t.setAttribute("media",r),o&&(n+="\n/*# sourceURL="+o.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(o))))+" */"),t.styleSheet)t.styleSheet.cssText=n;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(n))}}var u={},f=function(t){var e;return function(){return void 0===e&&(e=t.apply(this,arguments)),e}},d=f(function(){return/msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase())}),p=f(function(){return document.head||document.getElementsByTagName("head")[0]}),v=null,h=0,m=[];t.exports=function(t,e){if("undefined"!=typeof DEBUG&&DEBUG&&"object"!=typeof document)throw new Error("The style-loader cannot be used in a non-browser environment");e=e||{},void 0===e.singleton&&(e.singleton=d()),void 0===e.insertAt&&(e.insertAt="bottom");var o=r(t);return n(o,e),function(t){for(var i=[],a=0;a-1)return t.splice(n,1)}}function v(t,e){return Gn.call(t,e)}function h(t){var e=Object.create(null);return function(n){return e[n]||(e[n]=t(n))}}function m(t,e){function n(n){var r=arguments.length;return r?r>1?t.apply(e,arguments):t.call(e,n):t.call(e)}return n._length=t.length,n}function y(t,e){e=e||0;for(var n=t.length-e,r=new Array(n);n--;)r[n]=t[n+e];return r}function g(t,e){for(var n in e)t[n]=e[n];return t}function _(t){for(var e={},n=0;nKr&&Vr[n].id>t.id;)n--;Vr.splice(n+1,0,t)}else Vr.push(t);Wr||(Wr=!0,$r(At))}}function Et(t){Zr.clear(),Tt(t,Zr)}function Tt(t,e){var n,r,o=Array.isArray(t);if((o||s(t))&&Object.isExtensible(t)){if(t.__ob__){var i=t.__ob__.dep.id;if(e.has(i))return;e.add(i)}if(o)for(n=t.length;n--;)Tt(t[n],e);else for(r=Object.keys(t),n=r.length;n--;)Tt(t[r[n]],e)}}function It(t,e,n){Qr.get=function(){return this[e][n]},Qr.set=function(t){this[e][n]=t},Object.defineProperty(t,n,Qr)}function Lt(t){t._watchers=[];var e=t.$options;e.props&&Dt(t,e.props),e.methods&&Ut(t,e.methods),e.data?Nt(t):L(t._data={},!0),e.computed&&Pt(t,e.computed),e.watch&&Bt(t,e.watch)}function Dt(t,e){var n=t.$options.propsData||{},r=t._props={},o=t.$options._propKeys=[],i=!t.$parent;Lr.shouldConvert=i;for(var a in e)!function(i){o.push(i);var a=q(i,e,n,t);D(r,i,a),i in t||It(t,"_props",i)}(a);Lr.shouldConvert=!0}function Nt(t){var e=t.$options.data;e=t._data="function"==typeof e?Mt(e,t):e||{},c(e)||(e={});for(var n=Object.keys(e),r=t.$options.props,o=n.length;o--;)r&&v(r,n[o])||w(n[o])||It(t,"_data",n[o]);L(e,!0)}function Mt(t,e){try{return t.call(e)}catch(t){return O(t,e,"data()"),{}}}function Pt(t,e){var n=t._computedWatchers=Object.create(null);for(var r in e){var o=e[r],i="function"==typeof o?o:o.get;n[r]=new Xr(t,i,b,Yr),r in t||Rt(t,r,o)}}function Rt(t,e,n){"function"==typeof n?(Qr.get=zt(e),Qr.set=b):(Qr.get=n.get?!1!==n.cache?zt(e):n.get:b,Qr.set=n.set?n.set:b),Object.defineProperty(t,e,Qr)}function zt(t){return function(){var e=this._computedWatchers&&this._computedWatchers[t];if(e)return e.dirty&&e.evaluate(),Sr.target&&e.depend(),e.value}}function Ut(t,e){t.$options.props;for(var n in e)t[n]=null==e[n]?b:m(e[n],t)}function Bt(t,e){for(var n in e){var r=e[n];if(Array.isArray(r))for(var o=0;o=0||n.indexOf(t[o])<0)&&r.push(t[o]);return r}return t}function me(t){this._init(t)}function ye(t){t.use=function(t){if(t.installed)return this;var e=y(arguments,1);return e.unshift(this),"function"==typeof t.install?t.install.apply(t,e):"function"==typeof t&&t.apply(null,e),t.installed=!0,this}}function ge(t){t.mixin=function(t){return this.options=V(this.options,t),this}}function _e(t){t.cid=0;var e=1;t.extend=function(t){t=t||{};var n=this,r=n.cid,o=t._Ctor||(t._Ctor={});if(o[r])return o[r];var i=t.name||n.options.name,a=function(t){this._init(t)};return a.prototype=Object.create(n.prototype),a.prototype.constructor=a,a.cid=e++,a.options=V(n.options,t),a.super=n,a.options.props&&be(a),a.options.computed&&xe(a),a.extend=n.extend,a.mixin=n.mixin,a.use=n.use,or.forEach(function(t){a[t]=n[t]}),i&&(a.options.components[i]=a),a.superOptions=n.options,a.extendOptions=t,a.sealedOptions=g({},a.options),o[r]=a,a}}function be(t){var e=t.options.props;for(var n in e)It(t.prototype,"_props",n)}function xe(t){var e=t.options.computed;for(var n in e)Rt(t.prototype,n,e[n])}function Ce(t){or.forEach(function(e){t[e]=function(t,n){return n?("component"===e&&c(n)&&(n.name=n.name||t,n=this.options._base.extend(n)),"directive"===e&&"function"==typeof n&&(n={bind:n,update:n}),this.options[e+"s"][t]=n,n):this.options[e+"s"][t]}})}function ke(t){return t&&(t.Ctor.options.name||t.tag)}function we(t,e){return"string"==typeof t?t.split(",").indexOf(e)>-1:!!l(t)&&t.test(e)}function Ae(t,e,n){for(var r in t){var o=t[r];if(o){var i=ke(o.componentOptions);i&&!n(i)&&(o!==e&&$e(o),t[r]=null)}}}function $e(t){t&&t.componentInstance.$destroy()}function Oe(t){for(var e=t.data,n=t,o=t;r(o.componentInstance);)o=o.componentInstance._vnode,o.data&&(e=Se(o.data,e));for(;r(n=n.parent);)n.data&&(e=Se(e,n.data));return je(e)}function Se(t,e){return{staticClass:Ee(t.staticClass,e.staticClass),class:r(t.class)?[t.class,e.class]:e.class}}function je(t){var e=t.class,n=t.staticClass;return r(n)||r(e)?Ee(n,Te(e)):""}function Ee(t,e){return t?e?t+" "+e:t:e||""}function Te(t){if(n(t))return"";if("string"==typeof t)return t;var e="";if(Array.isArray(t)){for(var o,i=0,a=t.length;i-1?wo[t]=e.constructor===window.HTMLUnknownElement||e.constructor===window.HTMLElement:wo[t]=/HTMLUnknownElement/.test(e.toString())}function De(t){if("string"==typeof t){var e=document.querySelector(t);return e||document.createElement("div")}return t}function Ne(t,e){var n=document.createElement(t);return"select"!==t?n:(e.data&&e.data.attrs&&void 0!==e.data.attrs.multiple&&n.setAttribute("multiple","multiple"),n)}function Me(t,e){return document.createElementNS(bo[t],e)}function Pe(t){return document.createTextNode(t)}function Re(t){return document.createComment(t)}function ze(t,e,n){t.insertBefore(e,n)}function Ue(t,e){t.removeChild(e)}function Be(t,e){t.appendChild(e)}function Fe(t){return t.parentNode}function Ve(t){return t.nextSibling}function He(t){return t.tagName}function qe(t,e){t.textContent=e}function We(t,e,n){t.setAttribute(e,n)}function Je(t,e){var n=t.data.ref;if(n){var r=t.context,o=t.componentInstance||t.elm,i=r.$refs;e?Array.isArray(i[n])?p(i[n],o):i[n]===o&&(i[n]=void 0):t.data.refInFor?Array.isArray(i[n])&&i[n].indexOf(o)<0?i[n].push(o):i[n]=[o]:i[n]=o}}function Ke(t,e){return t.key===e.key&&t.tag===e.tag&&t.isComment===e.isComment&&r(t.data)===r(e.data)&&Ge(t,e)}function Ge(t,e){if("input"!==t.tag)return!0;var n;return(r(n=t.data)&&r(n=n.attrs)&&n.type)===(r(n=e.data)&&r(n=n.attrs)&&n.type)}function Xe(t,e,n){var o,i,a={};for(o=e;o<=n;++o)i=t[o].key,r(i)&&(a[i]=o);return a}function Ze(t,e){(t.data.directives||e.data.directives)&&Qe(t,e)}function Qe(t,e){var n,r,o,i=t===Oo,a=e===Oo,s=Ye(t.data.directives,t.context),c=Ye(e.data.directives,e.context),l=[],u=[];for(n in c)r=s[n],o=c[n],r?(o.oldValue=r.value,en(o,"update",e,t),o.def&&o.def.componentUpdated&&u.push(o)):(en(o,"bind",e,t),o.def&&o.def.inserted&&l.push(o));if(l.length){var f=function(){for(var n=0;n-1?e.split(/\s+/).forEach(function(e){return t.classList.add(e)}):t.classList.add(e);else{var n=" "+(t.getAttribute("class")||"")+" ";n.indexOf(" "+e+" ")<0&&t.setAttribute("class",(n+e).trim())}}function _n(t,e){if(e&&(e=e.trim()))if(t.classList)e.indexOf(" ")>-1?e.split(/\s+/).forEach(function(e){return t.classList.remove(e)}):t.classList.remove(e);else{for(var n=" "+(t.getAttribute("class")||"")+" ",r=" "+e+" ";n.indexOf(r)>=0;)n=n.replace(r," ");t.setAttribute("class",n.trim())}}function bn(t){if(t){if("object"==typeof t){var e={};return!1!==t.css&&g(e,qo(t.name||"v")),g(e,t),e}return"string"==typeof t?qo(t):void 0}}function xn(t){Yo(function(){Yo(t)})}function Cn(t,e){(t._transitionClasses||(t._transitionClasses=[])).push(e),gn(t,e)}function kn(t,e){t._transitionClasses&&p(t._transitionClasses,e),_n(t,e)}function wn(t,e,n){var r=An(t,e),o=r.type,i=r.timeout,a=r.propCount;if(!o)return n();var s=o===Jo?Xo:Qo,c=0,l=function(){t.removeEventListener(s,u),n()},u=function(e){e.target===t&&++c>=a&&l()};setTimeout(function(){c0&&(n=Jo,u=a,f=i.length):e===Ko?l>0&&(n=Ko,u=l,f=c.length):(u=Math.max(a,l),n=u>0?a>l?Jo:Ko:null,f=n?n===Jo?i.length:c.length:0),{type:n,timeout:u,propCount:f,hasTransform:n===Jo&&ti.test(r[Go+"Property"])}}function $n(t,e){for(;t.length1}function In(t,e){!0!==e.data.show&&Sn(e)}function Ln(t,e,n){var r=e.value,o=t.multiple;if(!o||Array.isArray(r)){for(var i,a,s=0,c=t.options.length;s-1,a.selected!==i&&(a.selected=i);else if(x(Nn(a),r))return void(t.selectedIndex!==s&&(t.selectedIndex=s));o||(t.selectedIndex=-1)}}function Dn(t,e){for(var n=0,r=e.length;n0,hr=dr&&dr.indexOf("edge/")>0,mr=dr&&dr.indexOf("android")>0,yr=dr&&/iphone|ipad|ipod|ios/.test(dr),gr=dr&&/chrome\/\d+/.test(dr)&&!hr,_r=!1;if(fr)try{var br={};Object.defineProperty(br,"passive",{get:function(){_r=!0}}),window.addEventListener("test-passive",null,br)}catch(t){}var xr,Cr,kr=function(){return void 0===xr&&(xr=!fr&&void 0!==t&&"server"===t.process.env.VUE_ENV),xr},wr=fr&&window.__VUE_DEVTOOLS_GLOBAL_HOOK__,Ar="undefined"!=typeof Symbol&&S(Symbol)&&"undefined"!=typeof Reflect&&S(Reflect.ownKeys),$r=function(){function t(){r=!1;var t=n.slice(0);n.length=0;for(var e=0;e1?y(n):n;for(var r=y(arguments,1),o=0,i=n.length;o1&&(e[n[0].trim()]=n[1].trim())}}),e}),zo=/^--/,Uo=/\s*!important$/,Bo=function(t,e,n){if(zo.test(e))t.style.setProperty(e,n);else if(Uo.test(n))t.style.setProperty(e,n.replace(Uo,""),"important");else{var r=Vo(e);if(Array.isArray(n))for(var o=0,i=n.length;ov?(f=n(o[y+1])?null:o[y+1].elm,g(t,f,o,p,y,i)):p>y&&b(t,e,d,v)}function k(t,e,i,a){if(t!==e){if(o(e.isStatic)&&o(t.isStatic)&&e.key===t.key&&(o(e.isCloned)||o(e.isOnce)))return e.elm=t.elm,void(e.componentInstance=t.componentInstance);var s,c=e.data;r(c)&&r(s=c.hook)&&r(s=s.prepatch)&&s(t,e);var l=e.elm=t.elm,u=t.children,f=e.children;if(r(c)&&h(e)){for(s=0;s

",selectedRange:"",iconList:[{name:"标签",type:"style",icon:"icon-magic",drop:!0,canChoose:!0,choose:!1},{name:"粗体",type:"bold",icon:"icon-bold",drop:!1,canChoose:!0,choose:!1},{name:"斜体",type:"italic",icon:"icon-italic",drop:!1,canChoose:!0,choose:!1},{name:"下划线",type:"underline",icon:"icon-underline",drop:!1,canChoose:!0,choose:!1},{name:"删除线",type:"strike",icon:"icon-strike",drop:!1,canChoose:!0,choose:!1},{name:"清除样式",type:"clear",icon:"icon-xiangpi",drop:!1,canChoose:!1,choose:!1},{name:"字体颜色",type:"fontFamily",icon:"icon-char",drop:!1,canChoose:!0,choose:!1},{name:"无序列表",type:"unorderedlist",icon:"icon-unorderedlist",drop:!1,canChoose:!0,choose:!1},{name:"有序列表",type:"orderedlist",icon:"icon-orderedlist",drop:!1,canChoose:!0,choose:!1},{name:"对齐方式",type:"alignjustify",icon:"icon-alignjustify",drop:!0,canChoose:!0,choose:!1},{name:"图片",type:"image",icon:"icon-image",drop:!0,canChoose:!1,choose:!1}]}},methods:{iconClick:function(t,e,n){var r=this;t.preventDefault(),this.$refs.editor.focus(),this.restoreSelection(),this.changeStyle(e),this.$nextTick(function(){n&&(e=n);var t=JSON.parse(JSON.stringify(r.iconList));if(t=t.map(function(t,n){return e===t.type&&t.canChoose?t.choose=!t.choose:t.drop&&(t.choose=!1),t}),"clear"===e){var o=r.getSelect();o.startOffset===o.endOffset&&document.execCommand("insertHTML",!1," "),t=t.map(function(t,e){return t.choose=!1,t})}r.iconList=t})},getSelect:function(){if(window.getSelection){var t=window.getSelection();if(t.rangeCount>0)return t.getRangeAt(0)}else if(document.selection)return document.selection.createRange();return null},changeStyle:function(t){switch(t){case"bold":document.execCommand("bold",!1);break;case"underline":document.execCommand("underline",!1);break;case"strike":document.execCommand("strikeThrough",!1);break;case"italic":document.execCommand("italic",!1);break;case"clear":document.execCommand("removeFormat",!1);break;case"unorderedlist":document.execCommand("insertUnorderedList",!1);break;case"orderedlist":document.execCommand("insertorderedList",!1);break;case"h1":case"h2":case"h3":case"h4":case"h5":case"h6":case"p":case"pre":case"blockquote":document.execCommand("formatBlock",!1,t);break;case"justifyCenter":case"justifyFull":case"justifyLeft":case"justifyRight":document.execCommand(t,!1);break;case"image":this.chooseImage();break;default:console.log("none")}},chooseImage:function(){console.log("img")},changeEditor:function(t,e){},restoreSelection:function(){var t=window.getSelection();if(this.selectedRange){try{t.removeAllRanges()}catch(t){document.body.createTextRange().select(),document.selection.empty()}t.addRange(this.selectedRange)}}},components:{Icon:o.a}}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=n(3),o=n(2),i=n.n(o);new r.a({el:"#app",render:function(t){return t(i.a)}})},function(t,e,n){var r=n(14);t.exports=r},function(t,e,n){e=t.exports=n(0)(),e.push([t.i,"\n.vue-editor blockquote {\n padding: 10px 20px;;\n font-size: 17.5px;\n border-left: 5px solid #f86466;\n background: white;\n}\n.vue-editor pre {\n display: block;\n padding: 9.5px;\n font-size: 13px;\n line-height: 1.42857143;\n color: #333;\n word-break: break-all;\n word-wrap: break-word;\n background-color: #f5f5f5;\n border: 1px solid #ccc;\n border-radius: 4px;\n}\n.editor-body blockquote {\n margin-bottom: 30px;\n}\n.editor-body pre {\n margin-bottom: 10px;\n}\n.editor-body ul {\n padding-left: 40px;\n list-style-type: disc;\n}\n.editor-body ol {\n padding-left: 40px;\n}\n",""])},function(t,e,n){e=t.exports=n(0)(),e.push([t.i,"@import url(//at.alicdn.com/t/font_8e1zfc5tlz6ywrk9.css);",""]),e.push([t.i,'\nh1[data-v-0389de4f], h2[data-v-0389de4f], h3[data-v-0389de4f], h4[data-v-0389de4f], h5[data-v-0389de4f], h6[data-v-0389de4f], .h1[data-v-0389de4f], .h2[data-v-0389de4f], .h3[data-v-0389de4f], .h4[data-v-0389de4f], .h5[data-v-0389de4f], .h6[data-v-0389de4f], p[data-v-0389de4f], a[data-v-0389de4f]{\n font-family: inherit;\n font-weight: 500;\n line-height: 1.1;\n color: inherit;\n margin: 0;\n text-decoration: none;\n}\ncode[data-v-0389de4f], kbd[data-v-0389de4f], pre[data-v-0389de4f], samp[data-v-0389de4f] {\n font-family: Menlo, Monaco, Consolas, "Courier New", monospace;\n}\n.vue-editor[data-v-0389de4f] {\n position: relative;\n background-color: #fff;\n border-radius: 4px;\n border: 1px solid #a9a9a9;\n box-shadow: 0 1px 1px rgba(0, 0, 0, .05);\n font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;\n}\n.editor-control[data-v-0389de4f] {\n display: flex;\n flex-flow: row wrap;\n min-height: 40px;\n color: #333;\n border-bottom: 1px solid transparent;\n border-top-left-radius: 3px;\n border-top-right-radius: 3px;\n background-color: #f5f5f5;\n border-color: #ddd;\n}\n.dropmenu[data-v-0389de4f] {\n display: none;\n position: absolute;\n top: 32px;\n left: 0;\n z-index: 1000;\n min-width: 160px;\n padding: 5px 0;\n margin: 2px 0 0;\n font-size: 14px;\n text-align: left;\n list-style: none;\n background-color: #fff;\n background-clip: padding-box;\n border: 1px solid #ccc;\n border: 1px solid rgba(0, 0, 0, .15);\n border-radius: 4px;\n box-shadow: 0 6px 12px rgba(0, 0, 0, .175);\n}\n.dropmenu ul li[data-v-0389de4f] {\n text-align: left;\n list-style: none;\n}\n.dropmenu ul li a[data-v-0389de4f] {\n display: block;\n padding: 5px 10px;\n}\n.drop-align[data-v-0389de4f] {\n min-width: 100px;\n}\n.editor-body[data-v-0389de4f] {\n height: 300px;\n padding: 10px;\n color: #000;\n background-color: #fff;\n overflow: auto;\n outline: none;\n}\n.editor-body p[data-v-0389de4f] {\n font-size: 14px;\n color: #68747f;\n\t\tmargin: 0 0 10px;\n}\n',""])},function(t,e,n){e=t.exports=n(0)(),e.push([t.i,'\n.editor-item[data-v-1847d218] {\n position: relative;\n vertical-align: middle;\n border: 1px solid #ccc;\n cursor: pointer;\n line-height: 20px;\n border-radius: 3px;\n margin: 4px 0 4px 5px;\n background-color: white;\n}\n.editor-item .item-icon[data-v-1847d218] {\n position: relative;\n display: inline-block;\n width: 100%;\n height: 100%;\n padding: 2px 10px;\n font-size: 18px;\n font-weight: normal;\n white-space: nowrap;\n vertical-align: middle;\n touch-action: manipulation;\n cursor: pointer;\n user-select: none;\n background-color: #fff;\n border: 1px solid white;\n outline: none;\n transition: all 0.1s ease-out;\n}\n.editor-item .item-icon[data-v-1847d218]:after {\n position: absolute;\n top: 0;\n content: attr(data-info);\n top: 40px;\n left: 20px;\n padding: 5px 8px;\n border-radius: 4px;\n white-space: nowrap;\n line-height: 1.5;\n font-size: 13px;\n color: #fff;\n background: rgba(0,0,0,.8);\n -webkit-transform: translateX(-50%);\n transform: translateX(-50%);\n visibility: hidden;\n opacity: .9;\n letter-spacing: 1px;\n z-index: 9999;\n}\n.editor-item .item-icon[data-v-1847d218]:before {\n position: absolute;\n content: "";\n top: 35px;\n left: 20px;\n width: 0;\n height: 0;\n margin: 0 0 0 -6px;\n font-size: 0;\n color: rgba(0,0,0,.8);\n border-bottom: 6px solid currentColor;\n border-left: 6px solid transparent;\n border-right: 6px solid transparent;\n visibility: hidden;\n opacity: .9;\n z-index: 9999;\n}\n.item-icon[data-v-1847d218]:hover, .item-icon.activity[data-v-1847d218]{\n color: #333;\n background-color: #e6e6e6;\n border-color: #e6e6e6;\n}\n.editor-item .item-icon[data-v-1847d218]:hover:after, .editor-item .item-icon[data-v-1847d218]:hover:before {\n visibility: visible;\n}\n.item-icon.activity + .dropmenu[data-v-1847d218] {\n display: block;\n}\n',""])},function(t,e,n){e=t.exports=n(0)(),e.push([t.i,"\n.wrapper {\n\t\tmargin: auto;\n\t\tmax-width: 1200px;\n}\n* {\n\t margin:0;\n\t\tpadding: 0;\n}\n.show-editor {\n\t\tmargin: 100px auto;\n\t\tmax-width: 1000px;\n}\np {\n\t\tfont-size: 14px;\n color: #68747f;\n\t\tmargin: 0 0 10px;\n}\n.title {\n\t\tdisplay: block;\n text-decoration: none;\n text-align: center;\n line-height: 1.5;\n margin: 20px 0px;\n background-image: -webkit-linear-gradient(left,#3498db,#f47920 10%,#d71345 20%,#f7acbc 30%,#ffd400 40%,#3498db 50%,#f47920 60%,#d71345 70%,#f7acbc 80%,#ffd400 90%,#3498db);\n color: transparent;\n -webkit-background-clip: text;\n background-size: 200% 100%;\n animation: slide 5s infinite linear;\n font-size: 40px;\n}\n@keyframes slide {\n0% {\n\t\t\tbackground-position: 0 0;\n}\n100% {\n\t\t background-position: -100% 0;\n}\n}\n",""])},function(t,e,n){var r,o;n(20),r=n(5);var i=n(16);o=r=r||{},"object"!=typeof r.default&&"function"!=typeof r.default||(o=r=r.default),"function"==typeof o&&(o=o.options),o.render=i.render,o.staticRenderFns=i.staticRenderFns,o._scopeId="data-v-1847d218",t.exports=r},function(t,e,n){var r,o;n(19),n(18),r=n(6);var i=n(15);o=r=r||{},"object"!=typeof r.default&&"function"!=typeof r.default||(o=r=r.default),"function"==typeof o&&(o=o.options),o.render=i.render,o.staticRenderFns=i.staticRenderFns,o._scopeId="data-v-0389de4f",t.exports=r},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"vue-editor"},[n("div",{staticClass:"editor-control"},t._l(t.iconList,function(e,r){return n("Icon",{key:"item.type",attrs:{name:e.name,type:e.type,icon:e.icon,choose:e.choose},on:{iconClick:t.iconClick}},["style"===e.type?n("div",{staticClass:"dropmenu drop-style"},[n("ul",[n("li",[n("a",{attrs:{href:"#"},on:{click:function(e){t.iconClick(e,"p","style")}}},[n("p",[t._v("正文")])])]),t._v(" "),n("li",[n("a",{attrs:{href:"#"},on:{click:function(e){t.iconClick(e,"pre","style")}}},[n("pre",[t._v("code")])])]),t._v(" "),n("li",[n("a",{attrs:{href:"#"},on:{click:function(e){t.iconClick(e,"blockquote","style")}}},[n("blockquote",[t._v("引用")])],1)]),t._v(" "),n("li",[n("a",{attrs:{href:"#"},on:{click:function(e){t.iconClick(e,"h1","style")}}},[n("h1",[t._v("标题一")])])]),t._v(" "),n("li",[n("a",{attrs:{href:"#"},on:{click:function(e){t.iconClick(e,"h2","style")}}},[n("h2",[t._v("标题二")])])]),t._v(" "),n("li",[n("a",{attrs:{href:"#"},on:{click:function(e){t.iconClick(e,"h3","style")}}},[n("h3",[t._v("标题三 ")])])]),t._v(" "),n("li",[n("a",{attrs:{href:"#"},on:{click:function(e){t.iconClick(e,"h4","style")}}},[n("h4",[t._v("标题四 ")])])]),t._v(" "),n("li",[n("a",{attrs:{href:"#"},on:{click:function(e){t.iconClick(e,"h5","style")}}},[n("h5",[t._v("标题五 ")])])]),t._v(" "),n("li",[n("a",{attrs:{href:"#"},on:{click:function(e){t.iconClick(e,"h6","style")}}},[n("h6",[t._v("标题六")])])])])]):t._e(),t._v(" "),"alignjustify"===e.type?n("div",{staticClass:"dropmenu drop-align"},[n("ul",[n("li",[n("a",{attrs:{href:"#"},on:{click:function(e){t.iconClick(e,"justifyCenter","alignjustify")}}},[n("i",{staticClass:"iconfont icon-aligncenter"}),t._v(" "),n("span",[t._v("居中")])])]),t._v(" "),n("li",[n("a",{attrs:{href:"#"},on:{click:function(e){t.iconClick(e,"justifyLeft","alignjustify")}}},[n("i",{staticClass:"iconfont icon-alignleft"}),t._v(" "),n("span",[t._v("左对齐")])])]),t._v(" "),n("li",[n("a",{attrs:{href:"#"},on:{click:function(e){t.iconClick(e,"justifyRight","alignjustify")}}},[n("i",{staticClass:"iconfont icon-alignright"}),t._v(" "),n("span",[t._v("右对齐")])])]),t._v(" "),n("li",[n("a",{attrs:{href:"#"},on:{click:function(e){t.iconClick(e,"justifyFull","alignjustify")}}},[n("i",{staticClass:"iconfont icon-alignjustify"}),t._v(" "),n("span",[t._v("默认对齐")])])])])]):t._e()])})),t._v(" "),n("div",{ref:"editor",staticClass:"editor-body",attrs:{contenteditable:"true",spellcheck:"false"},domProps:{innerHTML:t._s(t.html)},on:{keyup:function(e){t.changeEditor(e,"mouse")},mouseup:function(e){t.changeEditor(e,"key")}}})])},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"editor-item"},[n("button",{staticClass:"item-icon",class:{activity:t.choose},attrs:{"data-info":t.name,"data-type":t.type},on:{click:function(e){t.iconClick(e,t.type)}}},[t.icon.length>0?n("i",{staticClass:"iconfont",class:t.icon}):t._e()]),t._v(" "),t._t("default")],2)},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"wrapper"},[t._m(0),t._v(" "),n("iframe",{attrs:{src:"https://ghbtns.com/github-btn.html?user=xyxiao001&repo=vue-editor&type=star&count=true&size=large",frameborder:"0",scrolling:"0",width:"160px",height:"30px"}}),t._v(" "),n("div",{staticClass:"show-editor"},[n("vue-editor")],1)],1)},staticRenderFns:[function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("h1",[n("a",{staticClass:"title",attrs:{href:"https://github.com/xyxiao001/vue-editor",target:"_blank"}},[t._v("vue-editor")])])}]}},function(t,e,n){var r=n(9);"string"==typeof r&&(r=[[t.i,r,""]]);n(1)(r,{});r.locals&&(t.exports=r.locals)},function(t,e,n){var r=n(10);"string"==typeof r&&(r=[[t.i,r,""]]);n(1)(r,{});r.locals&&(t.exports=r.locals)},function(t,e,n){var r=n(11);"string"==typeof r&&(r=[[t.i,r,""]]);n(1)(r,{});r.locals&&(t.exports=r.locals)},function(t,e,n){var r=n(12);"string"==typeof r&&(r=[[t.i,r,""]]);n(1)(r,{});r.locals&&(t.exports=r.locals)},function(t,e){var n;n=function(){return this}();try{n=n||Function("return this")()||(0,eval)("this")}catch(t){"object"==typeof window&&(n=window)}t.exports=n}]); -------------------------------------------------------------------------------- /example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | vue-editor 17 | 18 | 19 |
20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-editor-example", 3 | "description": "A Vue.js project", 4 | "author": "goodboy <463618622@qq.com>", 5 | "private": true, 6 | "scripts": { 7 | "dev": "webpack-dev-server --inline --hot", 8 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 9 | }, 10 | "dependencies": { 11 | "vue": "^2.3.3" 12 | }, 13 | "devDependencies": { 14 | "babel-core": "^6.0.0", 15 | "babel-loader": "^6.0.0", 16 | "babel-preset-es2015": "^6.13.2", 17 | "cross-env": "^1.0.6", 18 | "css-loader": "^0.23.1", 19 | "file-loader": "^0.8.4", 20 | "vue-loader": "^9.2.2", 21 | "webpack": "^2.3.2", 22 | "webpack-dev-server": "^2.4.2" 23 | }, 24 | "browserify": { 25 | "transform": [ 26 | "vueify" 27 | ] 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /example/src/App.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 23 | 24 | 69 | -------------------------------------------------------------------------------- /example/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | new Vue({ 5 | el: '#app', 6 | render: h => h(App) 7 | }) 8 | -------------------------------------------------------------------------------- /example/src/vue-editor/icon.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 41 | 42 | 127 | -------------------------------------------------------------------------------- /example/src/vue-editor/index.js: -------------------------------------------------------------------------------- 1 | var vueEditor = require('./vue-editor') 2 | 3 | module.exports = vueEditor 4 | -------------------------------------------------------------------------------- /example/src/vue-editor/vue-editor.vue: -------------------------------------------------------------------------------- 1 | 99 | 100 | 340 | 341 | 427 | 465 | -------------------------------------------------------------------------------- /example/webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var webpack = require('webpack') 3 | 4 | module.exports = { 5 | entry: './src/main.js', 6 | output: { 7 | path: path.resolve(__dirname, './dist'), 8 | publicPath: '/dist/', 9 | filename: 'build.js' 10 | }, 11 | resolve: { 12 | extensions: ['.js', '.vue' ] 13 | }, 14 | module: { 15 | loaders: [ 16 | { 17 | test: /\.vue$/, 18 | loader: 'vue-loader' 19 | }, 20 | { 21 | test: /\.js$/, 22 | loader: 'babel-loader', 23 | exclude: /node_modules/ 24 | }, 25 | { 26 | test: /\.(png|jpg|gif|svg)$/, 27 | loader: 'file-loader', 28 | query: { 29 | name: '[name].[ext]?[hash]' 30 | } 31 | } 32 | ] 33 | }, 34 | devServer: { 35 | historyApiFallback: true, 36 | port: 8888, 37 | noInfo: true 38 | }, 39 | devtool: '#eval-source-map' 40 | } 41 | 42 | if (process.env.NODE_ENV === 'production') { 43 | module.exports.devtool = '#source-map' 44 | // http://vue-loader.vuejs.org/en/workflow/production.html 45 | module.exports.plugins = (module.exports.plugins || []).concat([ 46 | new webpack.DefinePlugin({ 47 | 'process.env': { 48 | NODE_ENV: '"production"' 49 | } 50 | }), 51 | new webpack.optimize.UglifyJsPlugin({ 52 | compress: { 53 | warnings: false 54 | } 55 | }) 56 | ]) 57 | } 58 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-editor-component", 3 | "version": "0.0.1", 4 | "description": "A simple and nice editor", 5 | "keywords": [ 6 | "vue", 7 | "editor", 8 | "vue-editor", 9 | "vue-component", 10 | "vue-editor-component" 11 | ], 12 | "main": "./dist/index.js", 13 | "repository": { 14 | "type": "git", 15 | "url": "git+https://github.com/xyxiao001/vue-editor.git" 16 | }, 17 | "author": "goodboy", 18 | "license": "ISC", 19 | "bugs": { 20 | "url": "https://github.com/xyxiao001/vue-editor/issues" 21 | }, 22 | "homepage": "https://github.com/xyxiao001/vue-editor#readme", 23 | "scripts": { 24 | "build": "rm -rf ./dist && webpack --colors --hide-modules" 25 | }, 26 | "devDependencies": { 27 | "babel-core": "^6.24.0", 28 | "babel-loader": "^6.4.1", 29 | "babel-plugin-transform-runtime": "^6.23.0", 30 | "babel-preset-es2015": "^6.24.0", 31 | "babel-preset-stage-2": "^6.22.0", 32 | "babel-runtime": "^6.23.0", 33 | "css-loader": "^0.23.1", 34 | "style-loader": "^0.15.0", 35 | "vue": "^2.3.3", 36 | "vue-html-loader": "^1.2.4", 37 | "vue-loader": "^11.1.4", 38 | "vue-style-loader": "^2.0.4", 39 | "vue-template-compiler": "^2.2.4", 40 | "webpack": "^2.2.1" 41 | }, 42 | "browserify": { 43 | "transform": [ 44 | "vueify" 45 | ] 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /src/icon.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 41 | 42 | 127 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | var vueEditor = require('./vue-editor') 2 | 3 | module.exports = vueEditor 4 | -------------------------------------------------------------------------------- /src/vue-editor.vue: -------------------------------------------------------------------------------- 1 | 83 | 84 | 290 | 291 | 377 | 415 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack') 2 | const path = require('path') 3 | 4 | module.exports = { 5 | devtool: 'cheap-module-source-map', 6 | entry: './src/index.js', 7 | output: { 8 | path: path.resolve(__dirname, './dist/'), 9 | filename: 'index.js', 10 | library: 'vue-cropper', 11 | libraryTarget: 'umd', 12 | umdNamedDefine: true 13 | }, 14 | resolve: { 15 | extensions: ['.js', '.vue'] 16 | }, 17 | module: { 18 | loaders: [ 19 | { 20 | test: /\.js$/, 21 | loader: 'babel-loader', 22 | include: __dirname, 23 | exclude: /node_modules/ 24 | }, 25 | { 26 | test: /\.vue$/, 27 | loader: 'vue-loader', 28 | include: __dirname, 29 | exclude: /node_modules/ 30 | } 31 | ] 32 | }, 33 | plugins: [ 34 | new webpack.LoaderOptionsPlugin({ 35 | minimize: true 36 | }), 37 | new webpack.optimize.UglifyJsPlugin({ 38 | beautify: false, 39 | comments: false, 40 | compress: { 41 | warnings: false 42 | } 43 | }) 44 | ] 45 | } 46 | --------------------------------------------------------------------------------