rich text

src/main/resources/templates/FormTemplate.vm

@@ -121,6 +121,14 @@
                 </el-switch>
             </el-form-item>
                     #end
+                    #if(${field.formType}=="richText")
+                        <el-form-item prop="${field.modelName}" label="${field.remark}">
+                            <rich-text
+                                    v-model="formData.${field.modelName}"
+                                    :disabled="'${field.modelName}'==subColumn">
+                            </rich-text>
+                        </el-form-item>
+                    #end
                 #end
             #end
             <el-form-item>

src/main/vue/src/components/RichText.vue

@@ -1,5 +1,6 @@
 <template>
-    <textarea v-model="content" ref="editor"></textarea>
+    <div v-if="disabled" v-html="content" class="preview"></div>
+    <textarea v-else v-model="content" ref="editor" @load="load"></textarea>
 </template>
 <script>
     import axios from 'axios';
@@ -32,54 +33,15 @@
 
     require('./zh_CN');
     export default {
-        props: ['value'],
+        props: ['value', 'disabled'],
         created() {
             this.content = this.value || ''
         },
-        destroyed() {
-            if (this.editor) {
-                this.editor.destroy()
-            }
-        },
         mounted() {
-            tinymce.init({
-                target: this.$refs.editor,
-                skin_url: '/static/skins/lightgray',
-                language: 'zh_CN',
-                menubar: false,
-                branding: false,
-                statusbar: false,
-                height: 300,
-                toolbar: 'undo redo | styleselect bold italic strikethrough forecolor backcolor  | image media link blockquote visualblocks insert | formatselect | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | preview fullscreen code help',
-                plugins: [
-                    'advlist autolink lists link image charmap print preview anchor textcolor',
-                    'searchreplace visualblocks code fullscreen',
-                    'insertdatetime media table contextmenu paste code help imagetools'
-                ],
-                images_upload_url: this.$baseUrl + '/assets/uploadFile',
-                images_upload_handler: function (blobInfo, success, failure) {
-                    let formData = new FormData();
-                    formData.append('file', blobInfo.blob(), blobInfo.filename());
-                    axios.post('/assets/uploadFile', formData).then(res => {
-                        if (res.status === 200) {
-                            if (res.data.success) {
-                                success(res.data.data[0]);
-                                return;
-                            }
-                        }
-                        failure('error');
-                    }).catch(e => {
-                        failure(e);
-                    })
-                },
-                init_instance_callback: editor => {
-                    this.editor = editor;
-                    this.editor.setContent(this.content);
-                    editor.on('Change MouseOut', e => {
-                        this.content = editor.getContent();
-                    });
-                }
-            });
+            this.initEditor();
+        },
+        destroyed() {
+            this.destroyEditor();
         },
         data() {
             return {
@@ -87,7 +49,57 @@
                 content: ''
             }
         },
-        methods: {},
+        methods: {
+            load() {
+                console.log(1111)
+            },
+            initEditor() {
+                tinymce.init({
+                    target: this.$refs.editor,
+                    skin_url: '/static/skins/lightgray',
+                    language: 'zh_CN',
+                    menubar: false,
+                    branding: false,
+                    statusbar: false,
+                    height: 300,
+                    toolbar: 'undo redo | styleselect bold italic strikethrough forecolor backcolor  | image media link blockquote visualblocks insert | formatselect | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | preview fullscreen code help',
+                    plugins: [
+                        'advlist autolink lists link image charmap print preview anchor textcolor',
+                        'searchreplace visualblocks code fullscreen',
+                        'insertdatetime media table contextmenu paste code help imagetools'
+                    ],
+                    images_upload_url: this.$baseUrl + '/assets/uploadFile',
+                    images_upload_handler: function (blobInfo, success, failure) {
+                        let formData = new FormData();
+                        formData.append('file', blobInfo.blob(), blobInfo.filename());
+                        axios.post('/assets/uploadFile', formData).then(res => {
+                            if (res.status === 200) {
+                                if (res.data.success) {
+                                    success(res.data.data[0]);
+                                    return;
+                                }
+                            }
+                            failure('error');
+                        }).catch(e => {
+                            failure(e);
+                        })
+                    },
+                    init_instance_callback: editor => {
+                        this.editor = editor;
+                        this.editor.setContent(this.content);
+                        editor.on('Change MouseOut', e => {
+                            this.content = editor.getContent();
+                        });
+                    }
+                });
+            },
+            destroyEditor() {
+                if (this.editor) {
+                    this.editor.destroy();
+                }
+                this.editor = null;
+            }
+        },
         watch: {
             value(val) {
                 if (this.editor) {
@@ -97,7 +109,25 @@
             },
             content(val) {
                 this.$emit('input', val)
+            },
+            disabled(val) {
+                if (val) {
+                    this.destroyEditor();
+                } else {
+                    this.$nextTick(() => {
+                        this.initEditor();
+                    })
+                }
             }
         }
     }
 </script>
+<style lang="less" scoped>
+    .preview {
+        height: 300px;
+        overflow: auto;
+        border: 1px solid #ebebeb;
+        background-color: #fbfdff;
+        border-radius: 4px;
+    }
+</style>

src/main/vue/src/entries/admin.js

@@ -6,6 +6,7 @@ import ElementUI from 'element-ui'
 import axios from 'axios'
 import MultiUpload from '../components/MultiUpload'
 import SingleUpload from '../components/SingleUpload'
+import RichText from '../components/RichText'
 import VueI18n from 'vue-i18n'
 import VueAMap from 'vue-amap'
 
@@ -26,6 +27,7 @@ Vue.use(ElementUI);
 Vue.use(VueI18n);
 Vue.component('multi-upload', MultiUpload);
 Vue.component('single-upload', SingleUpload);
+Vue.component('rich-text', RichText);
 const baseUrl = process.env.NODE_ENV === 'production' ? '../' : `http://${location.hostname}:8080`;
 Vue.prototype.$baseUrl = baseUrl;
 axios.defaults.withCredentials = true;