|
@@ -6,20 +6,25 @@
|
|
|
:defaultConfig="toolbarConfig"
|
|
|
mode="default"
|
|
|
/>
|
|
|
- <el-row :gutter="20">
|
|
|
+ <el-row :gutter="20" class="main">
|
|
|
<el-col :span="20">
|
|
|
<div class="bgEditor">
|
|
|
<div class="editor">
|
|
|
- <h1 contenteditable style="padding: 100px 100px 0;outline: none">无标题</h1>
|
|
|
+ <h1 contenteditable style="padding: 100px 100px 0; outline: none">
|
|
|
+ 无标题
|
|
|
+ </h1>
|
|
|
<Editor
|
|
|
v-model="valueHtml"
|
|
|
:defaultConfig="editorConfig"
|
|
|
- style="padding: 0 90px;"
|
|
|
+ style="padding: 0 90px; height: calc(100% - 150px)"
|
|
|
mode="default"
|
|
|
@onCreated="handleCreated"
|
|
|
/>
|
|
|
</div>
|
|
|
- <div class="tool">123</div>
|
|
|
+ <div class="tool">
|
|
|
+ <el-icon ><MoreFilled style="transform: rotate(180deg);" /></el-icon>
|
|
|
+ 123
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
<el-col :span="4">1</el-col>
|
|
@@ -91,16 +96,23 @@ const handleCreated = editor => {
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
+<style scoped>
|
|
|
+</style>
|
|
|
+
|
|
|
+
|
|
|
<style scoped>
|
|
|
.AIeditor {
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
|
|
|
+.AIeditor .main,
|
|
|
.bgEditor {
|
|
|
position: relative;
|
|
|
+ height: calc(100% - 40px);
|
|
|
}
|
|
|
|
|
|
-.bgEdigtoTool {
|
|
|
- position: absolute;
|
|
|
+.AIeditor .main {
|
|
|
+ overflow-y: auto;
|
|
|
}
|
|
|
|
|
|
.editor {
|
|
@@ -110,7 +122,25 @@ const handleCreated = editor => {
|
|
|
margin: 1em auto;
|
|
|
}
|
|
|
|
|
|
-.tool{
|
|
|
- display: flex;
|
|
|
+.tool {
|
|
|
+ bottom: 35px;
|
|
|
+ align-items: center;
|
|
|
+ display: flex;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ border-radius: 3px;
|
|
|
+ border: 1px solid #eee;
|
|
|
+ height: 60px;
|
|
|
+ width: 500px;
|
|
|
+ -webkit-box-sizing: border-box;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 3px;
|
|
|
+ border: 1px solid #eee;
|
|
|
+ padding: 8px 0 8px 9px;
|
|
|
+ background-color: #fff;
|
|
|
+ -webkit-box-pack: justify;
|
|
|
+ -ms-flex-pack: justify;
|
|
|
+ justify-content: space-between;
|
|
|
}
|
|
|
</style>
|