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;
+    }
+  }
+}

src/views/example/form1.vue

+<template>
+  <div class="createPost-container">
+    <el-form class="form-container" :model="postForm" :rules="rules" ref="postForm">
+
+      <Sticky :className="'sub-navbar '+postForm.status">
+        <template v-if="fetchSuccess">
+          <div style="display:inline-block">
+
+            <el-dropdown trigger="click">
+              <el-button>{{!postForm.comment_disabled?'评论已打开':'评论已关闭'}}<i class="el-icon-caret-bottom el-icon--right"></i></el-button>
+              <el-dropdown-menu class="no-padding no-hover" slot="dropdown">
+                <el-dropdown-item>
+                  <el-radio-group style="padding: 10px;" v-model="postForm.comment_disabled">
+                    <el-radio :label="true">关闭评论</el-radio>
+                    <el-radio :label="false">打开评论</el-radio>
+                  </el-radio-group>
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </div>
+
+          <el-dropdown trigger="click">
+            <el-button>
+              平台<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="postForm.platforms" style="padding: 5px 15px;">
+                <el-checkbox v-for="item in platformsOptions" :label="item.key" :key="item.key">
+                  {{item.name}}
+                </el-checkbox>
+              </el-checkbox-group>
+            </el-dropdown-menu>
+          </el-dropdown>
+
+          <el-dropdown trigger="click">
+            <el-button>
+              外链<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-form-item label-width="0px" style="margin-bottom: 0px" prop="source_uri">
+                <el-input placeholder="请输入内容" v-model="postForm.source_uri">
+                  <template slot="prepend">填写url</template>
+                </el-input>
+              </el-form-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+
+          <el-button v-loading="loading" style="margin-left: 10px;" type="success" @click="submitForm()">发布
+          </el-button>
+          <el-button v-loading="loading" type="warning" @click="draftForm">草稿</el-button>
+
+        </template>
+        <template v-else>
+          <el-tag>发送异常错误,刷新页面,或者联系程序员</el-tag>
+        </template>
+
+      </Sticky>
+
+      <div class="createPost-main-container">
+        <el-row>
+          <el-col :span="21">
+            <el-form-item style="margin-bottom: 40px;" prop="title">
+              <MDinput name="name" v-model="postForm.title" required :maxlength="100">
+                标题
+              </MDinput>
+              <span v-show="postForm.title.length>=26" class='title-prompt'>app可能会显示不全</span>
+            </el-form-item>
+
+            <div class="postInfo-container">
+              <el-row>
+                <el-col :span="8">
+                  <el-form-item label-width="45px" label="作者:" class="postInfo-container-item">
+                    <multiselect v-model="postForm.author" :options="userLIstOptions" @search-change="getRemoteUserList" placeholder="搜索用户" selectLabel="选择"
+                      deselectLabel="删除" track-by="key" :internalSearch="false" label="key">
+                      <span slot='noResult'>无结果</span>
+                    </multiselect>
+                  </el-form-item>
+                </el-col>
+
+                <el-col :span="8">
+                  <el-tooltip class="item" effect="dark" content="将替换作者" placement="top">
+                    <el-form-item label-width="50px" label="来源:" class="postInfo-container-item">
+                      <el-input placeholder="将替换作者" style='min-width:150px;' v-model="postForm.source_name">
+                      </el-input>
+                    </el-form-item>
+                  </el-tooltip>
+                </el-col>
+
+                <el-col :span="8">
+                  <el-form-item label-width="80px" label="发布时间:" class="postInfo-container-item">
+                    <el-date-picker v-model="postForm.display_time" type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间">
+                    </el-date-picker>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </div>
+          </el-col>
+        </el-row>
+
+        <el-form-item style="margin-bottom: 40px;" label-width="45px" label="摘要:">
+          <el-input type="textarea" class="article-textarea" :rows="1" autosize placeholder="请输入内容" v-model="postForm.content_short">
+          </el-input>
+          <span class="word-counter" v-show="contentShortLength">{{contentShortLength}}字</span>
+        </el-form-item>
+
+        <div class="editor-container">
+          <Tinymce :height=400 ref="editor" v-model="postForm.content"></Tinymce>
+        </div>
+
+        <div style="margin-bottom: 20px;">
+          <Upload v-model="postForm.image_uri"></Upload>
+        </div>
+      </div>
+    </el-form>
+
+  </div>
+</template>
+
+<script>
+    import Tinymce from 'components/Tinymce'
+    import Upload from 'components/Upload/singleImage3'
+    import MDinput from 'components/MDinput';
+    import { validateURL } from 'utils/validate';
+    import { getArticle } from 'api/article';
+    import { userSearch } from 'api/remoteSearch';
+
+    export default {
+      name: 'articleDetail',
+      components: { Tinymce, MDinput, Upload },
+      data() {
+        const validateRequire = (rule, value, callback) => {
+          if (value === '') {
+            this.$message({
+              message: rule.field + '为必传项',
+              type: 'error'
+            });
+            callback(null)
+          } else {
+            callback()
+          }
+        };
+        const validateSourceUri = (rule, value, callback) => {
+          if (value) {
+            if (validateURL(value)) {
+              callback()
+            } else {
+              this.$message({
+                message: '外链url填写不正确',
+                type: 'error'
+              });
+              callback(null)
+            }
+          } else {
+            callback()
+          }
+        };
+        return {
+          postForm: {
+            title: '', // 文章题目
+            content: '', // 文章内容
+            content_short: '', // 文章摘要
+            source_uri: '', // 文章外链
+            image_uri: '', // 文章图片
+            source_name: '', // 文章外部作者
+            display_time: undefined, // 前台展示时间
+            id: undefined,
+            platforms: ['a-platform']
+          },
+          fetchSuccess: true,
+          loading: false,
+          userLIstOptions: [],
+          platformsOptions: [
+            { key: 'a-platform', name: 'a-platform' },
+            { key: 'b-platform', name: 'b-platform' },
+            { key: 'c-platform', name: 'c-platform' }
+          ],
+          rules: {
+            image_uri: [{ validator: validateRequire }],
+            title: [{ validator: validateRequire }],
+            content: [{ validator: validateRequire }],
+            source_uri: [{ validator: validateSourceUri, trigger: 'blur' }]
+          }
+        }
+      },
+      computed: {
+        contentShortLength() {
+          return this.postForm.content_short.length
+        }
+      },
+      created() {
+        this.fetchData();
+      },
+      methods: {
+        fetchData() {
+          getArticle().then(response => {
+            this.postForm = response.data;
+          }).catch(err => {
+            this.fetchSuccess = false;
+            console.log(err);
+          });
+        },
+        submitForm() {
+          this.postForm.display_time = parseInt(this.display_time / 1000);
+          console.log(this.postForm)
+          this.$refs.postForm.validate(valid => {
+            if (valid) {
+              this.loading = true;
+              this.$notify({
+                title: '成功',
+                message: '发布文章成功',
+                type: 'success',
+                duration: 2000
+              });
+              this.postForm.status = 'published';
+              this.loading = false;
+            } else {
+              console.log('error submit!!');
+              return false;
+            }
+          });
+        },
+        draftForm() {
+          if (this.postForm.content.length === 0 || this.postForm.title.length === 0) {
+            this.$message({
+              message: '请填写必要的标题和内容',
+              type: 'warning'
+            });
+            return;
+          }
+          this.$message({
+            message: '保存成功',
+            type: 'success',
+            showClose: true,
+            duration: 1000
+          });
+          this.postForm.status = 'draft';
+        },
+        getRemoteUserList(query) {
+          userSearch(query).then(response => {
+            if (!response.items) return;
+            console.log(response)
+            this.userLIstOptions = response.items.map(v => ({
+              key: v.name
+            }));
+          })
+        }
+      }
+    }
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "src/styles/mixin.scss";
+  .title-prompt{
+    position: absolute;
+    right: 0px;
+    font-size: 12px;
+    top:10px;
+    color:#ff4949;
+  }
+  .createPost-container {
+    position: relative;
+    .createPost-main-container {
+      padding: 40px 45px 20px 50px;
+      .postInfo-container {
+        position: relative;
+        @include clearfix;
+        margin-bottom: 10px;
+        .postInfo-container-item {
+          float: left;
+        }
+      }
+      .editor-container {
+        min-height: 500px;
+        margin: 0 0 30px;
+        .editor-upload-btn-container {
+            text-align: right;
+            margin-right: 10px;
+            .editor-upload-btn {
+                display: inline-block;
+            }
+        }
+      }
+    }
+    .word-counter {
+      width: 40px;
+      position: absolute;
+      right: -10px;
+      top: 0px;
+    }
+  }
+</style>
+

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
-}