Edit page
This commit is contained in:
KUN1007
parent
af74ed408a
commit
636eb28643
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + Vue + TS</title>
|
||||
<title>KUNGalgame</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
|
|
|||
172
src/components/WangEditor.vue
Normal file
172
src/components/WangEditor.vue
Normal 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>
|
||||
|
|
@ -1,66 +1,12 @@
|
|||
<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'
|
||||
|
||||
// 编辑器实例，必须用 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 实例，重要！
|
||||
}
|
||||
import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
|
||||
import WangEditor from '@/components/WangEditor.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="root">
|
||||
<!-- 头部 -->
|
||||
<div class="header">
|
||||
<!-- 顶部左侧交互栏 -->
|
||||
<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>
|
||||
<KUNGalgameTopBar />
|
||||
<!-- 内容区容器 -->
|
||||
<div class="container">
|
||||
<!-- 内容区容器 -->
|
||||
|
|
@ -73,21 +19,7 @@ const handleCreated = (editor: any) => {
|
|||
</div>
|
||||
</div>
|
||||
<!-- 编辑器 -->
|
||||
<div style="border: 1px solid #ccc">
|
||||
<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>
|
||||
<WangEditor />
|
||||
</div>
|
||||
|
||||
<!-- 内容区的底部 -->
|
||||
|
|
@ -97,12 +29,12 @@ const handleCreated = (editor: any) => {
|
|||
<!-- 标签输入框 -->
|
||||
<input
|
||||
type="text"
|
||||
placeholder="请输入帖子的关键词（至少选择一个、最多 7 个）, 输入文字按下 ' Enter ' 创建关键词"
|
||||
placeholder="请输入帖子的关键词（单个关键词 10 个字符以内，至少选择一个、最多 7 个）, 输入文字按下 ' Enter ' 创建关键词"
|
||||
/>
|
||||
<!-- 标签的提示词 -->
|
||||
<div class="tags-info">热门关键词（点击选择）:</div>
|
||||
<!-- 标签容器 -->
|
||||
<div class="tags">
|
||||
<!-- 标签的提示词 -->
|
||||
<div class="tags-info">热门关键词（点击选择）:</div>
|
||||
<span>啊这可海星</span>
|
||||
<span>啊这可海星</span>
|
||||
<span>啊这可海星</span>
|
||||
|
|
@ -129,6 +61,8 @@ const handleCreated = (editor: any) => {
|
|||
<div class="btn-container">
|
||||
<!-- 确认按钮 -->
|
||||
<button class="confirm-btn">确认发布</button>
|
||||
<!-- 预览编辑 -->
|
||||
<button class="preview-btn">预览结果</button>
|
||||
<!-- 保存按钮 -->
|
||||
<button class="save-btn">保存草稿</button>
|
||||
</div>
|
||||
|
|
@ -161,35 +95,18 @@ body::-webkit-scrollbar {
|
|||
.root {
|
||||
height: 100vh;
|
||||
min-height: 1000px;
|
||||
min-width: 800px;
|
||||
min-width: 900px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-image: url(../img/bg/bg1.png);
|
||||
background-image: url(@/assets/images/bg/bg1.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-attachment: fixed;
|
||||
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 {
|
||||
width: 77vw;
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
/* 距离顶部 header 的距离 */
|
||||
margin-top: 7px;
|
||||
|
|
@ -209,7 +126,7 @@ body::-webkit-scrollbar {
|
|||
}
|
||||
/* 帖子的发布标题 */
|
||||
.topic-title {
|
||||
width: 75vw;
|
||||
width: 97%;
|
||||
}
|
||||
/* 帖子标题的输入框 */
|
||||
.topic-title input {
|
||||
|
|
@ -230,17 +147,15 @@ body::-webkit-scrollbar {
|
|||
}
|
||||
/* 内容区的底部样式 */
|
||||
.content-footer {
|
||||
/* 固定高度 */
|
||||
height: 250px;
|
||||
/* 距离内容区的距离 */
|
||||
margin-top: 17px;
|
||||
padding: 0 1vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
/* 标签的总容器 */
|
||||
.tags-container {
|
||||
flex-grow: 1;
|
||||
width: 97%;
|
||||
}
|
||||
/* 标签输入框 */
|
||||
.tags-container input {
|
||||
|
|
@ -256,16 +171,19 @@ body::-webkit-scrollbar {
|
|||
.tags-container input:focus {
|
||||
box-shadow: 0px 0px 3px @kungalgame-blue-4;
|
||||
}
|
||||
.tags-info {
|
||||
margin: 10px 0;
|
||||
}
|
||||
/* 单个标签容器 */
|
||||
.tags {
|
||||
margin-top: 17px;
|
||||
}
|
||||
/* 标签的提示词 */
|
||||
.tags div {
|
||||
margin-bottom: 7px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
/* 单个标签的样式 */
|
||||
.tags > span {
|
||||
margin: 5px;
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
font-size: 14px;
|
||||
padding: 3px;
|
||||
background-color: @kungalgame-trans-blue-1;
|
||||
|
|
@ -277,14 +195,15 @@ body::-webkit-scrollbar {
|
|||
/* 话题分类的容器 */
|
||||
.topic-group {
|
||||
/* 相对于标签容器的占比 */
|
||||
flex-grow: 1;
|
||||
width: 97%;
|
||||
margin: 10px 0;
|
||||
}
|
||||
/* 分类容器的按钮集合 */
|
||||
.group-btn {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 10px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
/* 单个按钮的样式 */
|
||||
.group-btn > button {
|
||||
|
|
@ -298,12 +217,12 @@ body::-webkit-scrollbar {
|
|||
}
|
||||
/* 按钮的容器 */
|
||||
.btn-container {
|
||||
flex-grow: 1;
|
||||
width: 97%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
/* 距离最底端的距离 */
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
/* 单个按钮的样式 */
|
||||
.btn-container button {
|
||||
|
|
@ -326,9 +245,23 @@ body::-webkit-scrollbar {
|
|||
transition: 0.1s;
|
||||
}
|
||||
.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;
|
||||
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 {
|
||||
|
|
@ -342,8 +275,8 @@ body::-webkit-scrollbar {
|
|||
transition: 0.1s;
|
||||
}
|
||||
.save-btn:active {
|
||||
background-color: @kungalgame-trans-orange-1;
|
||||
color: @kungalgame-orange-4;
|
||||
background-color: @kungalgame-orange-2;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
/* 版权 */
|
||||
.copyright {
|
||||
|
|
|
|||
Loading…
Reference in a new issue