|
@@ -8,18 +8,26 @@
|
|
|
/>
|
|
|
<div class="main">
|
|
|
<div class="bgeditor">
|
|
|
- <div class="editor" style="padding-top: 100px;">
|
|
|
+ <div class="editor" style="padding-top: 100px">
|
|
|
<input
|
|
|
contenteditable
|
|
|
v-model="titleh1"
|
|
|
- style="display: block; width: calc(100% - 200px);font-size: 24px; margin: 0 auto; border: none; outline: none"
|
|
|
+ style="
|
|
|
+ display: block;
|
|
|
+ width: calc(100% - 200px);
|
|
|
+ font-size: 24px;
|
|
|
+ margin: 0 auto;
|
|
|
+ border: none;
|
|
|
+ outline: none;
|
|
|
+ "
|
|
|
placeholder="无标题"
|
|
|
- />
|
|
|
+ />
|
|
|
<Editor
|
|
|
:defaultConfig="editorConfig"
|
|
|
style="padding: 0 90px; height: calc(100% - 150px)"
|
|
|
mode="default"
|
|
|
@onCreated="handleCreated"
|
|
|
+ @onChange="contentChange"
|
|
|
/>
|
|
|
<Transition name="toolCol">
|
|
|
<div class="tool" v-if="toolShow">
|
|
@@ -177,6 +185,9 @@
|
|
|
@setHtml="setHtml"
|
|
|
@setTitle="setTitle"
|
|
|
@setImage="setImage"
|
|
|
+ :headTitle="titleh1"
|
|
|
+ :html="() => editorRef.getHtml()"
|
|
|
+ :text="() => editorRef.getText()"
|
|
|
:is="component_2_list[select_right_2_btn_type]"
|
|
|
></component>
|
|
|
</div>
|
|
@@ -188,9 +199,9 @@
|
|
|
|
|
|
<script setup>
|
|
|
import '@wangeditor/editor/dist/css/style.css'; // 引入 css
|
|
|
-import { onBeforeUnmount, ref, shallowRef, onMounted, provide } from 'vue';
|
|
|
+import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue';
|
|
|
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
|
|
|
-import { advertisement, generate_pc_get } from '@/api/aleditor.js';
|
|
|
+import { advertisement, generate_pc_get, getSID } from '@/api/aleditor.js';
|
|
|
// 右侧一级组件
|
|
|
import pen_ink from './components/pen_ink.vue';
|
|
|
import review from './components/review.vue';
|
|
@@ -284,9 +295,6 @@ const select_right_btn_list = ref([
|
|
|
},
|
|
|
]);
|
|
|
|
|
|
-provide('getHtml', () => editorRef.value.getHtml());
|
|
|
-provide('getText', () => editorRef.value.getText());
|
|
|
-
|
|
|
onMounted(() => {});
|
|
|
|
|
|
const statusPage = ref([false, true]); // 0 --> 目录 1 --> operate
|
|
@@ -294,6 +302,16 @@ const load = ref(false);
|
|
|
const toolShow = ref(true);
|
|
|
const btnType = ref('short');
|
|
|
|
|
|
+const getSidFun = () => {
|
|
|
+ getSID().then(r => {
|
|
|
+ console.log(r);
|
|
|
+ localStorage.setItem('fileId', r.fileId);
|
|
|
+ localStorage.setItem('sid', r.sid);
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+!localStorage.getItem('fileId') && getSidFun();
|
|
|
+
|
|
|
const toolbarConfig = {
|
|
|
toolbarKeys: [
|
|
|
'redo',
|
|
@@ -336,9 +354,10 @@ const editorConfig = {
|
|
|
},
|
|
|
};
|
|
|
|
|
|
-// const seaveTitle = e => {
|
|
|
-// title.value = e.target.innerHTML;
|
|
|
-// };
|
|
|
+const contentChange = e =>{
|
|
|
+ console.log(e.getHtml());
|
|
|
+ // 编辑器修改
|
|
|
+}
|
|
|
|
|
|
// 组件销毁时,也及时销毁编辑器
|
|
|
onBeforeUnmount(() => {
|