<!DOCTYPE html>
|
<html lang="zh-cn">
|
|
<head>
|
<meta charset="utf-8">
|
<include file="common:title" />
|
<meta name="renderer" content="webkit">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
<include file="common:element-plus" />
|
<link rel="stylesheet" href="/static/admin/css/blog/add.css">
|
<!-- 富文本编辑器 -->
|
<link rel="stylesheet" href="/static/plugin/wangeditor/style.css" media="all">
|
<script type="text/javascript" src="/static/plugin/wangeditor/index.js"></script>
|
<style>
|
.editor—wrapper {
|
border: 1px solid #ccc;
|
z-index: 100;
|
width: 100%;
|
/* 按需定义 */
|
}
|
|
.toolbar-container {
|
border-bottom: 1px solid #ccc;
|
}
|
|
.avatar-uploader .avatar {
|
width: 178px;
|
height: 178px;
|
display: block;
|
}
|
|
.avatar-uploader .el-upload {
|
border: 1px dashed var(--el-border-color);
|
border-radius: 6px;
|
cursor: pointer;
|
position: relative;
|
overflow: hidden;
|
transition: var(--el-transition-duration-fast);
|
}
|
|
.avatar-uploader .el-upload:hover {
|
border-color: var(--el-color-primary);
|
}
|
|
.el-icon.avatar-uploader-icon {
|
font-size: 28px;
|
color: #8c939d;
|
width: 178px;
|
height: 178px;
|
text-align: center;
|
}
|
</style>
|
</head>
|
|
<body>
|
<input type="hidden" id="id" value="{$id}">
|
<div id="vue_item" v-cloak>
|
<el-container>
|
<el-aside class="el-menu-container" :width="el_aside_width">
|
<!-- 侧边菜单 -->
|
<include file="common:side_menu" />
|
</el-aside>
|
<el-container>
|
<el-header>
|
<include file="common:guide" one_word="首页" two_word="文章管理" />
|
</el-header>
|
<el-main>
|
<el-card>
|
<template #header>
|
<div class="card-header">
|
<span>添加文章</span>
|
 
|
<el-link href="/admin/blog/index.html" type="primary" class="header_add_btn" icon="ArrowLeftBold" :underline="false">返回</el-link>
|
</div>
|
</template>
|
<el-form :model="addBlogForm" label-width="auto" size="large">
|
<el-form-item label="标题(中文)">
|
<el-input v-model="addBlogForm.title"></el-input>
|
</el-form-item>
|
<el-form-item label="标题(英文)">
|
<el-input v-model="addBlogForm.en_title"></el-input>
|
</el-form-item>
|
<el-form-item label="简介(中文)">
|
<el-input v-model="addBlogForm.desc" type="textarea" :rows="3"></el-input>
|
</el-form-item>
|
<el-form-item label="简介(英文)">
|
<el-input v-model="addBlogForm.en_desc" type="textarea" :rows="3"></el-input>
|
</el-form-item>
|
<el-form-item label="内容(中文)">
|
<div id="editor—wrapper" class="editor—wrapper" style="height: 500px; z-index: 101;">
|
<div id="toolbar-container"><!-- 工具栏 --></div>
|
<div id="editor-container" style="height: calc(100% - 40px);"><!-- 编辑器 --></div>
|
</div>
|
<!-- <div id="editer_data" style="width: 100%;" v-html="addBlogForm.content"></div> -->
|
<!-- <textarea id="editer_data" style="display:none;" v-model="addBlogForm.content"></textarea> -->
|
</el-form-item>
|
<el-form-item label="内容(英文)">
|
<div id="editor—wrapper-en" class="editor—wrapper" style="height: 500px;">
|
<div id="toolbar-container-en"><!-- 工具栏 --></div>
|
<div id="editor-container-en" style="height: calc(100% - 40px);"><!-- 编辑器 --></div>
|
</div>
|
<!-- <div id="editer_data_en" style="width: 100%;" v-html="addBlogForm.en_content"></div> -->
|
</el-form-item>
|
<el-form-item label="封面图">
|
<el-upload class="avatar-uploader" action="/admin/blog/upload_cover_img.html" :show-file-list="false" :on-success="handleCoverImgSuccess" :before-upload="beforeCoverImgUpload">
|
<template v-if="addBlogForm.cover_img">
|
<div>
|
<img :src="addBlogForm.cover_img" class="avatar" />
|
<!-- <el-button type="danger" icon="Delete"></el-button> -->
|
</div>
|
</template>
|
<el-icon v-else class="avatar-uploader-icon">
|
<Plus />
|
</el-icon>
|
</el-upload>
|
</el-form-item>
|
<el-form-item label=" ">
|
<el-button type="primary" class="btn-min-width-120" @click="onSubmit" :disabled="submitDisabled">提交</el-button>
|
</el-form-item>
|
</el-form>
|
</el-card>
|
</el-main>
|
<el-footer></el-footer>
|
</el-container>
|
</el-container>
|
</div>
|
</body>
|
<!-- 共用的方法 -->
|
<script src="/static/vue/mixin_admin.js"></script>
|
<script src="/static/admin/js/blog/add.js"></script>
|
<!-- 富文本编辑器和上传插件设置 -->
|
<script>
|
const { createEditor, createToolbar } = window.wangEditor
|
const editorConfig = {
|
placeholder: '请输入中文内容...',
|
onChange(editor) {
|
const html = editor.getHtml();
|
getHtmlValue(html);
|
},
|
MENU_CONF: {},
|
}
|
editorConfig.MENU_CONF['uploadImage'] = {
|
server: '/admin/blog/upload_img.html',//上传图片服务端地址
|
timeout: 5 * 1000, // 5s
|
fieldName: 'image', // 服务端获取图片数据的参数名
|
// meta: { token: 'xxx', a: 100 }, // 其它参数
|
metaWithUrl: true, // join params to url
|
headers: { Accept: 'text/x-json' },
|
maxFileSize: 10 * 1024 * 1024, // 10M
|
base64LimitSize: 10 * 1024, // insert base64 format, if file's size less than 5kb
|
onBeforeUpload(file) {
|
console.log('onBeforeUpload', file)
|
return file // will upload this file
|
// return false // prevent upload
|
},
|
onProgress(progress) {
|
console.log('onProgress', progress)
|
},
|
onSuccess(file, res) {
|
console.log('onSuccess', file, res)
|
},
|
onFailed(file, res) {
|
// alert(res.message)
|
console.log('onFailed', file, res)
|
},
|
onError(file, err, res) {
|
// alert(err.message)
|
console.error('onError', file, err, res)
|
},
|
}
|
|
var editor_data = $("#editer_data").html();
|
if (editor_data == '') {
|
editor_data = '<p><br></p>';
|
}
|
const editor = createEditor({
|
selector: '#editor-container',
|
html: '<p><br></p>',
|
config: editorConfig,
|
mode: 'default', // or 'simple'
|
});
|
|
const toolbarConfig = {}
|
|
///// 排除菜单组，写菜单组 key 的值即可/////
|
toolbarConfig.excludeKeys = [
|
'group-video',
|
"emotion",
|
"fullScreen",
|
];
|
|
const toolbar = createToolbar({
|
editor,
|
selector: '#toolbar-container',
|
config: toolbarConfig,
|
mode: 'default', // or 'simple'
|
})
|
|
// console.log(toolbar.getConfig());
|
|
///////////////英文版///////////
|
const editorConfigEn = {
|
placeholder: '请输入英文内容...',
|
onChange(editor) {
|
const html = editor.getHtml();
|
getHtmlValue(html, 2);
|
},
|
MENU_CONF: {},
|
}
|
|
|
editorConfigEn.MENU_CONF['uploadImage'] = {
|
server: '/admin/blog/upload_img.html',//上传图片服务端地址
|
timeout: 5 * 1000, // 5s
|
fieldName: 'image', // 上传图片的参数名
|
// meta: { token: 'xxx', a: 100 }, // 参数
|
metaWithUrl: true, // join params to url
|
headers: { Accept: 'text/x-json' },
|
maxFileSize: 10 * 1024 * 1024, // 10M
|
base64LimitSize: 10 * 1024, // insert base64 format, if file's size less than 5kb
|
onBeforeUpload(file) {
|
console.log('onBeforeUpload', file)
|
return file // will upload this file
|
// return false // prevent upload
|
},
|
onProgress(progress) {
|
console.log('onProgress', progress)
|
},
|
onSuccess(file, res) {
|
console.log('onSuccess', file, res)
|
},
|
onFailed(file, res) {
|
// alert(res.message)
|
console.log('onFailed', file, res)
|
},
|
onError(file, err, res) {
|
// alert(err.message)
|
console.error('onError', file, err, res)
|
},
|
}
|
|
var editor_data_en = document.getElementById('editer_data_en');
|
if (editor_data_en == '') {
|
editor_data_en = '<p><br></p>';
|
}
|
const editor_en = createEditor({
|
selector: '#editor-container-en',
|
html: '<p><br></p>',
|
config: editorConfigEn,
|
mode: 'default', // or 'simple'
|
})
|
const toolbarConfigEn = {
|
|
}
|
|
///// 排除菜单组，写菜单组 key 的值即可/////
|
toolbarConfigEn.excludeKeys = [
|
'group-video',
|
"emotion",
|
"fullScreen",
|
];
|
const toolbar_en = createToolbar({
|
editor: editor_en,
|
selector: '#toolbar-container-en',
|
config: toolbarConfigEn,
|
mode: 'default', // or 'simple'
|
});
|
|
|
function setHtmlValue(html, type = 1) {
|
if (type == 1) {
|
editor.setHtml(html);
|
} else {
|
editor_en.setHtml(html);
|
}
|
}
|
</script>
|
|
</html>
|
