diff --git a/src/lang/en.js b/src/lang/en.js
index 432b99cb..3d81875c 100644
--- a/src/lang/en.js
+++ b/src/lang/en.js
@@ -69,6 +69,15 @@ export default {
     permissions: 'Your permissions',
     switchPermissions: 'Switch permissions'
   },
+  components: {
+    documentation: 'Documentation',
+    tinymceTips: 'Rich text editor is a core part of management system, but at the same time is a place with lots of problems. In the process of selecting rich texts, I also walked a lot of detours. The common rich text editors in the market are basically used, and the final trade-off is the selection of Tinymce.See documentation for more detailed rich text editor comparisons and introductions',
+    dropzoneTips: 'Because my business has special needs, and has to upload to qiniu, So instead of a third party, I chose encapsulate it by myself. It is very simple, you can see the specific code in @/components/Dropzone.',
+    stickyTips: 'when the page is scrolled to the preset position will be sticky on the top.',
+    backToTopTips1: 'When the page is scrolled to the specified position, the Back to Top button appears in the lower right corner',
+    backToTopTips2: 'You can customize the style of the button, show / hide, height of appearance, height of the return. If you need a text prompt, you can use element-ui el-tooltip elements externally',
+    imageUploadTips: 'Since I was using only the vue@1 version, and it is not compatible with mockjs at the moment, I modified it myself,and if you are going to use it, it is better to use official version.'
+  },
   table: {
     dynamicTips1: 'Fixed header, sorted by header order',
     dynamicTips2: 'Not fixed header, sorted by click order',
diff --git a/src/lang/zh.js b/src/lang/zh.js
index 996fd7b6..cff6c72d 100644
--- a/src/lang/zh.js
+++ b/src/lang/zh.js
@@ -69,6 +69,15 @@ export default {
     permissions: '你的权限',
     switchPermissions: '切换权限'
   },
+  components: {
+    documentation: '文档',
+    tinymceTips: '富文本是管理后台一个核心的功能，但同时又是一个有很多坑的地方。在选择富文本的过程中我也走了不少的弯路，市面上常见的富文本都基本用过了，最终权衡了一下选择了Tinymce。更详细的富文本比较和介绍见',
+    dropzoneTips: '由于我司业务有特殊需求，而且要传七牛 所以没用第三方，选择了自己封装。代码非常的简单，具体代码你可以在这里看到 @/components/Dropzone',
+    stickyTips: '当页面滚动到预设的位置会吸附在顶部',
+    backToTopTips1: '页面滚动到指定位置会在右下角出现返回顶部按钮',
+    backToTopTips2: '可自定义按钮的样式、show/hide、出现的高度、返回的位置 如需文字提示，可在外部使用Element的el-tooltip元素',
+    imageUploadTips: '由于我在使用时它只有vue@1版本，而且和mockjs不兼容，所以自己改造了一下，如果大家要使用的话，优先还是使用官方版本。'
+  },
   table: {
     dynamicTips1: '固定表头, 按照表头顺序排序',
     dynamicTips2: '不固定表头, 按照点击顺序排序',
diff --git a/src/views/components-demo/avatarUpload.vue b/src/views/components-demo/avatarUpload.vue
index 9a98ae21..f993a4f6 100644
--- a/src/views/components-demo/avatarUpload.vue
+++ b/src/views/components-demo/avatarUpload.vue
@@ -1,16 +1,16 @@
 <template>
   <div class="components-container">
-    <code>这里核心代码用的是
-      <a class="link-type" href="//github.com/dai-siki/vue-image-crop-upload"> vue-image-crop-upload</a>
-      由于我在使用时它只有vue@1版本，而且有些业务的需求耦合到七牛等等原因吧，自己改造了一下，如果大家要使用的话，优先还是使用官方component
+    <code>This is based on
+      <a class="link-type" href="//github.com/dai-siki/vue-image-crop-upload"> vue-image-crop-upload</a>.
+      {{$t('components.imageUploadTips')}}
     </code>
 
     <pan-thumb :image="image"></pan-thumb>
 
-    <el-button type="primary" icon="upload" style="position: absolute;bottom: 15px;margin-left: 40px;" @click="imagecropperShow=true">修改头像
+    <el-button type="primary" icon="upload" style="position: absolute;bottom: 15px;margin-left: 40px;" @click="imagecropperShow=true">Change avatar
     </el-button>
 
-    <image-cropper :width="300" :height="300" url="https://httpbin.org/post" @close='close' @crop-upload-success="cropSuccess"
+    <image-cropper :width="300" :height="300" url="https://httpbin.org/post" @close='close' @crop-upload-success="cropSuccess" langType="en"
       :key="imagecropperKey" v-show="imagecropperShow"></image-cropper>
   </div>
 </template>
diff --git a/src/views/components-demo/backToTop.vue b/src/views/components-demo/backToTop.vue
index 51d7879e..6abb652a 100644
--- a/src/views/components-demo/backToTop.vue
+++ b/src/views/components-demo/backToTop.vue
@@ -1,134 +1,121 @@
 <template>
   <div class="components-container">
-    <code>页面滚动到指定位置会在右下角出现返回顶部按钮</code>
-    <code>可自定义按钮的样式、show/hide临界点、返回的位置 如需文字提示，可在外部使用Element的el-tooltip元素 </code>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
-    <div>我是占位</div>
+    <code>{{$t('components.backToTopTips1')}}</code>
+    <code>{{$t('components.backToTopTips2')}}</code>
+    <div class="placeholder-container">
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+    </div>
     <!--可自定义按钮的样式、show/hide临界点、返回的位置  -->
     <!--如需文字提示，可在外部添加element的<el-tooltip></el-tooltip>元素  -->
-    <el-tooltip placement="top" content="文字提示">
+    <el-tooltip placement="top" content="tooltip">
       <back-to-top transitionName="fade" :customStyle="myBackToTopStyle" :visibilityHeight="300" :backPosition="50"></back-to-top>
     </el-tooltip>
   </div>
@@ -148,10 +135,16 @@ export default {
         width: '40px',
         height: '40px',
         'border-radius': '4px',
-        'line-height': '45px', // 请保持与高度一致以垂直居中
-        background: '#e7eaf1'// 按钮的背景颜色
+        'line-height': '45px', // 请保持与高度一致以垂直居中 Please keep consistent with height to center vertically
+        background: '#e7eaf1'// 按钮的背景颜色 The background color of the button
       }
     }
   }
 }
-  </script>
+</script>
+
+<style scoped>
+.placeholder-container div {
+  margin: 10px;
+}
+</style>
diff --git a/src/views/components-demo/dndList.vue b/src/views/components-demo/dndList.vue
index e929a3fb..b9779a31 100644
--- a/src/views/components-demo/dndList.vue
+++ b/src/views/components-demo/dndList.vue
@@ -4,7 +4,7 @@
       <a href="https://github.com/SortableJS/Vue.Draggable" target="_blank">Vue.Draggable</a>
     </code>
     <div class="editor-container">
-      <dnd-list :list1="list1" :list2="list2" list1Title="头条列表" list2Title="文章池"></dnd-list>
+      <dnd-list :list1="list1" :list2="list2" list1Title="List" list2Title="Article pool"></dnd-list>
     </div>
   </div>
 </template>
diff --git a/src/views/components-demo/dropzone.vue b/src/views/components-demo/dropzone.vue
index 6af6ae2e..135cd4fb 100644
--- a/src/views/components-demo/dropzone.vue
+++ b/src/views/components-demo/dropzone.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="components-container">
     <code>
-      基于<a class="link-type" href="https://github.com/rowanwins/vue-dropzone"> dropzone </a>封装 ,
-      由于我司业务有特殊需求，而且要传七牛 所以没用第三方 选择了自己封装
+      Based on <a class="link-type" href="https://github.com/rowanwins/vue-dropzone"> dropzone </a> ,
+      {{$t('components.dropzoneTips')}}
     </code>
     <div class="editor-container">
       <dropzone v-on:dropzone-removedFile="dropzoneR" v-on:dropzone-success="dropzoneS" id="myVueDropzone" url="https://httpbin.org/post"></dropzone>
@@ -19,11 +19,11 @@ export default {
   methods: {
     dropzoneS(file) {
       console.log(file)
-      this.$message({ message: '上传成功', type: 'success' })
+      this.$message({ message: 'Upload success', type: 'success' })
     },
     dropzoneR(file) {
       console.log(file)
-      this.$message({ message: '删除成功', type: 'success' })
+      this.$message({ message: 'Delete success', type: 'success' })
     }
   }
 }
diff --git a/src/views/components-demo/markdown.vue b/src/views/components-demo/markdown.vue
index afd07c6c..61a3b51f 100644
--- a/src/views/components-demo/markdown.vue
+++ b/src/views/components-demo/markdown.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="components-container">
-    <code>Markdown 我们这里选用了
-      <a href="https://github.com/sparksuite/simplemde-markdown-editor" target="_blank">simplemde-markdown-editor</a> ，简单的用vue封装了一下
+    <code>Markdown is based on
+      <a href="https://github.com/sparksuite/simplemde-markdown-editor" target="_blank">simplemde-markdown-editor</a> ，Simply encapsulated in Vue.
       <a target="_blank" href="https://segmentfault.com/a/1190000009762198#articleHeader14">
         相关文章 </a>
     </code>
     <div class="editor-container">
       <markdown-editor id="contentEditor" ref="contentEditor" v-model="content" :height="300" :zIndex="20"></markdown-editor>
     </div>
-    <el-button @click="markdown2Html" style="margin-top:80px;" type="primary" icon="el-icon-document">转为HTML</el-button>
+    <el-button @click="markdown2Html" style="margin-top:80px;" type="primary" icon="el-icon-document">To HTML</el-button>
     <div v-html="html"></div>
   </div>
 </template>
diff --git a/src/views/components-demo/splitpane.vue b/src/views/components-demo/splitpane.vue
index fa3f14a4..329ee3de 100644
--- a/src/views/components-demo/splitpane.vue
+++ b/src/views/components-demo/splitpane.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="components-container">
-    <code>splitPane 如果你用过
+    <code>splitPane If you've used
       <a href="http://codepen.io/" target="_blank"> codepen</a>,
-      <a href="https://jsfiddle.net/" target="_blank"> jsfiddle </a>就不会陌生了
-      <a href="https://github.com/PanJiaChen/vue-split-pane" target='_blank'>项目地址</a>
+      <a href="https://jsfiddle.net/" target="_blank"> jsfiddle </a>will not be unfamiliar.
+      <a href="https://github.com/PanJiaChen/vue-split-pane" target='_blank'> Github repository</a>
     </code>
     <split-pane v-on:resize="resize" split="vertical">
       <template slot="paneL">
diff --git a/src/views/components-demo/sticky.vue b/src/views/components-demo/sticky.vue
index 014d71fa..49772bea 100644
--- a/src/views/components-demo/sticky.vue
+++ b/src/views/components-demo/sticky.vue
@@ -2,8 +2,8 @@
   <div>
     <sticky className="sub-navbar">
       <el-dropdown trigger="click">
-        <el-button>
-          平台<i class="el-icon-caret-bottom el-icon--right"></i>
+        <el-button plain>
+          Platform<i class="el-icon-caret-bottom el-icon--right"></i>
         </el-button>
         <el-dropdown-menu class="no-border" slot="dropdown">
           <el-checkbox-group v-model="platforms" style="padding: 5px 15px;">
@@ -15,79 +15,79 @@
       </el-dropdown>
 
       <el-dropdown trigger="click">
-        <el-button>
-          外链<i class="el-icon-caret-bottom el-icon--right"></i>
+        <el-button plain>
+          Link<i class="el-icon-caret-bottom el-icon--right"></i>
         </el-button>
         <el-dropdown-menu class="no-padding no-border" style="width:300px" slot="dropdown">
-          <el-input placeholder="请输入内容" v-model="url">
-            <template slot="prepend">填写url</template>
+          <el-input placeholder="Please enter the content" v-model="url">
+            <template slot="prepend">Url</template>
           </el-input>
         </el-dropdown-menu>
       </el-dropdown>
 
       <div class="time-container">
-        <el-date-picker v-model="time" type="datetime" :picker-options="pickerOptions" format="yyyy-MM-dd HH:mm:ss" placeholder="发布时间">
+        <el-date-picker v-model="time" type="datetime" :picker-options="pickerOptions" format="yyyy-MM-dd HH:mm:ss" placeholder="Release time">
         </el-date-picker>
       </div>
 
-      <el-button style="margin-left: 10px;" type="success">发布
+      <el-button style="margin-left: 10px;" type="success">publish
       </el-button>
     </sticky>
 
     <div class="components-container">
-      <code>Sticky header 当页面滚动到预设的位置会吸附在顶部</code>
-      <div>我是占位</div>
-      <div>我是占位</div>
-      <div>我是占位</div>
-      <div>我是占位</div>
-      <div>我是占位</div>
-      <div>我是占位</div>
-      <div>我是占位</div>
-      <div>我是占位</div>
-      <div>我是占位</div>
-      <div>我是占位</div>
-      <div>我是占位</div>
-      <div>我是占位</div>
-      <div>我是占位</div>
-      <div>我是占位</div>
-      <div>我是占位</div>
-      <div>我是占位</div>
-      <div>我是占位</div>
-      <div>我是占位</div>
-      <div>我是占位</div>
-      <div>我是占位</div>
-      <div>我是占位</div>
-      <div>我是占位</div>
-      <div>我是占位</div>
-      <div>我是占位</div>
-      <div>我是占位</div>
-      <div>我是占位</div>
-      <div>我是占位</div>
-      <div>我是占位</div>
-      <div>我是占位</div>
-      <div>我是占位</div>
-      <div>我是占位</div>
-      <div>我是占位</div>
-      <div>我是占位</div>
-      <div>我是占位</div>
-      <div>我是占位</div>
-      <div>我是占位</div>
-      <div>我是占位</div>
-      <div>我是占位</div>
-      <div>我是占位</div>
-      <div>我是占位</div>
-      <div>我是占位</div>
-      <div>我是占位</div>
-      <div>我是占位</div>
-      <div>我是占位</div>
-      <div>我是占位</div>
-      <div>我是占位</div>
-      <div>我是占位</div>
-      <div>我是占位</div>
-      <div>我是占位</div>
-      <div>我是占位</div>
-      <div>我是占位</div>
-      <div>我是占位</div>
+      <code>Sticky header, {{$t('components.stickyTips')}}</code>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
     </div>
   </div>
 </template>
@@ -105,9 +105,9 @@ export default {
       url: '',
       platforms: ['a-platform'],
       platformsOptions: [
-        { key: 'a-platform', name: '平台A' },
-        { key: 'b-platform', name: '平台B' },
-        { key: 'c-platform', name: '平台C' }
+        { key: 'a-platform', name: 'platformA' },
+        { key: 'b-platform', name: 'platformB' },
+        { key: 'c-platform', name: 'platformC' }
       ],
       pickerOptions: {
         disabledDate(time) {
@@ -120,8 +120,11 @@ export default {
 </script>
 
 <style scoped>
-  .time-container {
-    display: inline-block;
-  }
-</style>
+.components-container div {
+  margin: 10px;
+}
 
+.time-container {
+  display: inline-block;
+}
+</style>
diff --git a/src/views/components-demo/tinymce.vue b/src/views/components-demo/tinymce.vue
index d8a85c3b..ff1b6d77 100644
--- a/src/views/components-demo/tinymce.vue
+++ b/src/views/components-demo/tinymce.vue
@@ -1,7 +1,8 @@
 <template>
   <div class="components-container">
-    <code>公司做的后台主要是一个cms系统，公司也是以自媒体为核心的，所以富文本是后台很核心的功能。在选择富文本的过程中也走了不少的弯路，市面上常见的富文本都基本用过了，最终选择了Tinymce
-      <a target="_blank" class="link-type" href="https://panjiachen.github.io/vue-element-admin-site/#/rich-editor">文档介绍</a>
+    <code>
+      {{$t('components.tinymceTips')}}
+      <a target="_blank" class="link-type" href="https://panjiachen.github.io/vue-element-admin-site/#/rich-editor"> {{$t('components.documentation')}}</a>
     </code>
     <div>
       <tinymce :height="200" v-model="content"></tinymce>
@@ -18,7 +19,14 @@ export default {
   components: { Tinymce },
   data() {
     return {
-      content: 'Tinymce'
+      content:
+      `<h1 style="text-align: center;">Welcome to the TinyMCE demo!</h1>
+      <ul>
+        <li>Our <a href="//www.tinymce.com/docs/">documentation</a> is a great resource for learning how to configure TinyMCE.</li>
+        <li>Have a specific question? Visit the <a href="https://community.tinymce.com/forum/">Community Forum</a>.</li>
+        <li>We also offer enterprise grade support as part of <a href="https://tinymce.com/pricing">TinyMCE premium subscriptions</a>.</li>
+      </ul>
+      `
     }
   }
 }