add && remove

src/api/article.js

@@ -6,3 +6,11 @@ export function getList() {
     method: 'get'
   });
 }
+
+export function getArticle() {
+  return fetch({
+    url: '/article/detail',
+    method: 'get'
+  });
+}
+

src/api/remoteSearch.js

+import { fetch } from 'utils/fetch';
+
+export function userSearch(name) {
+  return fetch({
+    url: '/search/user',
+    method: 'get',
+    params: { name }
+  });
+}

src/components/Tinymce/index.vue

@@ -75,7 +75,7 @@
           //  language_url: '/static/tinymce/langs/zh_CN.js',
           toolbar: this.toolbar,
           menubar: this.menubar,
-          plugins: 'advlist,autolink,code,powerpaste,textcolor, colorpicker,fullscreen,link,lists,media,wordcount, imagetools,watermark',
+          plugins: 'advlist,autolink,code,paste,textcolor, colorpicker,fullscreen,link,lists,media,wordcount, imagetools,watermark',
           end_container_on_empty_block: true,
           powerpaste_word_import: 'clean',
           code_dialog_height: 450,

src/mock/article.js

+import Mock from 'mockjs';
+
+
+const List = [];
+const count = 20;
+
+
+for (let i = 0; i < count; i++) {
+  List.push(Mock.mock({
+    id: '@id',
+    title: '@ctitle(10, 20)',
+    'status|1': ['published', 'draft'],
+    author: '@cname',
+    display_time: '@datetime',
+    pageviews: '@integer(300, 5000)'
+  }));
+}
+
+export default {
+  getList: () => new Promise(resolve => {
+    setTimeout(() => {
+      resolve([200, {
+        data: List
+      }]);
+    }, 100);
+  }),
+  getArticle: () => new Promise(resolve => {
+    setTimeout(() => {
+      resolve([200, {
+        data: {
+          id: 120000000001,
+          author: { key: 'mockPan' },
+          source_name: '原创作者',
+          category_item: [{ key: 'global', name: '全球' }],
+          comment_disabled: false,
+          content: '<p>我是测试数据我是测试数据</p><p><img class="wscnph" src="https://wpimg.wallstcn.com/4c69009c-0fd4-4153-b112-6cb53d1cf943" data-wscntype="image" data-wscnh="300" data-wscnw="400" data-mce-src="https://wpimg.wallstcn.com/4c69009c-0fd4-4153-b112-6cb53d1cf943"></p>"',
+          content_short: '我是测试数据',
+          display_time: +new Date(),
+          image_uri: 'https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3',
+          platforms: ['a-platform'],
+          source_uri: 'https://github.com/PanJiaChen/vue-element-admin',
+          status: 'published',
+          tags: [],
+          title: ''
+        }
+      }]);
+    }, 100);
+  })
+};

src/mock/index.js

 import axios from 'axios';
-import Mock from 'mockjs';
 import MockAdapter from 'axios-mock-adapter';
-import article_tableAPI from './article_table'
+import articleAPI from './article';
+import article_tableAPI from './article_table';
+import remoteSearchAPI from './remoteSearch';
 const mock = new MockAdapter(axios);
 
-const articleList = {
-  'data|20': [{
-    id: '@id',
-    title: '@ctitle(10, 20)',
-    'status|1': ['published', 'draft'],
-    author: '@cname',
-    display_time: '@datetime',
-    pageviews: '@integer(300, 5000)'
-  }]
-}
-const data = JSON.stringify(Mock.mock(articleList))
-mock.onGet('/article/list').reply(200, data);
 
+mock.onGet('/article/list').reply(articleAPI.getList);
+mock.onGet('/article/detail').reply(articleAPI.getArticle);
 
 mock.onGet('/article_table/list').reply(article_tableAPI.getList);
 mock.onGet('/article_table/pv').reply(article_tableAPI.getPv);
 
 
+mock.onGet('/search/user').reply(remoteSearchAPI.searchUser);
+
 
 export default mock;

src/mock/remoteSearch.js

+import Mock from 'mockjs';
+
+const NameList = [];
+const count = 100;
+
+for (let i = 0; i < count; i++) {
+  NameList.push(Mock.mock({
+    name: '@first'
+  }));
+}
+NameList.push({ name: 'mockPan' })
+
+export default {
+  searchUser: config => {
+    const { name } = config.params;
+    const mockNameList = NameList.filter(item => {
+      const lowerCaseName = item.name.toLowerCase()
+      if (name && lowerCaseName.indexOf(name.toLowerCase()) < 0) return false;
+      return true;
+    });
+    return new Promise(resolve => {
+      setTimeout(() => {
+        resolve([200, {
+          items: mockNameList
+        }]);
+      }, 100);
+    })
+  }
+};

src/router/index.js

@@ -51,6 +51,8 @@ const Theme = resolve => require(['../views/theme/index'], resolve);
 /* example*/
 const DynamicTable = resolve => require(['../views/example/dynamictable'], resolve);
 const Table = resolve => require(['../views/example/table'], resolve);
+const Form1 = resolve => require(['../views/example/form1'], resolve);
+const Form2 = resolve => require(['../views/example/form2'], resolve);
 
 
 /* admin*/
@@ -170,7 +172,9 @@ export default new Router({
       icon: 'zonghe',
       children: [
         { path: 'dynamictable', component: DynamicTable, name: '动态table' },
-        { path: 'table', component: Table, name: '综合table' }
+        { path: 'table', component: Table, name: '综合table' },
+        { path: 'form1', component: Form1, name: '综合form1' }
+        // { path: 'form2', component: Form2, name: '综合form2' }
       ]
     },
     // {

src/styles/element-ui.scss

@@ -59,3 +59,25 @@
   margin: 0 auto;
 }
 
+
+//文章页textarea修改样式
+.article-textarea {
+  textarea {
+    padding-right: 40px;
+    resize: none;
+    border: none;
+    border-radius: 0px;
+    border-bottom: 1px solid #bfcbd9;
+  }
+}
+
+//element ui upload
+.upload-container {
+  .el-upload {
+    width: 100%;
+    .el-upload-dragger {
+      width: 100%;
+      height: 200px;
+    }
+  }
+}

static/tinymce1.3/plugins/powerpaste/License.txt

-TinyMCE PowerPaste
-Copyright (C) 2015 Ephox Corporation
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with this program. If not, see <http://www.gnu.org/licenses/>.
\ No newline at end of file

static/tinymce1.3/plugins/powerpaste/css/editorcss.css

-.ephox-salmon-upload-image-container img
-{
-  opacity: 0.5
-}