增加文章编辑器
This commit is contained in:
zyy
parent
02241f455a
commit
af9eb2c8b6
183
package.json
183
package.json
@ -1,93 +1,94 @@
|
||||
{
|
||||
"name": "vue-admin-template",
|
||||
"version": "4.1.0",
|
||||
"description": "A vue admin template with Element UI & axios & iconfont & permission control & lint",
|
||||
"author": "Pan <panfree23@gmail.com>",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"start": "vue-cli-service serve --open",
|
||||
"dev": "node --max_old_space_size=4096 node_modules/@vue/cli-service/bin/vue-cli-service.js serve",
|
||||
"build": "vue-cli-service build --mode production",
|
||||
"test": "vue-cli-service build --mode staging",
|
||||
"local": "vue-cli-service build --mode",
|
||||
"preview": "node build/index.js --preview",
|
||||
"lint": "eslint --ext .js,.vue src",
|
||||
"test:unit": "jest --clearCache && vue-cli-service test:unit",
|
||||
"test:ci": "npm run lint && npm run test:unit",
|
||||
"svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "0.18.0",
|
||||
"echarts": "^4.7.0",
|
||||
"element-ui": "^2.12.0",
|
||||
"file-saver": "^1.3.3",
|
||||
"js-cookie": "2.2.0",
|
||||
"js-md5": "^0.7.3",
|
||||
"lodash": "^4.17.11",
|
||||
"normalize.css": "7.0.0",
|
||||
"nprogress": "^0.2.0",
|
||||
"path-to-regexp": "2.4.0",
|
||||
"qrcode.vue": "^1.6.2",
|
||||
"qs": "^6.9.3",
|
||||
"quill-emoji": "^0.1.8",
|
||||
"quill-image-extend-module": "^1.1.2",
|
||||
"recordrtc": "^5.5.9",
|
||||
"script-loader": "^0.7.2",
|
||||
"sessionstorage": "^0.1.0",
|
||||
"stompjs": "^2.3.3",
|
||||
"storejs": "^1.0.25",
|
||||
"three": "^0.107.0",
|
||||
"video.js": "^7.8.4",
|
||||
"vue": "^2.6.10",
|
||||
"vue-i18n": "^8.12.0",
|
||||
"vue-quill-editor": "^3.0.6",
|
||||
"vue-router": "^3.1.6",
|
||||
"vuedraggable": "^2.24.3",
|
||||
"vuex": "^3.1.0",
|
||||
"xlsx": "^0.14.2",
|
||||
"zrender": "^4.0.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "7.0.0",
|
||||
"@babel/register": "7.0.0",
|
||||
"@vue/cli-plugin-babel": "3.6.0",
|
||||
"@vue/cli-plugin-eslint": "3.6.0",
|
||||
"@vue/cli-plugin-unit-jest": "3.6.3",
|
||||
"@vue/cli-service": "3.6.0",
|
||||
"@vue/test-utils": "1.0.0-beta.29",
|
||||
"autoprefixer": "^9.5.1",
|
||||
"babel-core": "7.0.0-bridge.0",
|
||||
"babel-eslint": "10.0.1",
|
||||
"babel-jest": "23.6.0",
|
||||
"babel-plugin-syntax-dynamic-import": "^6.18.0",
|
||||
"babel-preset-env": "1.6.1",
|
||||
"babel-preset-stage-2": "6.24.1",
|
||||
"chalk": "2.4.2",
|
||||
"compression-webpack-plugin": "^3.1.0",
|
||||
"connect": "3.6.6",
|
||||
"copy-webpack-plugin": "^4.5.2",
|
||||
"eslint": "5.15.3",
|
||||
"eslint-plugin-vue": "5.2.2",
|
||||
"file-loader": "^3.0.1",
|
||||
"html-webpack-plugin": "3.2.0",
|
||||
"mockjs": "1.0.1-beta3",
|
||||
"node-sass": "^4.9.0",
|
||||
"runjs": "^4.3.2",
|
||||
"sass-loader": "^7.1.0",
|
||||
"script-ext-html-webpack-plugin": "2.1.3",
|
||||
"script-loader": "^0.7.2",
|
||||
"serve-static": "^1.13.2",
|
||||
"svg-sprite-loader": "4.1.3",
|
||||
"svgo": "1.2.2",
|
||||
"vue-template-compiler": "^2.6.11"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8.9",
|
||||
"npm": ">= 3.0.0"
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"not ie <= 8"
|
||||
]
|
||||
"name": "vue-admin-template",
|
||||
"version": "4.1.0",
|
||||
"description": "A vue admin template with Element UI & axios & iconfont & permission control & lint",
|
||||
"author": "Pan <panfree23@gmail.com>",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"start": "vue-cli-service serve --open",
|
||||
"dev": "node --max_old_space_size=4096 node_modules/@vue/cli-service/bin/vue-cli-service.js serve",
|
||||
"build": "vue-cli-service build --mode production",
|
||||
"test": "vue-cli-service build --mode staging",
|
||||
"local": "vue-cli-service build --mode",
|
||||
"preview": "node build/index.js --preview",
|
||||
"lint": "eslint --ext .js,.vue src",
|
||||
"test:unit": "jest --clearCache && vue-cli-service test:unit",
|
||||
"test:ci": "npm run lint && npm run test:unit",
|
||||
"svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "0.18.0",
|
||||
"echarts": "^4.7.0",
|
||||
"element-ui": "^2.12.0",
|
||||
"file-saver": "^1.3.3",
|
||||
"js-cookie": "2.2.0",
|
||||
"js-md5": "^0.7.3",
|
||||
"lodash": "^4.17.11",
|
||||
"normalize.css": "7.0.0",
|
||||
"nprogress": "^0.2.0",
|
||||
"path-to-regexp": "2.4.0",
|
||||
"qrcode.vue": "^1.6.2",
|
||||
"qs": "^6.9.3",
|
||||
"quill-emoji": "^0.1.8",
|
||||
"quill-image-extend-module": "^1.1.2",
|
||||
"recordrtc": "^5.5.9",
|
||||
"script-loader": "^0.7.2",
|
||||
"sessionstorage": "^0.1.0",
|
||||
"stompjs": "^2.3.3",
|
||||
"storejs": "^1.0.25",
|
||||
"three": "^0.107.0",
|
||||
"video.js": "^7.8.4",
|
||||
"vue": "^2.6.10",
|
||||
"vue-i18n": "^8.12.0",
|
||||
"vue-quill-editor": "^3.0.6",
|
||||
"vue-router": "^3.1.6",
|
||||
"vuedraggable": "^2.24.3",
|
||||
"vuex": "^3.1.0",
|
||||
"wangeditor": "^4.6.17",
|
||||
"xlsx": "^0.14.2",
|
||||
"zrender": "^4.0.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "7.0.0",
|
||||
"@babel/register": "7.0.0",
|
||||
"@vue/cli-plugin-babel": "3.6.0",
|
||||
"@vue/cli-plugin-eslint": "3.6.0",
|
||||
"@vue/cli-plugin-unit-jest": "3.6.3",
|
||||
"@vue/cli-service": "3.6.0",
|
||||
"@vue/test-utils": "1.0.0-beta.29",
|
||||
"autoprefixer": "^9.5.1",
|
||||
"babel-core": "7.0.0-bridge.0",
|
||||
"babel-eslint": "10.0.1",
|
||||
"babel-jest": "23.6.0",
|
||||
"babel-plugin-syntax-dynamic-import": "^6.18.0",
|
||||
"babel-preset-env": "1.6.1",
|
||||
"babel-preset-stage-2": "6.24.1",
|
||||
"chalk": "2.4.2",
|
||||
"compression-webpack-plugin": "^3.1.0",
|
||||
"connect": "3.6.6",
|
||||
"copy-webpack-plugin": "^4.5.2",
|
||||
"eslint": "5.15.3",
|
||||
"eslint-plugin-vue": "5.2.2",
|
||||
"file-loader": "^3.0.1",
|
||||
"html-webpack-plugin": "3.2.0",
|
||||
"mockjs": "1.0.1-beta3",
|
||||
"node-sass": "^4.9.0",
|
||||
"runjs": "^4.3.2",
|
||||
"sass-loader": "^7.1.0",
|
||||
"script-ext-html-webpack-plugin": "2.1.3",
|
||||
"script-loader": "^0.7.2",
|
||||
"serve-static": "^1.13.2",
|
||||
"svg-sprite-loader": "4.1.3",
|
||||
"svgo": "1.2.2",
|
||||
"vue-template-compiler": "^2.6.11"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8.9",
|
||||
"npm": ">= 3.0.0"
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"not ie <= 8"
|
||||
]
|
||||
}
|
||||
|
||||
68
src/api/editor.js
Normal file
68
src/api/editor.js
Normal file
@ -0,0 +1,68 @@
|
||||
import request from '@/utils/request';
|
||||
// 获取文章列表
|
||||
export function getDoc() {
|
||||
return request({
|
||||
url: `/api/doc`,
|
||||
method: 'get'
|
||||
});
|
||||
}
|
||||
// 获取发布内容
|
||||
export function getDocById(id) {
|
||||
return request({
|
||||
url: `/api/doc/${id}`,
|
||||
method: 'get'
|
||||
});
|
||||
}
|
||||
// 获取草稿列表
|
||||
export function getDocDraft() {
|
||||
return request({
|
||||
url: `/api/doc/draft`,
|
||||
method: 'get'
|
||||
});
|
||||
}
|
||||
// 创建
|
||||
export function postDocDraft(data) {
|
||||
return request({
|
||||
url: `/api/doc/draft`,
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
}
|
||||
// 获取草稿数据id
|
||||
export function getDocDraftById(id) {
|
||||
return request({
|
||||
url: `/api/doc/draft/${id}`,
|
||||
method: 'get'
|
||||
});
|
||||
}
|
||||
// 更新草稿数据
|
||||
export function putDocDraftById(id, data) {
|
||||
return request({
|
||||
url: `/api/doc/draft/${id}`,
|
||||
method: 'put',
|
||||
data
|
||||
});
|
||||
}
|
||||
// 删除草稿数据
|
||||
export function deleteDocDraftById(id) {
|
||||
return request({
|
||||
url: `/api/doc/draft/${id}`,
|
||||
method: 'delete'
|
||||
});
|
||||
}
|
||||
// 保存内容根据id
|
||||
export function putDocDraftByIdData(id, data) {
|
||||
return request({
|
||||
url: `/api/doc/draft/${id}/data`,
|
||||
method: 'put',
|
||||
data
|
||||
});
|
||||
}
|
||||
// 草稿发布
|
||||
export function putDocDraftByIdPublish(id) {
|
||||
return request({
|
||||
url: `/api/doc/draft/${id}/publish`,
|
||||
method: 'put'
|
||||
});
|
||||
}
|
||||
|
||||
25
src/api/upload.js
Normal file
25
src/api/upload.js
Normal file
@ -0,0 +1,25 @@
|
||||
import request from '@/utils/request';
|
||||
|
||||
export const productIdentify = '00001&appSecret=joylink00001';
|
||||
|
||||
export const pictureUrl = `/api/upload/PICTURE?appId=${productIdentify}`;
|
||||
// export const modelUrl = `/api/upload/model?appId=${productIdentify}`;
|
||||
|
||||
// export const attachmentUrl = `/api/upload/attachment?appId=${productIdentify}`;
|
||||
// export const meansUrl = `/api/upload/means?appId=${productIdentify}`;
|
||||
// export const regulationUrl = `/api/upload/regulation?appId=${productIdentify}`;
|
||||
|
||||
export function getUrl(relatedUrl) {
|
||||
return `${process.env.VUE_APP_UPLOAD_API}${relatedUrl}`;
|
||||
}
|
||||
|
||||
export function uploadFile(url, data) {
|
||||
return request({
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data'
|
||||
},
|
||||
url,
|
||||
method: 'post',
|
||||
data: data
|
||||
});
|
||||
}
|
||||
@ -4,6 +4,9 @@ export default {
|
||||
designhomePage: '公共地图',
|
||||
designUserPage: '个人地图',
|
||||
newDesignUserPage: '地图绘制',
|
||||
newDesignEditor: '编辑器',
|
||||
newDesignEditorList: '图文列表',
|
||||
newDesignDraftEditorList: '文章草稿',
|
||||
|
||||
mapManage: '地图管理',
|
||||
skinManage: '皮肤管理',
|
||||
|
||||
@ -172,6 +172,10 @@ const VoiceTraining = () => import('@/views/system/voiceTraining/index');
|
||||
const SceneTrainingResult = () => import('@/views/drts/scene/trainingResult');
|
||||
const SceneVoiceTraining = () => import('@/views/drts/scene/voiceTraining');
|
||||
|
||||
const Ueditor = () => import('@/views/editor/index');
|
||||
const UeditorList = () => import('@/views/editor/list');
|
||||
const UeditorDraftList = () => import('@/views/editor/listDraft');
|
||||
|
||||
// import { GenerateRouteProjectList } from '@/scripts/ProjectConfig';
|
||||
// import { getSessionStorage } from '@/utils/auth';
|
||||
|
||||
@ -1132,6 +1136,37 @@ export const asyncRouter = [
|
||||
// }
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/editor',
|
||||
component: Layout,
|
||||
meta: {
|
||||
i18n: 'router.newDesignEditor',
|
||||
roles: [admin, user]
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'list',
|
||||
component: UeditorList,
|
||||
meta: {
|
||||
i18n: 'router.newDesignEditorList'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'listDraft',
|
||||
component: UeditorDraftList,
|
||||
meta: {
|
||||
i18n: 'router.newDesignDraftEditorList'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '',
|
||||
component: Ueditor,
|
||||
meta: {
|
||||
i18n: 'router.newDesignEditor'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{ // 新个人地图
|
||||
path: '/design',
|
||||
component: Layout,
|
||||
|
||||
@ -2,8 +2,8 @@ export function getBaseUrl() {
|
||||
let BASE_API;
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
// BASE_API = 'https://joylink.club/jlcloud';
|
||||
BASE_API = 'https://test.joylink.club/jlcloud';
|
||||
// BASE_API = 'http://192.168.8.107:9000'; // 袁琪
|
||||
// BASE_API = 'https://test.joylink.club/jlcloud';
|
||||
BASE_API = 'http://192.168.3.119:9000'; // 袁琪
|
||||
// BASE_API = 'http://192.168.3.83:9000'; // 旭强 有线
|
||||
// BASE_API = 'http://192.168.8.114:9000'; // 旭强 无线
|
||||
// BASE_API = 'http://192.168.3.120:9000'; // 张赛
|
||||
|
||||
116
src/views/editor/edit.vue
Normal file
116
src/views/editor/edit.vue
Normal file
@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<el-dialog v-dialogDrag :title="title" :visible.sync="dialogVisible" width="30%" :before-close="handleClose" center>
|
||||
<data-form ref="dataform" :form="form" :form-model="formModel" :rules="rules" />
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="doSave">{{ $t('global.confirm') }}</el-button>
|
||||
<el-button @click="handleClose">{{ $t('global.cancel') }}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import { postOperateStepData, putOperateStepData, getPlaceholderList } from '@/api/management/operation';
|
||||
import { postDocDraft, getDocDraftById, putDocDraftById } from '@/api/editor';
|
||||
|
||||
export default {
|
||||
name: 'TrainingDetailEdit',
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
formModel: {
|
||||
id: '',
|
||||
title: ''
|
||||
},
|
||||
placeholderList: []
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
form() {
|
||||
// const isAdd = this.type === 'ADD';
|
||||
const form = {
|
||||
labelWidth: '80px',
|
||||
items: [
|
||||
{ prop: 'title', label: '标题', type: 'text', required: true }
|
||||
]
|
||||
};
|
||||
return form;
|
||||
},
|
||||
rules() {
|
||||
const crules = {
|
||||
title: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入文章标题',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
};
|
||||
return crules;
|
||||
},
|
||||
title() {
|
||||
if (this.type === 'ADD') {
|
||||
return '创建文章';
|
||||
} else {
|
||||
return '更新文章';
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async show(data) {
|
||||
this.dialogVisible = true;
|
||||
console.log(data);
|
||||
if (this.type != 'ADD') {
|
||||
const res = await getDocDraftById(data.id);
|
||||
this.formModel.title = res.data.title;
|
||||
this.formModel.id = data.id;
|
||||
} else {
|
||||
this.formModel.title = '';
|
||||
this.formModel.id = '';
|
||||
}
|
||||
},
|
||||
doSave() {
|
||||
const self = this;
|
||||
this.$refs.dataform.validateForm(() => {
|
||||
if (self.type === 'ADD') {
|
||||
self.create();
|
||||
} else {
|
||||
self.update();
|
||||
}
|
||||
});
|
||||
},
|
||||
create() {
|
||||
const self = this;
|
||||
postDocDraft(this.formModel).then(() => {
|
||||
self.$message.success('创建文章成功!');
|
||||
self.handleClose();
|
||||
self.$emit('reloadTable');
|
||||
}).catch(error => {
|
||||
self.$message.error(`创建文章失败:${error.message}`);
|
||||
});
|
||||
},
|
||||
update() {
|
||||
const self = this;
|
||||
putDocDraftById(this.formModel.id, this.formModel).then(() => {
|
||||
self.$message.success('更新文章成功!');
|
||||
self.handleClose();
|
||||
self.$emit('reloadTable');
|
||||
}).catch(error => {
|
||||
self.$message.error(`更新文章失败:${error.message}`);
|
||||
});
|
||||
},
|
||||
handleClose() {
|
||||
this.formModel = {
|
||||
title: ''
|
||||
};
|
||||
this.$refs.dataform.resetForm();
|
||||
this.dialogVisible = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
151
src/views/editor/index.vue
Normal file
151
src/views/editor/index.vue
Normal file
@ -0,0 +1,151 @@
|
||||
<template>
|
||||
<div id="wangeditor">
|
||||
<div ref="editorElem" style="text-align:left;" />
|
||||
<button v-if="draft" type="button" class="btn" @click="saveDraftTitle">保存</button>
|
||||
<!-- <button type="button" class="btn" @click="getEditorData">获取当前内容</button>
|
||||
<button type="button" class="btn" @click="setEditorData">设置当前内容</button>
|
||||
<h3>内容预览</h3>
|
||||
<div class="content_html1" v-html="editorContent" /> -->
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import E from 'wangeditor';
|
||||
import { uploadFile, pictureUrl } from '@/api/upload';
|
||||
import { putDocDraftByIdData, getDocDraftById } from '@/api/editor';
|
||||
|
||||
export default {
|
||||
name: 'Editor',
|
||||
// catchData是一个类似回调函数，来自父组件，当然也可以自己写一个函数，主要是用来获取富文本编辑器中的html内容用来传递给服务端
|
||||
// props: ['catchData'],
|
||||
data() {
|
||||
return {
|
||||
editor: null,
|
||||
formData: '',
|
||||
editorContent: ''
|
||||
};
|
||||
}, // 接收父组件的方法
|
||||
computed: {
|
||||
action() {
|
||||
return `${process.env.VUE_APP_UPLOAD_API}${pictureUrl}`;
|
||||
},
|
||||
draft() {
|
||||
return this.$route.query.draft;
|
||||
},
|
||||
docId() {
|
||||
return this.$route.query.docId;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.editor = new E(this.$refs.editorElem);
|
||||
this.editor.config.height = 450;
|
||||
|
||||
this.editor.config.uploadImgServer = '/upload-img';
|
||||
// 编辑器的事件，每次改变会获取其html内容
|
||||
this.editor.config.onchange = html => {
|
||||
this.editorContent = html;
|
||||
};
|
||||
|
||||
// this.editor.config.showLinkImg = false; // 隐藏插入网络图片的功能
|
||||
this.editor.config.uploadImgShowBase64 = true;
|
||||
const action = this.action;
|
||||
const that = this;
|
||||
this.editor.config.customUploadImg = function (resultFiles, insertImgFn) {
|
||||
that.formData = new FormData();
|
||||
resultFiles.forEach(file => {
|
||||
that.formData.append('file', file);
|
||||
});
|
||||
|
||||
uploadFile(action, that.formData).then(resp => {
|
||||
const imgUrl = process.env.VUE_APP_VOICE_API + resp.data;
|
||||
insertImgFn(imgUrl);
|
||||
}).catch(error => { console.log(error); });
|
||||
};
|
||||
|
||||
this.editor.config.menus = [
|
||||
// 菜单配置
|
||||
'head', // 标题
|
||||
'bold', // 粗体
|
||||
'fontSize', // 字号
|
||||
'fontName', // 字体
|
||||
'italic', // 斜体
|
||||
'underline', // 下划线
|
||||
'strikeThrough', // 删除线
|
||||
'indent',
|
||||
'lineHeight',
|
||||
'foreColor', // 文字颜色
|
||||
'backColor', // 背景颜色
|
||||
'link', // 插入链接
|
||||
'list', // 列表
|
||||
'justify', // 对齐方式
|
||||
'quote', // 引用
|
||||
'emoticon', // 表情
|
||||
'image', // 插入图片
|
||||
'table', // 表格
|
||||
'code', // 插入代码
|
||||
'splitLine',
|
||||
'undo', // 撤销
|
||||
'redo' // 重复
|
||||
];
|
||||
|
||||
this.editor.create(); // 创建富文本实例
|
||||
|
||||
this.handleEdit();
|
||||
},
|
||||
beforeDestroy() {
|
||||
// 调用销毁 API 对当前编辑器实例进行销毁
|
||||
this.editor.destroy();
|
||||
this.editor = null;
|
||||
},
|
||||
methods: {
|
||||
async handleEdit() {
|
||||
try {
|
||||
const res = await getDocDraftById(this.docId);
|
||||
this.editor && this.editor.txt.html(res.data.content); // 重新设置编辑器内容
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
|
||||
},
|
||||
saveDraftTitle() {
|
||||
const data = this.editor.txt.html();
|
||||
putDocDraftByIdData(this.docId, { content: data }).then(res => {
|
||||
this.$message.success('保存文章成功!');
|
||||
setTimeout(() => {
|
||||
this.$router.push({path : '/editor/listDraft'});
|
||||
}, 2000);
|
||||
}).catch(error => {
|
||||
this.$message.error(`保存失败:${error.message}`);
|
||||
});
|
||||
},
|
||||
getEditorData() {
|
||||
const data = this.editor.txt.html();
|
||||
console.log(data);
|
||||
},
|
||||
setEditorData() {
|
||||
const html = '<h1 id="gt6dj" style="text-align:center;">测试标题</h1><hr/><p data-we-empty-p="" style="text-align:center;"><img src="https://oss.joylink.club/oss/ddy/picture/2021-05-10/2720-44302.jpg" style="max-width:100%;" contenteditable="false" width="473" height="196.83"/><br/>工艺数据</p>';
|
||||
this.editor && this.editor.txt.html(html); // 重新设置编辑器内容
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
#wangeditor{
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.content_html {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
overflow: auto;
|
||||
background: red;
|
||||
}
|
||||
.content_html1{
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
overflow: auto;
|
||||
background: chartreuse;
|
||||
}
|
||||
</style>
|
||||
87
src/views/editor/list.vue
Normal file
87
src/views/editor/list.vue
Normal file
@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card>
|
||||
<el-form
|
||||
ref="queryForm"
|
||||
:model="formModel"
|
||||
size="small"
|
||||
style="padding: 6px 20px 6px 20px;overflow: hidden;"
|
||||
>
|
||||
<el-form-item label="标题" style="margin-bottom: 0;float: left; width: 300px;">
|
||||
<el-input v-model="formModel.title" style="width: 240px;" />
|
||||
</el-form-item>
|
||||
<el-button style="margin-right: 10px; float: right;" type="primary" size="small" @click="reloadTable">查询</el-button>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<el-table :data="tableData" border style="width: 100%">
|
||||
<el-table-column label="姓名">
|
||||
<template slot-scope="scope">
|
||||
<span style="margin-left: 10px">{{ scope.row.title }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="450">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="mini" @click="handleShow(scope.$index, scope.row)">查看</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-dialog
|
||||
title="文章"
|
||||
:visible.sync="dialogVisible"
|
||||
width="100%"
|
||||
top="0"
|
||||
:fullscreen="true"
|
||||
:before-close="beforeClose"
|
||||
>
|
||||
<div class="content_html1" v-html="editorContent" />
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="beforeClose">关闭</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getDoc, getDocById } from '@/api/editor';
|
||||
|
||||
export default {
|
||||
name: 'CacheControl',
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
formModel: {
|
||||
title: ''
|
||||
},
|
||||
dialogVisible: false,
|
||||
editorContent: ''
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.reloadTable();
|
||||
},
|
||||
methods: {
|
||||
handleShow(row, data) {
|
||||
console.log(data);
|
||||
this.dialogVisible = true;
|
||||
getDocById(data.id).then(res => {
|
||||
this.editorContent = res.data.content;
|
||||
}).catch(error => {
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
reloadTable() {
|
||||
this.tableData = [];
|
||||
getDoc().then(res => {
|
||||
this.tableData = res.data;
|
||||
}).catch(error => {
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
beforeClose() {
|
||||
this.dialogVisible = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
108
src/views/editor/listDraft.vue
Normal file
108
src/views/editor/listDraft.vue
Normal file
@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- <QueryListPage ref="queryListPage" :pager-config="pagerConfig" :query-form="queryForm" :query-list="queryList" /> -->
|
||||
<el-card>
|
||||
<el-form
|
||||
ref="queryForm"
|
||||
:model="formModel"
|
||||
size="small"
|
||||
style="padding: 6px 20px 6px 20px;overflow: hidden;"
|
||||
>
|
||||
<el-form-item label="标题" style="margin-bottom: 0;float: left; width: 300px;">
|
||||
<el-input v-model="formModel.title" style="width: 240px;" />
|
||||
</el-form-item>
|
||||
<el-button style="margin-right: 10px; float: right;" type="primary" size="small" @click="createTitle">创建</el-button>
|
||||
<el-button style="margin-right: 10px; float: right;" type="primary" size="small" @click="query">查询</el-button>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<el-table :data="tableData" border style="width: 100%">
|
||||
<el-table-column label="姓名">
|
||||
<template slot-scope="scope">
|
||||
<!-- <i class="el-icon-time" /> -->
|
||||
<span style="margin-left: 10px">{{ scope.row.title }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="450">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
|
||||
<el-button size="mini" @click="handleUpdate(scope.$index, scope.row)">更新</el-button>
|
||||
<el-button size="mini" @click="handlePublish(scope.$index, scope.row)">发布</el-button>
|
||||
<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<Edit ref="edits" type="ADD" @reloadTable="reloadTable" />
|
||||
<Edit ref="edit" type="EDIT" @reloadTable="reloadTable" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getDocDraft, putDocDraftByIdPublish, deleteDocDraftById } from '@/api/editor';
|
||||
import Edit from './edit';
|
||||
|
||||
export default {
|
||||
name: 'CacheControl',
|
||||
components: {
|
||||
Edit
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
formModel: {
|
||||
title: ''
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.query();
|
||||
},
|
||||
methods: {
|
||||
query() {
|
||||
this.reloadTable();
|
||||
},
|
||||
createTitle() {
|
||||
this.$refs.edits.show();
|
||||
},
|
||||
// 编辑
|
||||
handleEdit(row, data) {
|
||||
this.$router.push({path : '/editor', query: {docId: data.id, draft: 1}});
|
||||
},
|
||||
// 更新标题
|
||||
handleUpdate(row, data) {
|
||||
this.$refs.edit.show(data);
|
||||
},
|
||||
// 草稿发布
|
||||
handlePublish(row, data) {
|
||||
console.log(data);
|
||||
putDocDraftByIdPublish(data.id).then(res => {
|
||||
this.$message.success('创建文章成功!');
|
||||
this.reloadTable();
|
||||
}).catch(error => {
|
||||
this.$message.error(`发布失败: ${error.data}`);
|
||||
});
|
||||
},
|
||||
handleDelete(row, data) {
|
||||
this.$confirm('是否确认删除文章？', this.$t('tip.hint'), {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
deleteDocDraftById(data.id).then(res => {
|
||||
this.$message.success('删除文章成功!');
|
||||
this.reloadTable();
|
||||
}).catch(error => {
|
||||
this.$message.error(`删除失败: ${error.data}`);
|
||||
});
|
||||
}).catch(() => {});
|
||||
},
|
||||
reloadTable() {
|
||||
this.tableData = [];
|
||||
getDocDraft().then(res => {
|
||||
this.tableData = res.data;
|
||||
}).catch(error => {
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user