打印富文本

package.json

@@ -57,6 +57,7 @@
     "js-beautify": "1.13.0",
     "js-cookie": "^3.0.1",
     "jsencrypt": "3.0.0-rc.1",
+    "kindeditor": "^4.1.10",
     "moment": "^2.30.1",
     "nprogress": "0.2.0",
     "path-to-regexp": "^7.0.0",

src/components/editorr/index.vue

@@ -0,0 +1,366 @@
+<template>
+  <div class="kindeditor">
+    <textarea :id="id" name="content" v-model="outContent"></textarea>
+  </div>
+</template>
+ 
+<script>
+
+import '../../../node_modules/kindeditor/kindeditor-all.js'
+import '../../../node_modules/kindeditor/lang/zh-CN.js'
+import '../../../node_modules/kindeditor/themes/default/default.css'
+ 
+export default {
+  name: 'kindeditor',
+  data () {
+    return {
+      editor: null,
+      outContent: this.content
+    }
+  },
+  props: {
+    content: {
+      type: String,
+      default: ''
+    },
+    id: {
+      type: String,
+      required: true
+    },
+    width: {
+      type: String
+    },
+    height: {
+      type: String
+    },
+    minWidth: {
+      type: Number,
+      default: 650
+    },
+    minHeight: {
+      type: Number,
+      default: 100
+    },
+    items: {
+      type: Array,
+      default: function () {
+        return [
+          'undo', 'redo', '|', 'preview', 'print', 'cut', 'copy', 'paste',
+          'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
+          'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
+          'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
+          'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
+          'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat'
+        ]
+      }
+    },
+    noDisableItems: {
+      type: Array,
+      default: function () {
+        return ['source', 'fullscreen']
+      }
+    },
+    filterMode: {
+      type: Boolean,
+      default: true
+    },
+    htmlTags: {
+      type: Object,
+      default: function () {
+        return {
+          font: ['color', 'size', 'face', '.background-color'],
+          span: ['style'],
+          div: ['class', 'align', 'style'],
+          table: ['class', 'border', 'cellspacing', 'cellpadding', 'width', 'height', 'align', 'style'],
+          'td,th': ['class', 'align', 'valign', 'width', 'height', 'colspan', 'rowspan', 'bgcolor', 'style'],
+          a: ['class', 'href', 'target', 'name', 'style'],
+          embed: ['src', 'width', 'height', 'type', 'loop', 'autostart', 'quality',
+            'style', 'align', 'allowscriptaccess', '/'],
+          img: ['src', 'width', 'height', 'border', 'alt', 'title', 'align', 'style', '/'],
+          hr: ['class', '/'],
+          br: ['/'],
+          'p,ol,ul,li,blockquote,h1,h2,h3,h4,h5,h6': ['align', 'style'],
+          'tbody,tr,strong,b,sub,sup,em,i,u,strike': []
+        }
+      }
+    },
+    wellFormatMode: {
+      type: Boolean,
+      default: true
+    },
+    resizeType: {
+      type: Number,
+      default: 2
+    },
+    themeType: {
+      type: String,
+      default: 'default'
+    },
+    langType: {
+      type: String,
+      default: 'zh-CN'
+    },
+    designMode: {
+      type: Boolean,
+      default: true
+    },
+    fullscreenMode: {
+      type: Boolean,
+      default: false
+    },
+    basePath: {
+      type: String
+    },
+    themesPath: {
+      type: String
+    },
+    pluginsPath: {
+      type: String,
+      default: ''
+    },
+    langPath: {
+      type: String
+    },
+    minChangeSize: {
+      type: Number,
+      default: 5
+    },
+    loadStyleMode: {
+      type: Boolean,
+      default: true
+    },
+    urlType: {
+      type: String,
+      default: ''
+    },
+    newlineTag: {
+      type: String,
+      default: 'p'
+    },
+    pasteType: {
+      type: Number,
+      default: 2
+    },
+    dialogAlignType: {
+      type: String,
+      default: 'page'
+    },
+    shadowMode: {
+      type: Boolean,
+      default: true
+    },
+    zIndex: {
+      type: Number,
+      default: 811213
+    },
+    useContextmenu: {
+      type: Boolean,
+      default: true
+    },
+    syncType: {
+      type: String,
+      default: 'form'
+    },
+    indentChar: {
+      type: String,
+      default: '\t'
+    },
+    cssPath: {
+      type: [ String, Array ]
+    },
+    cssData: {
+      type: String
+    },
+    bodyClass: {
+      type: String,
+      default: 'ke-content'
+    },
+    colorTable: {
+      type: Array
+    },
+    afterCreate: {
+      type: Function
+    },
+    afterChange: {
+      type: Function
+    },
+    afterTab: {
+      type: Function
+    },
+    afterFocus: {
+      type: Function
+    },
+    afterBlur: {
+      type: Function
+    },
+    afterUpload: {
+      type: Function
+    },
+    uploadJson: {
+      type: String
+    },
+    fileManagerJson: {
+      type: Function
+    },
+    allowPreviewEmoticons: {
+      type: Boolean,
+      default: true
+    },
+    allowImageUpload: {
+      type: Boolean,
+      default: true
+    },
+    allowFlashUpload: {
+      type: Boolean,
+      default: true
+    },
+    allowMediaUpload: {
+      type: Boolean,
+      default: true
+    },
+    allowFileUpload: {
+      type: Boolean,
+      default: true
+    },
+    allowFileManager: {
+      type: Boolean,
+      default: false
+    },
+    fontSizeTable: {
+      type: Array,
+      default: function () {
+        return ['9px', '10px', '12px', '14px', '16px', '18px', '24px', '32px']
+      }
+    },
+    imageTabIndex: {
+      type: Number,
+      default: 0
+    },
+    formatUploadUrl: {
+      type: Boolean,
+      default: true
+    },
+    fullscreenShortcut: {
+      type: Boolean,
+      default: false
+    },
+    extraFileUploadParams: {
+      type: Array,
+      default: function () {
+        return []
+      }
+    },
+    filePostName: {
+      type: String,
+      default: 'imgFile'
+    },
+    fillDescAfterUploadImage: {
+      type: Boolean,
+      default: false
+    },
+    afterSelectFile: {
+      type: Function
+    },
+    pagebreakHtml: {
+      type: String,
+      default: '<hr style=”page-break-after: always;” class=”ke-pagebreak” />'
+    },
+    allowImageRemote: {
+      type: Boolean,
+      default: true
+    },
+    autoHeightMode: {
+      type: Boolean,
+      default: false
+    },
+    fixToolBar: {
+      type: Boolean,
+      default: false
+    },
+    tabIndex: {
+      type: Number
+    }
+  },
+  watch: {
+    content (val) {
+      this.editor && val !== this.outContent && this.editor.html(val)
+    },
+    outContent (val) {
+      this.$emit('update:content', val)
+      this.$emit('on-content-change', val)
+    }
+  },
+  mounted () {
+    var _this = this
+    _this.editor = window.KindEditor.create('#' + this.id, {
+      width: _this.width,
+      height: _this.height,
+      minWidth: _this.minWidth,
+      minHeight: _this.minHeight,
+      items: _this.items,
+      noDisableItems: _this.noDisableItems,
+      filterMode: _this.filterMode,
+      htmlTags: _this.htmlTags,
+      wellFormatMode: _this.wellFormatMode,
+      resizeType: _this.resizeType,
+      themeType: _this.themeType,
+      langType: _this.langType,
+      designMode: _this.designMode,
+      fullscreenMode: _this.fullscreenMode,
+      basePath: _this.basePath,
+      themesPath: _this.cssPath,
+      pluginsPath: _this.pluginsPath,
+      langPath: _this.langPath,
+      minChangeSize: _this.minChangeSize,
+      loadStyleMode: _this.loadStyleMode,
+      urlType: _this.urlType,
+      newlineTag: _this.newlineTag,
+      pasteType: _this.pasteType,
+      dialogAlignType: _this.dialogAlignType,
+      shadowMode: _this.shadowMode,
+      zIndex: _this.zIndex,
+      useContextmenu: _this.useContextmenu,
+      syncType: _this.syncType,
+      indentChar: _this.indentChar,
+      cssPath: _this.cssPath,
+      cssData: _this.cssData,
+      bodyClass: _this.bodyClass,
+      colorTable: _this.colorTable,
+      afterCreate: _this.afterCreate,
+      afterChange: function () {
+        _this.afterChange
+        _this.outContent = this.html()
+      },
+      afterTab: _this.afterTab,
+      afterFocus: _this.afterFocus,
+      afterBlur: _this.afterBlur,
+      afterUpload: _this.afterUpload,
+      uploadJson: _this.uploadJson,
+      fileManagerJson: _this.fileManagerJson,
+      allowPreviewEmoticons: _this.allowPreviewEmoticons,
+      allowImageUpload: _this.allowImageUpload,
+      allowFlashUpload: _this.allowFlashUpload,
+      allowMediaUpload: _this.allowMediaUpload,
+      allowFileUpload: _this.allowFileUpload,
+      allowFileManager: _this.allowFileManager,
+      fontSizeTable: _this.fontSizeTable,
+      imageTabIndex: _this.imageTabIndex,
+      formatUploadUrl: _this.formatUploadUrl,
+      fullscreenShortcut: _this.fullscreenShortcut,
+      extraFileUploadParams: _this.extraFileUploadParams,
+      filePostName: _this.filePostName,
+      fillDescAfterUploadImage: _this.fillDescAfterUploadImage,
+      afterSelectFile: _this.afterSelectFile,
+      pagebreakHtml: _this.pagebreakHtml,
+      allowImageRemote: _this.allowImageRemote,
+      autoHeightMode: _this.autoHeightMode,
+      fixToolBar: _this.fixToolBar,
+      tabIndex: _this.tabIndex
+    })
+  }
+}
+</script>
+ 
+<style>
+   
+</style>

src/views/patientCenter/medical/index.vue

@@ -254,13 +254,22 @@
             ></el-option>
           </el-select>
         </div>
-        <vue-editor
+        <!-- <vue-editor
           id="editor"
           :disabled="true"
           useCustomImageHandler
           v-model="protocolTemplateContent"
         >
-        </vue-editor>
+        </vue-editor> -->
+
+
+        <editor
+          id="editor_id"
+          height="500px"
+          :content.sync="protocolTemplateContent"
+          :loadStyleMode="false"
+          @on-content-change="onContentChange"
+        ></editor>
       </div>
       <span slot="footer" class="dialog-footer">
         <el-button @click="cancel">取 消</el-button>
@@ -279,6 +288,8 @@ import {
 import { VueEditor } from 'vue2-editor'
 
 import initName from '@/utils/initName.js'
+
+import editor from '@/components/editorr/index'
 export default {
   name: 'EitcErmPcIndex',
   mixins: [initName],
@@ -289,7 +300,8 @@ export default {
     }
   },
   components: {
-    VueEditor
+    VueEditor,
+    editor
   },
   data() {
     return {
@@ -318,6 +330,10 @@ export default {
       })
       this.list = res.data
     },
+    
+    onContentChange(val) {
+      this.protocolTemplateContent = val
+    },
     async initInformedConsentFormOption() {
       const res = await informedConsentForm()
       this.templateNameOptions = res.data

src/views/patientCenter/printMedical.vue

@@ -68,14 +68,25 @@
         </span>
       </div>
 
-      <vue-editor
+      <!-- <vue-editor
       id="editor"
       :disabled="true"
       style="margin-top: 20px;"
       useCustomImageHandler
       v-model="protocolTemplateContent"
     >
-    </vue-editor>
+    </vue-editor> -->
+
+    <div style="margin-top: 20px;width: 100%;" v-html="protocolTemplateContent"> </div>
+
+    <!-- <editor
+    style="margin-top: 20px;width: 100%;"
+          id="editor_id"
+          height="500px"
+          :content.sync="protocolTemplateContent"
+          :loadStyleMode="false"
+          @on-content-change="onContentChange"
+        ></editor> -->
       
     </div>
       <span slot="footer" class="dialog-footer">
@@ -91,11 +102,14 @@ import { findMedicalInfo , html2Pdf } from '@/api/allApi.js'
 import initName from '@/utils/initName.js';
 import { VueEditor } from 'vue2-editor'
 
+import editor from '@/components/editorr/index'
+
 export default {
   name: 'EitcErmPcPrintMedical',
   mixins: [initName],
   components: {
-    VueEditor
+    VueEditor,
+    editor
   },
   props: {
     printDialogVisible: {
@@ -140,6 +154,9 @@ export default {
   },
 
   methods: {
+    onContentChange(val) {
+      this.protocolTemplateContent = val
+    },
     async initList() {
       const res = await findMedicalInfo({
         medicalRecordId:this.medicalRecordId,

src/views/settingsPage/protocolTemplate/addProtocolTypeDialog.vue

@@ -4,7 +4,7 @@
     <el-dialog
       :title="addProtocolTypeTitle"
       :visible.sync="addProtocolTypeDialog"
-      width="1000px"
+      width="800px"
       :close-on-press-escape="false"
       :close-on-click-modal="false"
       @close="cancel"
@@ -40,14 +40,22 @@
       </el-form>
 
       <div style="max-height: 65vh; overflow: auto">
-        <vue-editor
+        <!-- <vue-editor
           id="editor"
           :style="editorStyle"
           useCustomImageHandler
           v-model="ruleForm.protocolTemplateContent"
           @image-added="handleImageAdded"
         >
-        </vue-editor>
+        </vue-editor> -->
+
+        <editor
+          id="editor_id"
+          height="500px"
+          :content.sync="ruleForm.protocolTemplateContent"
+          :loadStyleMode="false"
+          @on-content-change="onContentChange"
+        ></editor>
       </div>
       <span slot="footer" class="dialog-footer">
         <el-button @click="cancel">取 消</el-button>
@@ -60,12 +68,15 @@
 <script>
 import { VueEditor } from 'vue2-editor'
 import { protocolTemplate, protocolTemplateUpdate } from '@/api/allApi.js'
-import axios from 'axios';
+import axios from 'axios'
+
+import editor from '@/components/editorr/index'
 
 export default {
   name: 'AddProtocolTypeDialog',
   components: {
-    VueEditor
+    VueEditor,
+    editor
   },
   props: {
     listInId: {
@@ -107,6 +118,9 @@ export default {
   },
   data() {
     return {
+      editorText: '直接初始化值', // 双向同步的变量
+      editorTextCopy: '', // content-change 事件回掉改变的对象
+
       addProtocolTypeDialog: false,
       diagnosisTypeTemplateList: [],
       ruleForm: {
@@ -133,6 +147,9 @@ export default {
     cancel() {
       this.addProtocolTypeDialog = false
     },
+    onContentChange(val) {
+      this.ruleForm.protocolTemplateContent = val
+    },
     async submit() {
       if (this.addProtocolTypeTitle === '新建') {
         this.ruleForm.protocolType = this.listInId
@@ -159,30 +176,28 @@ export default {
       this.addProtocolTypeDialog = false
     },
     handleImageAdded(file, Editor, cursorLocation, resetUploader) {
-      var formData = new FormData();
-      formData.append("image", file);
+      var formData = new FormData()
+      formData.append('image', file)
 
       axios({
-        url: "https://fakeapi.yoursite.com/images",
-        method: "POST",
+        url: 'https://fakeapi.yoursite.com/images',
+        method: 'POST',
         data: formData
       })
-        .then(result => {
-          const url = result.data.url; // Get url from response
-          Editor.insertEmbed(cursorLocation, "image", url);
-          resetUploader();
+        .then((result) => {
+          const url = result.data.url // Get url from response
+          Editor.insertEmbed(cursorLocation, 'image', url)
+          resetUploader()
+        })
+        .catch((err) => {
+          console.log(err)
         })
-        .catch(err => {
-          console.log(err);
-        });
     }
-
   }
 }
 </script>
 
 <style lang="scss" scoped>
-
 .df_box {
   display: flex;
   justify-content: space-between;
@@ -204,4 +219,7 @@ export default {
   }
 }
 
+::v-deep .kindeditor {
+  width: 900px;
+}
 </style>