<!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/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>
|
<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%;">{{addBlogForm.content}}</div>
|
<textarea name="content" id="content" 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>
|
</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();
|
setHtmlValue(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)
|
},
|
}
|
|
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();
|
setHtmlValue(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)
|
},
|
}
|
|
|
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'
|
})
|
</script>
|
<script>
|
/**
|
* 富文本编辑器
|
*/
|
// var E = window.wangEditor
|
// const editor = new E('#editer_data')
|
// var textarea = $('#content')
|
|
// editor.config.onchange = function (html) {
|
// // 监控变化，同步更新到 textarea
|
// textarea.val(html)
|
// }
|
|
// // editor.config.onblur = function (html) {
|
// // // 编辑区域失去焦点后的操作，保存内容
|
// // save_reading_data();
|
// // }
|
|
// //设置提示文字
|
// editor.config.placeholder = '请输入文章内容...'
|
|
// //设置编辑区域z-index
|
// editor.config.zIndex = 100
|
|
// // 自定义菜单配置
|
// editor.config.menus = [
|
// 'bold',
|
// 'fontSize',
|
// 'italic',
|
// 'underline',
|
// 'strikeThrough',
|
// 'indent',
|
// 'lineHeight',
|
// 'foreColor',
|
// 'backColor',
|
// 'link',
|
// 'list',
|
// 'justify',
|
// 'image',
|
// ]
|
|
// //粘贴内容去掉图片
|
// editor.config.pasteIgnoreImg = true
|
|
// // 配置粘贴文本的内容处理
|
// editor.config.pasteTextHandle = function (pasteStr) {
|
// // 对粘贴的文本进行处理，然后返回处理后的结果
|
// return pasteStr.replace(/<[^>]+>/g, "");
|
// }
|
|
// //上传图片服务端地址
|
// editor.config.uploadImgServer = "/admin/upload/index_v1.html"
|
|
// // 隐藏“网络图片”tab
|
// editor.config.showLinkImg = false
|
|
// // 将图片大小限制为 10M
|
// editor.config.uploadImgMaxSize = 20 * 1024 * 1024
|
|
// // 限制一次最多上传 20 张图片
|
// editor.config.uploadImgMaxLength = 20
|
|
// //编辑器初始化
|
// editor.create()
|
|
// // 初始化 textarea 的值
|
// textarea.val(editor.txt.html())
|
////////////////////////////////////////富文本编辑器-end//////////////////////////////////
|
</script>
|
|
</html>
|
