vue-rich-text-editor
Version:
Rich text editor made with vue
1 lines • 13.9 kB
JavaScript
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("vueRichTextEditor",[],t):"object"==typeof exports?exports.vueRichTextEditor=t():e.vueRichTextEditor=t()}("undefined"!=typeof self?self:this,function(){return function(e){function t(o){if(n[o])return n[o].exports;var r=n[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,t),r.l=!0,r.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,o){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:o})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="/dist/",t(t.s=1)}([function(e,t,n){"use strict";var o=n(9);t.a={name:"vueRichTextEditor",data:function(){return{show:{A:!1},config:{A:{link:"",value:""}},content:null,toolbar:null,timeId:"",sel:null,range:null,nodes:[]}},props:{height:{type:String,default:"400px"},canEdit:{type:Boolean,default:!0},timelyGetHtml:{type:Boolean,default:!1}},watch:{show:{handler:function(e,t){e.A||(this.config.A.link="",this.config.A.value="")},deep:!0}},created:function(){this.timeId=(new Date).valueOf()},mounted:function(){this.__init()},methods:{appendHtml:function(e){this.range=null,this.insertHtml(e)},setHtml:function(e){var t=this;t.content.innerHTML=e,t.timelyGetHtml&&t.$emit("htmlChange",t.content.innerHTML)},getHtml:function(){return this.content.innerHTML},__replaceNode:function(e,t){var n=document.createElement("div");n.innerHTML=t,e.parentNode.replaceChild(n.firstChild,e)},insertHtml:function(e){var t=this;if(1===t.nodes.length)return void t.__replaceNode(t.nodes[0],e);if(t.canEdit){var n=t.content;if(!t.sel||!t.range)return void(n.innerHTML=n.innerHTML+e);var o=t.sel,r=t.range;if(window.getSelection){if(o.getRangeAt&&o.rangeCount){r.deleteContents();var i=document.createElement("div");i.innerHTML=e;for(var a=document.createDocumentFragment(),c=void 0,s=void 0;c=i.firstChild;)s=a.appendChild(c);r.insertNode(a),s&&(r=r.cloneRange(),r.setStartAfter(s),r.collapse(!0),o.removeAllRanges(),o.addRange(r))}}else document.selection&&"Control"!==document.selection.type&&document.selection.createRange().pasteHTML(e);t.__getSelAndRange(),t.timelyGetHtml&&t.$emit("htmlChange",t.content.innerHTML)}},__getNodes:function(){var e=this,t=e.sel;e.nodes=[];for(var n=!1,o=0;o<e.content.childNodes.length;o++){var r=e.content.childNodes[o];(r.isSameNode(t.getRangeAt(0).startContainer.parentNode)||r.isSameNode(t.anchorNode))&&(n=!0),n&&e.nodes.push(r),(r.isSameNode(t.getRangeAt(0).endContainer.parentNode)||r.isSameNode(t.focusNode))&&(n=!1)}},__formatH:function(e){var t=this,n=t.range.cloneContents(),o=document.createElement(e);o.appendChild(n);var r=o.innerHTML;1===t.nodes.length&&(r=t.nodes[0].innerHTML),r=r.replace(/<h1>/g,""),r=r.replace(/<\/h1>/g,"<br>"),r=r.replace(/<h2>/g,""),r=r.replace(/<\/h2>/g,"<br>"),r=r.replace(/<h3>/g,""),r=r.replace(/<\/h3>/g,"<br>"),r=r.replace(/<h4>/g,""),r=r.replace(/<\/h4>/g,"<br>"),r=r.replace(/<h5>/g,""),r=r.replace(/<\/h5>/g,"<br>"),r=r.replace(/<p><\/p>/g,""),r=r.replace(/<p><br><\/p>/g,""),r=r.replace(/<br><br>/g,""),r=r.replace(/<([a-z]+?)(?:\s+?[^>]*?)?>\s*?<\/\1>/gi,""),o.innerHTML=r,1===t.nodes.length?t.nodes[0].parentNode.replaceChild(o,t.nodes[0]):(t.range.deleteContents(),t.range.insertNode(o)),o=null,n=null},formatNodes:function(e){var t=this;if(t.__getSelAndRange(),t.range){var n=t.range.cloneContents(),o=document.createElement(e);if(o.appendChild(n),t.__getNodes(),"H1,H2,H3,H4,H5,P".indexOf(e)>-1)return void t.__formatH(e);if(1===o.children.length&&o.children[0].tagName===o.tagName){var r=document.createElement("span"),i=o.innerHTML,a="<"+e.toLowerCase()+">";a=new RegExp(a,"g");var c="</"+e.toLowerCase()+">";return c=new RegExp(c,"g"),i=i.replace(a,""),i=i.replace(c,""),i=i.replace(/<span>/g,""),i=i.replace(/<\/span>/g,""),r.innerHTML=i,t.range.deleteContents(),t.range.insertNode(r),o=null,void(n=null)}t.range.deleteContents(),t.range.insertNode(o),o=null,n=null}},__getSelAndRange:function(){this.sel=window.getSelection();try{this.range=this.sel.getRangeAt(0)}catch(e){this.range=null}},__configTarget:function(e){switch(e.tagName){case"A":this.config.A={link:e.href,value:e.innerText},this.show.A=!0}},__init:function(){var e=this;e.toolbar=document.getElementById("toolbar"+e.timeId),e.content=document.getElementById("content"+e.timeId),o.a.addHandler(e.content,"mouseup",function(t){e.__getSelAndRange(),e.__getNodes()}),o.a.addHandler(e.content,"click",function(t){e.show.A&&(e.show.A=!1),"A,IMG".indexOf((t.target||t.srcElement).tagName)>-1&&e.__configTarget(t.target||t.srcElement)}),o.a.addHandler(e.content,"input",function(){e.__getSelAndRange(),e.timelyGetHtml&&e.$emit("htmlChange",e.content.innerHTML)})}}}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=n(2),r={install:function(e,t){e.component("vueRichTextEditor",o.a)}};"undefined"!=typeof window&&window.Vue&&window.Vue.use(o.a),t.default=r},function(e,t,n){"use strict";function o(e){n(3)}var r=n(0),i=n(10),a=n(8),c=o,s=a(r.a,i.a,!1,c,null,null);t.a=s.exports},function(e,t,n){var o=n(4);"string"==typeof o&&(o=[[e.i,o,""]]),o.locals&&(e.exports=o.locals);n(6)("70e45988",o,!0,{})},function(e,t,n){t=e.exports=n(5)(!1),t.push([e.i,".vre_vueRichEditor{border:1px solid #ccc;position:relative}.vre_vueRichEditor *{padding:0;margin:0}.vre_toolbar{height:23px;background-color:#dce8e8;color:#555;border-bottom:1px solid #ccc}.vre_toolbar input{width:100%;height:22px;outline:none}.vre_toolbar button{width:100%;font-size:12px;background-color:#fff;border:1px solid #ccc;padding:5px 0;cursor:pointer;outline:none}.vre_buttonDiv{position:relative;user-select:none;cursor:pointer;display:inline-block;font-size:14px;height:16px;line-height:16px;text-align:center;width:16px;padding:5px;float:left}.vre_buttonDiv:hover span{font-weight:700}.vre_content{width:100%;top:24px;bottom:0;background-color:#fff;position:absolute;overflow:auto;outline:none}.vre_content ol,.vre_content ul{margin-left:20px}.vre_clickDiv,.vre_hoverDiv{display:none;position:absolute;z-index:20;background-color:#fff;text-align:center;left:0;border:1px solid #ccc;width:60px;padding:5px 0}.vre_clickDiv:hover,.vre_hoverDiv:hover{font-weight:400}.vre_clickDiv p,.vre_hoverDiv p{padding:5px 20px}.vre_clickDiv p:hover,.vre_hoverDiv p:hover{font-weight:700}.vre_clickDiv{display:block;box-shadow:0 0 5px rgba(0,0,0,.2)}.vre_clickDiv p:hover{font-weight:400}.vre_hover:hover .vre_hoverDiv{display:block}.resizeBar{height:2px;background-color:#dce8e8;position:absolute;bottom:-2px;width:100%;cursor:n-resize}",""])},function(e,t){function n(e,t){var n=e[1]||"",r=e[3];if(!r)return n;if(t&&"function"==typeof btoa){var i=o(r);return[n].concat(r.sources.map(function(e){return"/*# sourceURL="+r.sourceRoot+e+" */"})).concat([i]).join("\n")}return[n].join("\n")}function o(e){return"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e))))+" */"}e.exports=function(e){var t=[];return t.toString=function(){return this.map(function(t){var o=n(t,e);return t[2]?"@media "+t[2]+"{"+o+"}":o}).join("")},t.i=function(e,n){"string"==typeof e&&(e=[[null,e,""]]);for(var o={},r=0;r<this.length;r++){var i=this[r][0];"number"==typeof i&&(o[i]=!0)}for(r=0;r<e.length;r++){var a=e[r];"number"==typeof a[0]&&o[a[0]]||(n&&!a[2]?a[2]=n:n&&(a[2]="("+a[2]+") and ("+n+")"),t.push(a))}},t}},function(e,t,n){function o(e){for(var t=0;t<e.length;t++){var n=e[t],o=d[n.id];if(o){o.refs++;for(var r=0;r<o.parts.length;r++)o.parts[r](n.parts[r]);for(;r<n.parts.length;r++)o.parts.push(i(n.parts[r]));o.parts.length>n.parts.length&&(o.parts.length=n.parts.length)}else{for(var a=[],r=0;r<n.parts.length;r++)a.push(i(n.parts[r]));d[n.id]={id:n.id,refs:1,parts:a}}}}function r(){var e=document.createElement("style");return e.type="text/css",u.appendChild(e),e}function i(e){var t,n,o=document.querySelector("style["+m+'~="'+e.id+'"]');if(o){if(f)return h;o.parentNode.removeChild(o)}if(_){var i=p++;o=v||(v=r()),t=a.bind(null,o,i,!1),n=a.bind(null,o,i,!0)}else o=r(),t=c.bind(null,o),n=function(){o.parentNode.removeChild(o)};return t(e),function(o){if(o){if(o.css===e.css&&o.media===e.media&&o.sourceMap===e.sourceMap)return;t(e=o)}else n()}}function a(e,t,n,o){var r=n?"":o.css;if(e.styleSheet)e.styleSheet.cssText=b(t,r);else{var i=document.createTextNode(r),a=e.childNodes;a[t]&&e.removeChild(a[t]),a.length?e.insertBefore(i,a[t]):e.appendChild(i)}}function c(e,t){var n=t.css,o=t.media,r=t.sourceMap;if(o&&e.setAttribute("media",o),g.ssrId&&e.setAttribute(m,t.id),r&&(n+="\n/*# sourceURL="+r.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(r))))+" */"),e.styleSheet)e.styleSheet.cssText=n;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(n))}}var s="undefined"!=typeof document;if("undefined"!=typeof DEBUG&&DEBUG&&!s)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var l=n(7),d={},u=s&&(document.head||document.getElementsByTagName("head")[0]),v=null,p=0,f=!1,h=function(){},g=null,m="data-vue-ssr-id",_="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());e.exports=function(e,t,n,r){f=n,g=r||{};var i=l(e,t);return o(i),function(t){for(var n=[],r=0;r<i.length;r++){var a=i[r],c=d[a.id];c.refs--,n.push(c)}t?(i=l(e,t),o(i)):i=[];for(var r=0;r<n.length;r++){var c=n[r];if(0===c.refs){for(var s=0;s<c.parts.length;s++)c.parts[s]();delete d[c.id]}}}};var b=function(){var e=[];return function(t,n){return e[t]=n,e.filter(Boolean).join("\n")}}()},function(e,t){e.exports=function(e,t){for(var n=[],o={},r=0;r<t.length;r++){var i=t[r],a=i[0],c=i[1],s=i[2],l=i[3],d={id:e+":"+r,css:c,media:s,sourceMap:l};o[a]?o[a].parts.push(d):n.push(o[a]={id:a,parts:[d]})}return n}},function(e,t){e.exports=function(e,t,n,o,r,i){var a,c=e=e||{},s=typeof e.default;"object"!==s&&"function"!==s||(a=e,c=e.default);var l="function"==typeof c?c.options:c;t&&(l.render=t.render,l.staticRenderFns=t.staticRenderFns,l._compiled=!0),n&&(l.functional=!0),r&&(l._scopeId=r);var d;if(i?(d=function(e){e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,e||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),o&&o.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(i)},l._ssrRegister=d):o&&(d=o),d){var u=l.functional,v=u?l.render:l.beforeCreate;u?(l._injectStyles=d,l.render=function(e,t){return d.call(t),v(e,t)}):l.beforeCreate=v?[].concat(v,d):[d]}return{esModule:a,exports:c,options:l}}},function(e,t,n){"use strict";function o(e,t,n){e.addEventListener?e.addEventListener(t,n,!1):e.attachEvent?e.attachEvent("on"+t,n):e["on"+t]=n}function r(e,t,n){e.removeEventListener?e.removeEventListener(t,n,!1):e.detachEvent?e.detachEvent("on"+t,n):e["on"+t]=null}function i(e){e.preventDefault?e.preventDefault():e.returnValue=!1}function a(e){e.stopPropagation?e.stopPropagation():evenvt.cancelBubble=!0}t.a={addHandler:o,removeHandler:r,preventDefault:i,stoppropagation:a}},function(e,t,n){"use strict";var o=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"vre_vueRichEditor",style:{height:e.height},attrs:{id:"vueRichEditor"+e.timeId}},[n("div",{staticClass:"vre_toolbar",attrs:{id:"toolbar"+e.timeId}},[n("div",{staticClass:"vre_buttonDiv vre_hover"},[n("span",[e._v("H")]),e._v(" "),n("div",{staticClass:"vre_hoverDiv"},[n("p",{on:{click:function(t){return e.formatNodes("H1")}}},[e._v("H1")]),e._v(" "),n("p",{on:{click:function(t){return e.formatNodes("H2")}}},[e._v("H2")]),e._v(" "),n("p",{on:{click:function(t){return e.formatNodes("H3")}}},[e._v("H3")]),e._v(" "),n("p",{on:{click:function(t){return e.formatNodes("H4")}}},[e._v("H4")]),e._v(" "),n("p",{on:{click:function(t){return e.formatNodes("H5")}}},[e._v("H5")]),e._v(" "),n("p",{on:{click:function(t){return e.formatNodes("P")}}},[e._v("p")])])]),e._v(" "),n("div",{staticClass:"vre_buttonDiv",on:{click:function(t){return e.formatNodes("STRONG")}}},[n("span",[e._v("B")])]),e._v(" "),n("div",{staticClass:"vre_buttonDiv",on:{click:function(t){return e.formatNodes("U")}}},[n("span",[e._v("U")])]),e._v(" "),n("div",{staticClass:"vre_buttonDiv",on:{click:function(t){return e.formatNodes("I")}}},[n("span",[e._v("I")])]),e._v(" "),n("div",{staticClass:"vre_buttonDiv"},[n("span",{on:{click:function(t){e.show.A=!0}}},[e._v("A")]),e._v(" "),n("div",{directives:[{name:"show",rawName:"v-show",value:e.show.A,expression:"show.A"}],staticClass:"vre_clickDiv",staticStyle:{width:"215px"}},[n("p",{staticStyle:{"text-align":"left"}},[e._v("\n link\n "),n("br"),e._v(" "),n("input",{directives:[{name:"model",rawName:"v-model",value:e.config.A.link,expression:"config.A.link"}],attrs:{type:"text"},domProps:{value:e.config.A.link},on:{input:function(t){t.target.composing||e.$set(e.config.A,"link",t.target.value)}}})]),e._v(" "),n("p",{staticStyle:{"text-align":"left"}},[e._v("\n value\n "),n("br"),e._v(" "),n("input",{directives:[{name:"model",rawName:"v-model",value:e.config.A.value,expression:"config.A.value"}],attrs:{type:"text"},domProps:{value:e.config.A.value},on:{input:function(t){t.target.composing||e.$set(e.config.A,"value",t.target.value)}}})]),e._v(" "),n("p",[n("button",{on:{click:function(t){e.insertHtml('<a href="'+e.config.A.link+'">'+e.config.A.value+"</a>"),e.show.A=!1}}},[e._v("confirm")])])])])]),e._v(" "),n("div",{staticClass:"vre_content vre_preview",attrs:{id:"content"+e.timeId,contenteditable:e.canEdit}})])},r=[],i={render:o,staticRenderFns:r};t.a=i}])});