tinymce 汉化

src/components/Tinymce/components/EditorImage.vue

@@ -16,14 +16,14 @@
         list-type="picture-card"
       >
         <el-button size="small" type="primary">
-          Click upload
+          点击上传
         </el-button>
       </el-upload>
       <el-button @click="dialogVisible = false">
-        Cancel
+        取消
       </el-button>
       <el-button type="primary" @click="handleSubmit">
-        Confirm
+        确认
       </el-button>
     </el-dialog>
   </div>

src/components/Tinymce/index.vue

@@ -115,7 +115,7 @@ export default {
       const _this = this
       window.tinymce.init({
         selector: `#${this.tinymceId}`,
-        language: this.languageTypeList['en'],
+        language: this.languageTypeList['zh'],
         height: this.height,
         body_class: 'panel-body ',
         object_resizing: false,

src/views/device/add.vue

 <template>
   <div class="app-container">
     <!-- <div class="filter-container">
-    </div> -->
+    </div>-->
     <div>
       <el-form
         ref="dataForm"
@@ -11,19 +11,10 @@
         label-width="100px"
         style="width: 400px; margin-left:50px;"
       >
-        <el-form-item
-          label="设备名称"
-          prop="equipmentName"
-        >
-          <el-input
-            v-model="temp.equipmentName"
-            placeholder="请输入设备名称"
-          />
+        <el-form-item label="设备名称" prop="equipmentName">
+          <el-input v-model="temp.equipmentName" placeholder="请输入设备名称" />
         </el-form-item>
-        <el-form-item
-          label="设备金额"
-          prop="equipmentIntro"
-        >
+        <el-form-item label="设备金额" prop="equipmentIntro">
           <el-input-number
             v-model="temp.equipmentPrice"
             controls-position="right"
@@ -32,20 +23,17 @@
             placeholder="请输入设备金额"
           />
         </el-form-item>
-        <el-form-item
-          label="设备摘要"
-          prop="equipmentIntro"
-        >
+        <el-form-item label="设备摘要" prop="equipmentIntro">
           <el-input
             v-model="temp.equipmentIntro"
+            maxlength="10"
             placeholder="请输入设备摘要不超过10个字"
+            type="text"
+            show-word-limit
           />
           <div>最多填写10个字</div>
         </el-form-item>
-        <el-form-item
-          label="上传设备封面"
-          prop="equipmentUrl"
-        >
+        <el-form-item label="上传设备封面" prop="equipmentUrl">
           <el-upload
             class="upload-demo"
             drag
@@ -56,43 +44,31 @@
             :action="templateUploadZipUrl"
           >
             <i class="el-icon-upload" />
-            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+            <div class="el-upload__text">
+              将文件拖到此处，或
+              <em>点击上传</em>
+            </div>
           </el-upload>
-          <img style="width: 200px;" :src="temp.equipmentUrl" alt="">
+          <img style="width: 200px;" :src="temp.equipmentUrl" alt />
         </el-form-item>
-        <el-form-item
-          label="设备详情"
-          prop="equipmentDetails"
-        >
+        <el-form-item label="设备详情" prop="equipmentDetails">
           <Tinymce v-model="temp.equipmentDetails" style="width: 600px" />
         </el-form-item>
       </el-form>
       <div>
-        <el-button
-          style="margin-left: 10px;"
-          type="primary"
-          @click="createData"
-        >
-          保存
-        </el-button>
+        <el-button style="margin-left: 10px;" type="primary" @click="createData">保存</el-button>
       </div>
-
     </div>
   </div>
 </template>
 
 <script>
-import {
-  addDevice,
-  updateDevice,
-  getDetail,
-  uploadUrl
-} from '@/api/device'
-import Tinymce from '@/components/Tinymce'
-import waves from '@/directive/waves' // waves directive
+import { addDevice, updateDevice, getDetail, uploadUrl } from "@/api/device";
+import Tinymce from "@/components/Tinymce";
+import waves from "@/directive/waves"; // waves directive
 
 export default {
-  name: 'ComplexTable',
+  name: "ComplexTable",
   directives: { waves },
   components: {
     Tinymce
@@ -100,11 +76,11 @@ export default {
   filters: {
     statusFilter(status) {
       const statusMap = {
-        published: 'success',
-        draft: 'info',
-        deleted: 'danger'
-      }
-      return statusMap[status]
+        published: "success",
+        draft: "info",
+        deleted: "danger"
+      };
+      return statusMap[status];
     }
   },
   data() {
@@ -122,30 +98,30 @@ export default {
         page: 1,
         limit: 20,
         typeId: undefined,
-        title: '',
+        title: "",
         tagId: undefined,
-        sort: '+id'
+        sort: "+id"
       },
-      templateId: '',
+      templateId: "",
       sortOptions: [
-        { label: 'ID Ascending', key: '+id' },
-        { label: 'ID Descending', key: '-id' }
+        { label: "ID Ascending", key: "+id" },
+        { label: "ID Descending", key: "-id" }
       ],
-      statusOptions: ['published', 'draft', 'deleted'],
+      statusOptions: ["published", "draft", "deleted"],
       showReviewer: false,
       temp: {
-        equipmentName: '',
-        equipmentIntro: '',
-        equipmentShopId: '',
-        equipmentUrl: '',
-        equipmentPrice: '',
-        equipmentDetails: ''
+        equipmentName: "",
+        equipmentIntro: "",
+        equipmentShopId: "",
+        equipmentUrl: "",
+        equipmentPrice: "",
+        equipmentDetails: ""
       },
       dialogFormVisible: true,
-      dialogStatus: '',
+      dialogStatus: "",
       textMap: {
-        update: 'Edit',
-        create: 'Create'
+        update: "Edit",
+        create: "Create"
       },
       dialogPvVisible: false,
       pvData: [],
@@ -153,111 +129,111 @@ export default {
         equipmentName: [
           {
             required: true,
-            message: 'equipmentName is required',
-            trigger: 'change'
+            message: "equipmentName is required",
+            trigger: "change"
           }
         ],
         equipmentIntro: [
           {
             required: true,
-            message: 'equipmentIntro is required',
-            trigger: 'change'
+            message: "equipmentIntro is required",
+            trigger: "change"
           }
         ],
         equipmentDetails: [
           {
             required: true,
-            message: 'equipmentDetails is required',
-            trigger: 'change'
+            message: "equipmentDetails is required",
+            trigger: "change"
           }
         ],
         equipmentPrice: [
           {
             required: true,
-            message: 'equipmentPrice is required',
-            trigger: 'change'
+            message: "equipmentPrice is required",
+            trigger: "change"
           }
         ]
       },
       downloadLoading: false
-    }
+    };
   },
   created() {
-    this.equipmentShopId = this.$route.query.equipmentShopId
-    this.getTempalteDetail()
+    this.equipmentShopId = this.$route.query.equipmentShopId;
+    this.getTempalteDetail();
   },
   methods: {
     getTempalteDetail() {
-      const id = this.$route.query.equipmentShopId
+      const id = this.$route.query.equipmentShopId;
       if (id) {
         getDetail(this.$route.query.equipmentShopId).then(response => {
-          const tempData = JSON.parse(JSON.stringify(response))
-          this.temp = Object.assign(this.temp, tempData)
-          console.log(response)
-        })
+          const tempData = JSON.parse(JSON.stringify(response));
+          this.temp = Object.assign(this.temp, tempData);
+          console.log(response);
+        });
       }
     },
     uploadZipSuccess(e) {
-      if (e.code && e.code !== '0') {
-        this.$message.error(e.msg)
+      if (e.code && e.code !== "0") {
+        this.$message.error(e.msg);
       } else {
-        this.$message('上传成功')
-        this.temp.equipmentUrl = e.data
-        console.log(this.temp)
+        this.$message("上传成功");
+        this.temp.equipmentUrl = e.data;
+        console.log(this.temp);
       }
-      console.log(e)
+      console.log(e);
     },
     resetTemp() {
       this.temp = {
         id: undefined,
         importance: 1,
-        remark: '',
+        remark: "",
         timestamp: new Date(),
-        title: '',
-        status: 'published',
-        type: ''
-      }
+        title: "",
+        status: "published",
+        type: ""
+      };
     },
     handleCreate() {
-      this.resetTemp()
-      this.dialogStatus = 'create'
-      this.dialogFormVisible = true
+      this.resetTemp();
+      this.dialogStatus = "create";
+      this.dialogFormVisible = true;
       this.$nextTick(() => {
-        this.$refs['dataForm'].clearValidate()
-      })
+        this.$refs["dataForm"].clearValidate();
+      });
     },
     createData() {
-      this.$refs['dataForm'].validate(valid => {
+      this.$refs["dataForm"].validate(valid => {
         if (valid) {
-          const uploadTemp = Object.assign({}, this.temp)
+          const uploadTemp = Object.assign({}, this.temp);
 
           if (this.equipmentShopId) {
             updateDevice(uploadTemp).then(res => {
               this.$notify({
-                title: 'Success',
-                message: 'Update Successfully',
-                type: 'success',
+                title: "Success",
+                message: "Update Successfully",
+                type: "success",
                 duration: 2000
-              })
-              this.getTempalteDetail()
-              this.$router.back()
-            })
+              });
+              this.getTempalteDetail();
+              this.$router.back();
+            });
           } else {
             addDevice(uploadTemp).then(() => {
               this.$notify({
-                title: 'Success',
-                message: 'Created Successfully',
-                type: 'success',
+                title: "Success",
+                message: "Created Successfully",
+                type: "success",
                 duration: 2000
-              })
-              this.$router.back()
-            })
+              });
+              this.$router.back();
+            });
           }
         }
-      })
+      });
     }
   }
-}
+};
 </script>
 <style lang="scss" scoped>
 </style>