hashirama/kun-galgame-vue
1
0
Fork 0
Code Issues Pull requests Actions Projects Releases Wiki Activity

Edit page

Browse source
This commit is contained in:
KUN1007 2023-05-11 00:46:20 +08:00
parent 0903861ec7
commit 44a7c277ad
3 changed files with 219 additions and 114 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
index.html
View file

@ -4,7 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue + TS</title> <title>KUNGalgame</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

172
src/components/WangEditor.vue Normal file
View file

@ -0,0 +1,172 @@
<!--
编辑器实例共用组件
-->
<script setup lang="ts">
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import axios from 'axios'
// 编辑器实例，必须用 shallowRef，重要！
const editorRef = shallowRef()
// 内容 HTML
const valueHtml = ref('<p>hello</p>')
// 模拟 ajax 异步获取内容
onMounted(() => {
setTimeout(() => {
valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'
}, 1500)
})
// 工具栏配置
const toolbarConfig = {
/*
// 菜单 key
'headerSelect', // h1, h2, h3, h4 选择
'bold', // 加粗
'italic', // 斜体
'through', // 删除线
'underline', // 下划线
'bulletedList', // 无序列表
'numberedList', // 有序列表
'color', // 文字颜色
'insertLink', // 插入链接
'fontSize', // 字体大小
'lineHeight', // 行高
'uploadImage', // 上传图片
'delIndent', // 缩进
'indent', // 增进
'deleteImage', //删除图片
'divider', // 分割线
'insertTable', // 插入表格
'justifyCenter', // 居中对齐
'justifyJustify', // 两端对齐
'justifyLeft', // 左对齐
'justifyRight', // 右对齐
'undo', // 撤销
'redo', // 重做
'clearStyle', // 清除格式
'fullScreen', // 全屏
*/
toolbarKeys: [
'bold',
'underline',
'italic',
'through',
'code',
'sub',
'sup',
'clearStyle',
'color',
'bgColor',
'fontSize',
'fontFamily',
'indent',
'delIndent',
'justifyLeft',
'justifyRight',
'justifyCenter',
'justifyJustify',
'lineHeight',
'insertImage',
'deleteImage',
'editImage',
'viewImageLink',
'imageWidth30',
'imageWidth50',
'imageWidth100',
'divider',
'emotion',
'insertLink',
'editLink',
'unLink',
'viewLink',
'codeBlock',
'blockquote',
'headerSelect',
'header1',
'header2',
'header3',
'header4',
'header5',
'todo',
'redo',
'undo',
'fullScreen',
'enter',
'bulletedList',
'numberedList',
'insertTable',
'deleteTable',
'insertTableRow',
'deleteTableRow',
'insertTableCol',
'deleteTableCol',
'tableHeader',
'tableFullWidth',
'insertVideo',
'uploadVideo',
'editVideoSize',
'uploadImage',
'codeSelectLang',
],
}
// 编辑器配置
const editorConfig = {
placeholder: '请输入内容...',
MENU_CONF: {},
}
const handleCreated = (editor: any) => {
editorRef.value = editor // 记录 editor 实例，重要！
console.log(editor.getConfig())
console.log(editor.getAllMenuKeys())
}
// 组件销毁时，及时销毁编辑器
onBeforeUnmount(() => {
const editor = editorRef.value
if (editor == null) return
editor.destroy()
})
</script>
<template>
<!-- 编辑器 -->
<div class="editor—wrapper">
<Toolbar
class="toolbar-container"
:editor="editorRef"
:defaultConfig="toolbarConfig"
/>
<Editor
class="editor-container"
style="height: 427px; overflow-y: hidden"
v-model="valueHtml"
:defaultConfig="editorConfig"
@onCreated="handleCreated"
/>
</div>
</template>
<style lang="less" scoped>
/* 编辑器的样式 */
.editor—wrapper {
/* 编辑器的 border */
border: 1px solid @kungalgame-blue-4;
box-sizing: border-box;
/* 编辑器的宽度 */
width: 97%;
margin: 0 auto;
z-index: 1008; /* 按需定义 */
}
.toolbar-container {
border-bottom: 1px solid @kungalgame-blue-4;
}
/* 编辑器编辑部分 */
.editor-container {
height: 427px;
}
</style>

159
src/views/edit/Edit.vue
View file

@ -1,66 +1,12 @@
<script setup lang="ts"> <script setup lang="ts">
import '@wangeditor/editor/dist/css/style.css' // 引入 css import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
import WangEditor from '@/components/WangEditor.vue'
import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
// 编辑器的模式
const mode = 'default'
// 内容 HTML
const valueHtml = ref('<p>hello</p>')
// 模拟 ajax 异步获取内容
onMounted(() => {
setTimeout(() => {
valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'
}, 1500)
})
const toolbarConfig = {}
const editorConfig = { placeholder: '请输入内容...' }
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
const editor = editorRef.value
if (editor == null) return
editor.destroy()
})
// TODO:
const handleCreated = (editor: any) => {
editorRef.value = editor // 记录 editor 实例，重要！
}
</script> </script>
<template> <template>
<div class="root"> <div class="root">
<!-- 头部 --> <!-- 头部 -->
<div class="header"> <KUNGalgameTopBar />
<!-- 顶部左侧交互栏 -->
<div class="nav-top">
<div class="kungal-info">
<img src="../img/favicon.png" alt="KUNgal" />
<span>KUNGalgame</span>
</div>
<div class="top-bar">
<ul>
<li>所有帖子</li>
<li>发布帖子</li>
<li>技术交流</li>
<li>数据统计</li>
<div class="top-bar-box"></div>
</ul>
</div>
</div>
<div class="kungalgamer-info">
<img src="../img/KUN.jpg" alt="KUN" />
<span>KUN</span>
</div>
</div>
<!-- 内容区容器 --> <!-- 内容区容器 -->
<div class="container"> <div class="container">
<!-- 内容区容器 --> <!-- 内容区容器 -->
@ -73,21 +19,7 @@ const handleCreated = (editor: any) => {
</div> </div>
</div> </div>
<!-- 编辑器 --> <!-- 编辑器 -->
<div style="border: 1px solid #ccc"> <WangEditor />
<Toolbar
style="border-bottom: 1px solid #ccc"
:editor="editorRef"
:defaultConfig="toolbarConfig"
:mode="mode"
/>
<Editor
style="height: 500px; overflow-y: hidden"
v-model="valueHtml"
:defaultConfig="editorConfig"
:mode="mode"
@onCreated="handleCreated"
/>
</div>
</div> </div>
<!-- 内容区的底部 --> <!-- 内容区的底部 -->
@ -97,12 +29,12 @@ const handleCreated = (editor: any) => {
<!-- 标签输入框 --> <!-- 标签输入框 -->
<input <input
type="text" type="text"
placeholder="请输入帖子的关键词（至少选择一个、最多 7 个）, 输入文字按下 ' Enter ' 创建关键词" placeholder="请输入帖子的关键词（单个关键词 10 个字符以内，至少选择一个、最多 7 个）, 输入文字按下 ' Enter ' 创建关键词"
/> />
<!-- 标签容器 -->
<div class="tags">
<!-- 标签的提示词 --> <!-- 标签的提示词 -->
<div class="tags-info">热门关键词（点击选择）:</div> <div class="tags-info">热门关键词（点击选择）:</div>
<!-- 标签容器 -->
<div class="tags">
<span>啊这可海星</span> <span>啊这可海星</span>
<span>啊这可海星</span> <span>啊这可海星</span>
<span>啊这可海星</span> <span>啊这可海星</span>
@ -129,6 +61,8 @@ const handleCreated = (editor: any) => {
<div class="btn-container"> <div class="btn-container">
<!-- 确认按钮 --> <!-- 确认按钮 -->
<button class="confirm-btn">确认发布</button> <button class="confirm-btn">确认发布</button>
<!-- 预览编辑 -->
<button class="preview-btn">预览结果</button>
<!-- 保存按钮 --> <!-- 保存按钮 -->
<button class="save-btn">保存草稿</button> <button class="save-btn">保存草稿</button>
</div> </div>
@ -161,35 +95,18 @@ body::-webkit-scrollbar {
.root { .root {
height: 100vh; height: 100vh;
min-height: 1000px; min-height: 1000px;
min-width: 800px; min-width: 900px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-image: url(../img/bg/bg1.png); background-image: url(@/assets/images/bg/bg1.png);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-attachment: fixed; background-attachment: fixed;
background-size: cover; background-size: cover;
} }
/* 编辑器的样式 */
#editor—wrapper {
/* 编辑器的 border */
border: 1px solid @kungalgame-blue-4;
box-sizing: border-box;
/* 编辑器的宽度 */
width: 75vw;
margin: 0 auto;
z-index: 100; /* 按需定义 */
}
#toolbar-container {
border-bottom: 1px solid @kungalgame-blue-4;
}
/* 编辑器编辑部分 */
#editor-container {
height: 427px;
}
/* 内容部分的总容器 */ /* 内容部分的总容器 */
.container { .container {
width: 77vw; width: 80%;
margin: auto; margin: auto;
/* 距离顶部 header 的距离 */ /* 距离顶部 header 的距离 */
margin-top: 7px; margin-top: 7px;
@ -209,7 +126,7 @@ body::-webkit-scrollbar {
} }
/* 帖子的发布标题 */ /* 帖子的发布标题 */
.topic-title { .topic-title {
width: 75vw; width: 97%;
} }
/* 帖子标题的输入框 */ /* 帖子标题的输入框 */
.topic-title input { .topic-title input {
@ -230,17 +147,15 @@ body::-webkit-scrollbar {
} }
/* 内容区的底部样式 */ /* 内容区的底部样式 */
.content-footer { .content-footer {
/* 固定高度 */
height: 250px;
/* 距离内容区的距离 */ /* 距离内容区的距离 */
margin-top: 17px; margin-top: 17px;
padding: 0 1vw;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center;
} }
/* 标签的总容器 */ /* 标签的总容器 */
.tags-container { .tags-container {
flex-grow: 1; width: 97%;
} }
/* 标签输入框 */ /* 标签输入框 */
.tags-container input { .tags-container input {
@ -256,16 +171,19 @@ body::-webkit-scrollbar {
.tags-container input:focus { .tags-container input:focus {
box-shadow: 0px 0px 3px @kungalgame-blue-4; box-shadow: 0px 0px 3px @kungalgame-blue-4;
} }
.tags-info {
margin: 10px 0;
}
/* 单个标签容器 */ /* 单个标签容器 */
.tags { .tags {
margin-top: 17px; display: flex;
} flex-wrap: wrap;
/* 标签的提示词 */
.tags div {
margin-bottom: 7px;
} }
/* 单个标签的样式 */ /* 单个标签的样式 */
.tags > span { .tags > span {
margin: 5px;
display: block;
white-space: nowrap;
font-size: 14px; font-size: 14px;
padding: 3px; padding: 3px;
background-color: @kungalgame-trans-blue-1; background-color: @kungalgame-trans-blue-1;
@ -277,14 +195,15 @@ body::-webkit-scrollbar {
/* 话题分类的容器 */ /* 话题分类的容器 */
.topic-group { .topic-group {
/* 相对于标签容器的占比 */ /* 相对于标签容器的占比 */
flex-grow: 1; width: 97%;
margin: 10px 0;
} }
/* 分类容器的按钮集合 */ /* 分类容器的按钮集合 */
.group-btn { .group-btn {
height: 100%; height: 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-top: 10px; margin: 20px 0;
} }
/* 单个按钮的样式 */ /* 单个按钮的样式 */
.group-btn > button { .group-btn > button {
@ -298,12 +217,12 @@ body::-webkit-scrollbar {
} }
/* 按钮的容器 */ /* 按钮的容器 */
.btn-container { .btn-container {
flex-grow: 1; width: 97%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
/* 距离最底端的距离 */ /* 距离最底端的距离 */
margin-bottom: 10px; margin-bottom: 20px;
} }
/* 单个按钮的样式 */ /* 单个按钮的样式 */
.btn-container button { .btn-container button {
@ -326,9 +245,23 @@ body::-webkit-scrollbar {
transition: 0.1s; transition: 0.1s;
} }
.confirm-btn:active { .confirm-btn:active {
background-color: @kungalgame-red-4; background-color: @kungalgame-blue-2;
transform: scale(0.8);
}
/* 预览按钮的样式 */
.preview-btn {
color: @kungalgame-red-4;
background-color: @kungalgame-trans-red-1;
border: 1px solid @kungalgame-red-4; border: 1px solid @kungalgame-red-4;
font-size: 17px; }
.preview-btn:hover {
color: @kungalgame-trans-white-1;
background-color: @kungalgame-red-4;
transition: 0.1s;
}
.preview-btn:active {
background-color: @kungalgame-red-2;
transform: scale(0.8);
} }
/* 保存按钮的样式 */ /* 保存按钮的样式 */
.save-btn { .save-btn {
@ -342,8 +275,8 @@ body::-webkit-scrollbar {
transition: 0.1s; transition: 0.1s;
} }
.save-btn:active { .save-btn:active {
background-color: @kungalgame-trans-orange-1; background-color: @kungalgame-orange-2;
color: @kungalgame-orange-4; transform: scale(0.8);
} }
/* 版权 */ /* 版权 */
.copyright { .copyright {