|
|
@@ -0,0 +1,391 @@
|
|
|
+<template>
|
|
|
+ <div class="editor">
|
|
|
+ <el-input v-model="title" class="title" placeholder="请输入文章标题" :maxlength="50"></el-input>
|
|
|
+ <el-input v-model="subTitle" class="sub-title" placeholder="请输入导语（选填）" :maxlength="300"></el-input>
|
|
|
+ <div class="quill-editor" v-model="content" v-quill:myQuillEditor="editorOption"></div>
|
|
|
+ <input type="file" id="imgInput" @change="handleContentFileChange" style="display: none;" />
|
|
|
+ <h5 class="label">封面图</h5>
|
|
|
+ <el-upload
|
|
|
+ action="#"
|
|
|
+ list-type="picture-card"
|
|
|
+ :file-list="fileList"
|
|
|
+ :multiple="false"
|
|
|
+ accept="image/png, image/jpeg"
|
|
|
+ :before-upload="handleFileChange"
|
|
|
+ :http-request="handleFileUpload"
|
|
|
+ >
|
|
|
+ <i slot="default" class="el-icon-plus"></i>
|
|
|
+ <div slot="file" slot-scope="{file}">
|
|
|
+ <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
|
|
|
+ <span class="el-upload-list__item-actions">
|
|
|
+ <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
|
|
|
+ <i class="el-icon-zoom-in"></i>
|
|
|
+ </span>
|
|
|
+ <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
|
|
|
+ <i class="el-icon-download"></i>
|
|
|
+ </span>
|
|
|
+ <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
|
|
|
+ <i class="el-icon-delete"></i>
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div slot="tip" class="el-upload__tip">建议尺寸:700*480，大小在500k以内</div>
|
|
|
+ </el-upload>
|
|
|
+ <el-dialog :visible.sync="dialogVisible">
|
|
|
+ <img width="100%" :src="cover_url" alt />
|
|
|
+ </el-dialog>
|
|
|
+ <h5 class="label">选择分类</h5>
|
|
|
+ <el-select v-model="categoryId" placeholder="请选择文章分类" class="class">
|
|
|
+ <el-option
|
|
|
+ v-for="item in categoryList"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ <h5 class="label">标签</h5>
|
|
|
+ <el-select
|
|
|
+ class="tags"
|
|
|
+ v-model="tags"
|
|
|
+ multiple
|
|
|
+ filterable
|
|
|
+ allow-create
|
|
|
+ default-first-option
|
|
|
+ placeholder="每个标签以逗号隔开、最多5个，如：技术,经验"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in tagOptions"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ <footer>
|
|
|
+ <el-button type="primary" @click="publish">发布</el-button>
|
|
|
+ <el-button @click="cancel">取消</el-button>
|
|
|
+ </footer>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import Vue from "vue";
|
|
|
+import "quill/dist/quill.core.css";
|
|
|
+import "quill/dist/quill.snow.css";
|
|
|
+// import 'quill/dist/quill.bubble.css'
|
|
|
+if (process.browser) {
|
|
|
+ const VueQuillEditor = require("vue-quill-editor/dist/ssr");
|
|
|
+ Vue.use(VueQuillEditor);
|
|
|
+}
|
|
|
+import hljs from "hljs";
|
|
|
+export default {
|
|
|
+ head() {
|
|
|
+ return {
|
|
|
+ script: []
|
|
|
+ };
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ // quillEditor
|
|
|
+ // Editor
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ topicId: "", // 编辑
|
|
|
+ title: "",
|
|
|
+ subTitle: "",
|
|
|
+ content: "",
|
|
|
+ cover_url: "",
|
|
|
+ tags: [],
|
|
|
+ categoryId: "",
|
|
|
+ dialogVisible: false,
|
|
|
+ disabled: false,
|
|
|
+ categoryList: [
|
|
|
+ {
|
|
|
+ value: "default",
|
|
|
+ label: "推荐"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ fileList: [],
|
|
|
+ tagOptions: [
|
|
|
+ {
|
|
|
+ value: "HTML",
|
|
|
+ label: "HTML"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "CSS",
|
|
|
+ label: "CSS"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "JavaScript",
|
|
|
+ label: "JavaScript"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ uploading: false,
|
|
|
+ editorOption: {
|
|
|
+ theme: "snow",
|
|
|
+ placeholder: "请输入正文...",
|
|
|
+ modules: {
|
|
|
+ toolbar: [
|
|
|
+ ["bold", "italic", "underline", "strike"],
|
|
|
+ ["blockquote", "code-block"],
|
|
|
+ [{ header: 1 }, { header: 2 }],
|
|
|
+ [{ list: "ordered" }, { list: "bullet" }],
|
|
|
+ [{ script: "sub" }, { script: "super" }],
|
|
|
+ [{ indent: "-1" }, { indent: "+1" }],
|
|
|
+ [{ direction: "rtl" }],
|
|
|
+ [{ size: ["small", false, "large", "huge"] }],
|
|
|
+ [{ header: [1, 2, 3, 4, 5, 6, false] }],
|
|
|
+ [{ font: [] }],
|
|
|
+ [{ color: [] }, { background: [] }],
|
|
|
+ [{ align: [] }],
|
|
|
+ ["clean"],
|
|
|
+ ["link", "image"]
|
|
|
+ ],
|
|
|
+ syntax: {
|
|
|
+ highlight: text => hljs.highlightAuto(text).value
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ mounted() {
|
|
|
+ this.needLogin();
|
|
|
+ this.loadData();
|
|
|
+ this.$axios.$post(`/api/community/topic/get_category`).then(res => {
|
|
|
+ if (res.status === 1) {
|
|
|
+ this.categoryList = res.data.map(it => ({
|
|
|
+ value: it.id,
|
|
|
+ label: it.name
|
|
|
+ }));
|
|
|
+ }
|
|
|
+ });
|
|
|
+ console.log(this.myQuillEditor);
|
|
|
+ // 为图片ICON绑定事件 getModule 为编辑器的内部属性
|
|
|
+ this.myQuillEditor
|
|
|
+ .getModule("toolbar")
|
|
|
+ .addHandler("image", this.imgHandler);
|
|
|
+ // this.myQuillEditor
|
|
|
+ // .getModule("toolbar")
|
|
|
+ // .addHandler("video", this.videoHandler); // 为视频ICON绑定事件
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ loadData() {
|
|
|
+ const data = {
|
|
|
+ topicId: this.$route.params.id
|
|
|
+ };
|
|
|
+ this.$axios
|
|
|
+ .$post(`/api/community/topic/get_edit_topic`, data)
|
|
|
+ .then(res => {
|
|
|
+ console.log(res);
|
|
|
+ const topic = res.data;
|
|
|
+ if (topic) {
|
|
|
+ this.cover_url = topic.cover_url;
|
|
|
+ this.topicId = topic.id;
|
|
|
+ this.title = topic.title;
|
|
|
+ this.intro = topic.intro;
|
|
|
+ this.content = topic.body;
|
|
|
+ this.tags = topic.label.split(',');
|
|
|
+ this.categoryId = topic.category_id;
|
|
|
+ if (this.cover_url) {
|
|
|
+ this.fileList.push({
|
|
|
+ name: 'cover_image',
|
|
|
+ url: this.cover_url
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // TODO go details
|
|
|
+ });
|
|
|
+ },
|
|
|
+ publish() {
|
|
|
+ if (!this.title) {
|
|
|
+ this.$message.error("请输入文章标题");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!this.categoryId) {
|
|
|
+ this.$message.error("请选择文章分类");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (this.tags.length > 5) {
|
|
|
+ this.$message.error("标签最多可填写5个标签，请删减");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (this.content.length > 100000) {
|
|
|
+ this.$message.error("文章正文不可超过10万字符，请删减");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const data = {
|
|
|
+ title: this.title,
|
|
|
+ intro: this.subTitle,
|
|
|
+ body: this.content,
|
|
|
+ categoryId: this.categoryId,
|
|
|
+ label: this.tags.join(",").slice(0, -1),
|
|
|
+ cover_url: this.cover_url
|
|
|
+ };
|
|
|
+ if (this.topicId) {
|
|
|
+ data.topicId = this.topicId;
|
|
|
+ this.$axios
|
|
|
+ .$post(`/api/community/topic/update_topic`, data)
|
|
|
+ .then(res => {
|
|
|
+ console.log(res);
|
|
|
+ this.$message.success("编辑成功！");
|
|
|
+ // TODO go details
|
|
|
+ window.location.href = `/p/${this.topicId}.html`;
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.$axios
|
|
|
+ .$post(`/api/community/topic/create_topic`, data)
|
|
|
+ .then(res => {
|
|
|
+ console.log(res);
|
|
|
+ this.$message.success("发布成功！");
|
|
|
+ // TODO go details
|
|
|
+ window.location.href = `/p/${res.data.topicId}.html`;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ cancel() {
|
|
|
+ this.$router.back();
|
|
|
+ },
|
|
|
+ // 点击图片ICON触发事件
|
|
|
+ imgHandler(state) {
|
|
|
+ this.addRange = this.myQuillEditor.getSelection();
|
|
|
+ if (state) {
|
|
|
+ let fileInput = document.getElementById("imgInput");
|
|
|
+ fileInput.click(); // 加一个触发事件
|
|
|
+ }
|
|
|
+ this.uploadType = "image";
|
|
|
+ },
|
|
|
+
|
|
|
+ // 点击视频ICON触发事件
|
|
|
+ videoHandler(state) {
|
|
|
+ this.addRange = this.myQuillEditor.getSelection();
|
|
|
+ if (state) {
|
|
|
+ let fileInput = document.getElementById("imgInput");
|
|
|
+ fileInput.click(); // 加一个触发事件
|
|
|
+ }
|
|
|
+ // this.uploadType = "video";
|
|
|
+ },
|
|
|
+ handleContentFileChange(e) {
|
|
|
+ const file = e.target.files[0];
|
|
|
+ if (file.size / 1024 > 500) {
|
|
|
+ this.$message.error("图片大小不得超过500k，请重新选择");
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ const formData = new FormData();
|
|
|
+ formData.append('file', file);
|
|
|
+ formData.append('original_filename', file.name)
|
|
|
+ this.$axios
|
|
|
+ .$post(`/upload_image`, formData, { headers: { 'Content-Type': 'multipart/form-data' } })
|
|
|
+ .then(res => {
|
|
|
+ this.content += `<img src="${res.filename}" alt="${file.name}"/>`;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleFileChange(file) {
|
|
|
+ console.log(file);
|
|
|
+ if (file.size / 1024 > 500) {
|
|
|
+ this.$message.error("图片大小不得超过500k，请重新选择");
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ const formData = new FormData();
|
|
|
+ formData.append('target', '{ "type": 3 }');
|
|
|
+ formData.append('id', 'WU_FILE_0');
|
|
|
+ formData.append('name', file.name);
|
|
|
+ formData.append('type', file.type);
|
|
|
+ formData.append('lastModifiedDate', file.lastModifiedDate);
|
|
|
+ formData.append('size', file.size);
|
|
|
+ formData.append('file', file);
|
|
|
+ this.$axios
|
|
|
+ .$post(`/file/proxyUpload`, formData, { headers: { 'Content-Type': 'multipart/form-data' } })
|
|
|
+ .then(res => {
|
|
|
+ this.cover_url = res.data && res.data.url || '';
|
|
|
+ this.fileList = [{
|
|
|
+ name: 'file.name',
|
|
|
+ url: this.cover_url
|
|
|
+ }];
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleFileUpload(...arge) {
|
|
|
+ console.log(arge);
|
|
|
+ },
|
|
|
+ onEditorChange(event) {
|
|
|
+ console.log("onEditorChange", event);
|
|
|
+ },
|
|
|
+ handleRemove(file) {
|
|
|
+ console.log(file);
|
|
|
+ },
|
|
|
+ handlePictureCardPreview(file) {
|
|
|
+ this.cover_url = file.url;
|
|
|
+ this.dialogVisible = true;
|
|
|
+ },
|
|
|
+ handleDownload(file) {
|
|
|
+ console.log(file);
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+.editor {
|
|
|
+ position: relative;
|
|
|
+ padding: 20px;
|
|
|
+ width: 740px;
|
|
|
+ background: #fff;
|
|
|
+ .title,
|
|
|
+ .sub-title {
|
|
|
+ .el-input__inner {
|
|
|
+ padding: 0;
|
|
|
+ border: 0;
|
|
|
+ border-radius: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ margin: 10px auto 20px;
|
|
|
+ font-size: 28px;
|
|
|
+ font-family: PingFangSC-Medium;
|
|
|
+ font-weight: 500;
|
|
|
+ color: rgba(29, 42, 58, 1);
|
|
|
+ line-height: 40px;
|
|
|
+ }
|
|
|
+ .sub-title {
|
|
|
+ margin-bottom: 28px;
|
|
|
+ height: 18px;
|
|
|
+ font-size: 13px;
|
|
|
+ font-family: PingFangSC-Regular;
|
|
|
+ font-weight: 400;
|
|
|
+ color: rgba(145, 154, 167, 1);
|
|
|
+ line-height: 18px;
|
|
|
+ border-left: 2px solid #0093fd;
|
|
|
+ .el-input__inner {
|
|
|
+ height: 18px;
|
|
|
+ line-height: 18px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .label {
|
|
|
+ margin: 20px auto 10px;
|
|
|
+ font-size: 13px;
|
|
|
+ font-family: PingFangSC-Medium;
|
|
|
+ font-weight: 500;
|
|
|
+ color: rgba(25, 34, 46, 1);
|
|
|
+ line-height: 18px;
|
|
|
+ }
|
|
|
+ .quill-editor {
|
|
|
+ min-height: 450px;
|
|
|
+ }
|
|
|
+ .ql-snow.ql-toolbar::after {
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+ .class {
|
|
|
+ width: 320px;
|
|
|
+ }
|
|
|
+ .tags {
|
|
|
+ width: 560px;
|
|
|
+ }
|
|
|
+ footer {
|
|
|
+ margin: 40px 0;
|
|
|
+ button {
|
|
|
+ width: 100px;
|
|
|
+ height: 40px;
|
|
|
+ border-radius: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
arvin