118 lines
2.1 KiB
Vue
118 lines
2.1 KiB
Vue
|
<template>
|
||
|
|
<div class="container">
|
||
|
|
|
||
|
|
<!-- 底部编辑区 -->
|
||
|
|
<div class="bottom-section">
|
||
|
|
<div class="editor-container">
|
||
|
|
<h4>窗口文本</h4>
|
||
|
|
<div id="toolbar"></div>
|
||
|
|
<div id="editor"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="device-preview">
|
||
|
|
<div class="device-frame">
|
||
|
|
<div class="preview-content" ref="previewContent"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 保存按钮 -->
|
||
|
|
<div class="footer">
|
||
|
|
<a-button type="primary">保存</a-button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import { onMounted, ref } from 'vue'
|
||
|
|
import Quill from 'quill'
|
||
|
|
|
||
|
|
// 富文本编辑器逻辑
|
||
|
|
const previewContent = ref<HTMLElement | null>(null)
|
||
|
|
const toolbarOptions = [
|
||
|
|
['bold', 'italic', 'underline'],
|
||
|
|
[{ 'header': [1, 2, 3, false] }],
|
||
|
|
['blockquote', 'code-block'],
|
||
|
|
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
|
||
|
|
['link', 'image']
|
||
|
|
]
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
const quill = new Quill('#editor', {
|
||
|
|
theme: 'snow',
|
||
|
|
modules: { toolbar: toolbarOptions },
|
||
|
|
placeholder: '请输入内容...'
|
||
|
|
})
|
||
|
|
|
||
|
|
quill.on('text-change', () => {
|
||
|
|
if (previewContent.value) {
|
||
|
|
previewContent.value.innerHTML = quill.root.innerHTML
|
||
|
|
}
|
||
|
|
})
|
||
|
|
})
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.container {
|
||
|
|
padding: 20px;
|
||
|
|
max-width: 1200px;
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.section {
|
||
|
|
margin-bottom: 24px;
|
||
|
|
border: 1px solid #f0f0f0;
|
||
|
|
border-radius: 4px;
|
||
|
|
padding: 16px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.section h3 {
|
||
|
|
margin-bottom: 16px;
|
||
|
|
color: rgba(0, 0, 0, 0.85);
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-row {
|
||
|
|
display: flex;
|
||
|
|
gap: 16px;
|
||
|
|
margin-bottom: 16px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bottom-section {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: 1fr 1fr;
|
||
|
|
gap: 24px;
|
||
|
|
margin-top: 24px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.editor-container {
|
||
|
|
border: 1px solid #f0f0f0;
|
||
|
|
padding: 16px;
|
||
|
|
border-radius: 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.device-preview {
|
||
|
|
border: 1px solid #f0f0f0;
|
||
|
|
padding: 16px;
|
||
|
|
border-radius: 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.device-frame {
|
||
|
|
width: 375px;
|
||
|
|
height: 667px;
|
||
|
|
border: 1px solid #ddd;
|
||
|
|
border-radius: 16px;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.preview-content {
|
||
|
|
padding: 16px;
|
||
|
|
height: 100%;
|
||
|
|
overflow-y: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer {
|
||
|
|
margin-top: 24px;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
</style>
|