{"version":3,"sources":["webpack:///./src/views/Editor.vue?6218","webpack:///src/views/Editor.vue","webpack:///./src/views/Editor.vue?906f","webpack:///./src/views/Editor.vue","webpack:///./src/views/Editor.vue?b25e"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","on","dragOver","drop","$event","fold","_v","_s","attrs","init","model","value","callback","$$v","expression","class","_l","dic","dicIdx","key","addToEditor","e","startDrag","staticRenderFns","name","components","data","curDicText","curBookmark","selector","placeholder","height","language_url","language","skin_url","plugins","toolbar","setup","editor","console","log","dics","mounted","methods","text","preventDefault","component"],"mappings":"yHAAA,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACE,YAAY,eAAe,CAACF,EAAG,MAAM,CAACE,YAAY,SAASC,GAAG,CAAC,SAAWP,EAAIQ,SAAS,KAAOR,EAAIS,OAAO,CAACL,EAAG,MAAM,CAACE,YAAY,UAAUC,GAAG,CAAC,MAAQ,SAASG,GAAQV,EAAIW,MAAMX,EAAIW,QAAQ,CAACX,EAAIY,GAAGZ,EAAIa,GAAGb,EAAIW,KAAK,KAAK,SAASP,EAAG,SAAS,CAACU,MAAM,CAAC,GAAK,UAAU,KAAOd,EAAIe,MAAMC,MAAM,CAACC,MAAOjB,EAAS,MAAEkB,SAAS,SAAUC,GAAMnB,EAAIiB,MAAME,GAAKC,WAAW,YAAY,GAAGhB,EAAG,MAAM,CAACE,YAAY,OAAOe,MAAM,CAACV,KAAKX,EAAIW,OAAOX,EAAIsB,GAAItB,EAAQ,MAAE,SAASuB,EAAIC,GAAQ,OAAOpB,EAAG,MAAM,CAACqB,IAAID,EAAOlB,YAAY,MAAMQ,MAAM,CAAC,UAAY,QAAQP,GAAG,CAAC,SAAW,WAAYP,EAAI0B,YAAYH,EAAIN,QAAQ,UAAY,SAAUU,GAAG3B,EAAI4B,UAAUD,EAAGJ,EAAIN,UAAU,CAACjB,EAAIY,GAAG,IAAIZ,EAAIa,GAAGU,EAAIE,KAAK,KAAKzB,EAAIa,GAAGU,EAAIN,OAAO,UAAS,MACvyBY,EAAkB,G,iCC6BtB,G,4DAAA,CACEC,KAAM,cACNC,WAAY,CAAd,eACEC,KAHF,WAGA,WACI,MAAO,CACLf,MAAO,KACPgB,WAAY,KACZC,YAAa,KACbnB,KAAM,CACJoB,SAAU,WACVC,YAAa,OACbC,OAAQ,OACRC,aAAc,oBACdC,SAAU,QACVC,SAAU,0BACVC,QAAS,6BACTC,QAAS,sWACTC,MAAO,SAAf,GACUC,EAAOrC,GAAG,QAAQ,SAA5B,GACYsC,QAAQC,IAAI,8BAA+BnB,MAE7CiB,EAAOrC,GAAG,QAAQ,SAA5B,GACY,EAAZ,WAEUqC,EAAOrC,GAAG,YAAY,SAAhC,GACY,EAAZ,iBAIMI,MAAM,EACNoC,KAAM,CACZ,CACQ,IAAR,QACQ,MAAR,qBAEA,CACQ,IAAR,WACQ,MAAR,cAEA,CACQ,IAAR,WACQ,MAAR,iBAKEC,QA9CF,WA+CI,EAAJ,YAKEC,QAAS,CACPrB,UADJ,SACA,KACMiB,QAAQC,IAAInB,EAAGuB,GACfjD,KAAKiC,YAAc,EAAzB,uCACMW,QAAQC,IAAI7C,KAAKiC,aACjBjC,KAAKgC,WAAaiB,GAEpB1C,SAPJ,SAOA,GACMmB,EAAEwB,kBAEJ1C,KAVJ,SAUA,GACMkB,EAAEwB,iBACFlD,KAAKyB,YAAYzB,KAAKgC,YACtBhC,KAAKgC,WAAa,MAEpBP,YAfJ,SAeA,GACM,EAAN,uBACUzB,KAAKiC,cACPW,QAAQC,IAAI7C,KAAKiC,aACjB,EAAR,2DAEM,EAAN,2CCvGgV,I,wBCQ5UkB,EAAY,eACd,EACArD,EACA8B,GACA,EACA,KACA,WACA,MAIa,aAAAuB,E,oECnBf,yBAAuiB,EAAG","file":"static/js/chunk-17d949c6.142287f2.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"html-editor\"},[_c('div',{staticClass:\"editor\",on:{\"dragover\":_vm.dragOver,\"drop\":_vm.drop}},[_c('div',{staticClass:\"trigger\",on:{\"click\":function($event){_vm.fold=!_vm.fold}}},[_vm._v(_vm._s(_vm.fold?'展开':'收起'))]),_c('editor',{attrs:{\"id\":\"tinymce\",\"init\":_vm.init},model:{value:(_vm.value),callback:function ($$v) {_vm.value=$$v},expression:\"value\"}})],1),_c('div',{staticClass:\"dics\",class:{fold:_vm.fold}},_vm._l((_vm.dics),function(dic,dicIdx){return _c('div',{key:dicIdx,staticClass:\"dic\",attrs:{\"draggable\":\"true\"},on:{\"dblclick\":function (){_vm.addToEditor(dic.value)},\"dragstart\":function (e){_vm.startDrag(e, dic.value)}}},[_vm._v(\" \"+_vm._s(dic.key)+\": \"+_vm._s(dic.value)+\" \")])}),0)])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n  <div class=\"html-editor\">\r\n    <div class=\"editor\" @dragover=\"dragOver\" @drop=\"drop\">\r\n      <div class=\"trigger\" @click=\"fold=!fold\">{{fold?'展开':'收起'}}</div>\r\n      <editor id=\"tinymce\" v-model=\"value\" :init=\"init\"></editor>\r\n    </div>\r\n    <div class=\"dics\" :class=\"{fold:fold}\">\r\n      <div class=\"dic\"\r\n        v-for=\"(dic,dicIdx) in dics\"\r\n        :key=\"dicIdx\"\r\n        draggable=\"true\"\r\n        @dblclick=\"()=>{addToEditor(dic.value)}\"\r\n        @dragstart=\"(e)=>{startDrag(e, dic.value)}\">\r\n        {{dic.key}}: {{dic.value}}\r\n      </div>\r\n    </div>\r\n    \r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport tinymce from 'tinymce'\r\nimport Editor from '@tinymce/tinymce-vue'\r\nimport 'tinymce/icons/default/icons.min.js'\r\nimport 'tinymce/themes/silver/theme'\r\nimport 'tinymce/plugins/code'\r\nimport 'tinymce/plugins/table'\r\nimport 'tinymce/plugins/lists'\r\nimport 'tinymce/plugins/wordcount'\r\n\r\nexport default {\r\n  name: 'html-editor',\r\n  components: {Editor},\r\n  data () {\r\n    return {\r\n      value: null,\r\n      curDicText: null,\r\n      curBookmark: null,\r\n      init: {\r\n        selector: '#tinymce', // tinymce的id\r\n        placeholder: '绘制表格',\r\n        height: '100%',\r\n        language_url: '/tinymce/zh_CN.js',\r\n        language: 'zh_CN',\r\n        skin_url: '/tinymce/skins/ui/oxide', // 编辑器需要一个skin才能正常工作，所以要设置一个skin_url指向之前复制出来的skin文件\r\n        plugins: 'code table lists wordcount', // 引入插件\r\n        toolbar: 'table tabledelete | tableprops tablerowprops tablecellprops | tableinsertrowbefore tableinsertrowafter tabledeleterow | tableinsertcolbefore tableinsertcolafter tabledeletecol | fontselect fontsizeselect lineheight forecolor backcolor bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | numlist bullist preview fullscreen', // 工具栏\r\n        setup: (editor) => {\r\n          editor.on('init', (e) => {\r\n            console.log('The Editor has initialized.', e)\r\n          })\r\n          editor.on('drop', (e) => {\r\n            this.drop(e)\r\n          })\r\n          editor.on('dragover', (e) => {\r\n            this.dragOver(e)\r\n          })\r\n        }\r\n      },\r\n      fold: false,\r\n      dics: [\r\n        {\r\n          key: '保证人名称',\r\n          value: '$$GUARANTORNAME$$'\r\n        },\r\n        {\r\n          key: '保证金额(大写)',\r\n          value: '$$AMOUNT$$'\r\n        },\r\n        {\r\n          key: '保证金额(小写)',\r\n          value: '$$amount$$'\r\n        }\r\n      ]\r\n    }\r\n  },\r\n  mounted () {\r\n    tinymce.init({})\r\n    // setTimeout(() => {\r\n    //   this.addToEditor('$$guarantorname$$')\r\n    // }, 15000)\r\n  },\r\n  methods: {\r\n    startDrag (e, text) {\r\n      console.log(e, text)\r\n      this.curBookmark = tinymce.activeEditor.selection.getBookmark()\r\n      console.log(this.curBookmark)\r\n      this.curDicText = text\r\n    },\r\n    dragOver (e) {\r\n      e.preventDefault()\r\n    },\r\n    drop (e) {\r\n      e.preventDefault()\r\n      this.addToEditor(this.curDicText)\r\n      this.curDicText = null\r\n    },\r\n    addToEditor (text) {\r\n      tinymce.activeEditor.focus()\r\n      if (this.curBookmark) {\r\n        console.log(this.curBookmark)\r\n        tinymce.activeEditor.selection.moveToBookmark(this.curBookmark)\r\n      }\r\n      tinymce.execCommand('mceInsertContent', false, text)\r\n    }\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"less\" scoped>\r\n.html-editor {\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  display: flex;\r\n  flex-direction: row;\r\n  padding: 8px;\r\n  .editor {\r\n    flex: 1;\r\n    position: relative;\r\n    .trigger {\r\n      position: absolute;\r\n      top: 5px;\r\n      right: -5px;\r\n      width: 26px;\r\n      color: #efefef;\r\n      background: #999;\r\n      border: 1px solid #e2e2e2;\r\n      border-radius: 5px 0 0 5px;\r\n      padding: 5px;\r\n      z-index: 100;\r\n      transition: all .2s linear;\r\n      cursor: pointer;\r\n      &:hover {\r\n        color: #fff;\r\n        background: #aaa;\r\n        border: 1px solid #e2e2e2;\r\n      }\r\n    }\r\n  }\r\n  .dics {\r\n    width: 240px;\r\n    border: 1px solid #e2e2e2;\r\n    background: #f2f2f2;\r\n    padding: 16px;\r\n    margin-left: 5px;\r\n    overflow-x: hidden;\r\n    overflow-y: auto;\r\n    position: relative;\r\n    transition: width .2s ease-in-out;\r\n    .dic {\r\n      padding: 5px 0;\r\n      color: #777;\r\n      cursor: pointer;\r\n      &:hover {\r\n        color: #444;\r\n      }\r\n    }\r\n    &.fold {\r\n      width: 0;\r\n      padding: 16px 0;\r\n    }\r\n  }\r\n}\r\n</style>","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Editor.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Editor.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./Editor.vue?vue&type=template&id=530f4bce&scoped=true&\"\nimport script from \"./Editor.vue?vue&type=script&lang=js&\"\nexport * from \"./Editor.vue?vue&type=script&lang=js&\"\nimport style0 from \"./Editor.vue?vue&type=style&index=0&id=530f4bce&lang=less&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"530f4bce\",\n  null\n  \n)\n\nexport default component.exports","import mod from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--10-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--10-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--10-oneOf-1-2!../../node_modules/less-loader/dist/cjs.js??ref--10-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Editor.vue?vue&type=style&index=0&id=530f4bce&lang=less&scoped=true&\"; export default mod; export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--10-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--10-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--10-oneOf-1-2!../../node_modules/less-loader/dist/cjs.js??ref--10-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Editor.vue?vue&type=style&index=0&id=530f4bce&lang=less&scoped=true&\""],"sourceRoot":""}