模拟腾讯文档

两种

1. 固定定位

2. 跟随滚动

固定定位

效果

代码

<template>
  <div class="pagecontent">
    <div id="top-container">
      <p>
        <a href="./index.html">&lt;&lt; 返回 Back to demo</a>
      </p>
    </div>
    <div>
      <div id="editor-toolbar">
        <Toolbar
          :editor="editorRef"
          :defaultConfig="toolbarConfig"
          :mode="mode"
        />
      </div>
    </div>
    <div id="content">
      <div id="editor-container">
        <div id="title-container">
          <input v-model="title" placeholder="请输入标题" />
        </div>
        <div id="editor-text-area">
          <Editor
            style="min-height: 800px; overflow-y: hidden"
            v-model="valueHtml"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="handleCreated"
            ref="editorTextArea"
          />
        </div>
      </div>

      <!--保存按钮开始-->
      <div id="savebutton" @click="getcontent">保存</div>
      <!--保存按钮结束-->
    </div>
  </div>
</template>

<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";

// 获取编辑器实例

const editorTextArea = ref(null);

// 标题

const title = ref("");

// 编辑器实例,必须用shallowRef包裹

const editorRef = shallowRef();

// 内容HTML

const valueHtml = ref("<p>hello</p>");

// 编辑器模式

const mode = ref("default"); // simple或者default;

// 模拟ajax异步获取数据内容

onMounted(() => {});

// 工具栏配置

const toolbarConfig = {};

// 编辑器配置

const editorConfig = {
  placeholder: "请输入内容...",
  scroll: false, // 禁止编辑器滚动
};
// 组件销毁的时候,也即时 销毁编辑器

onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});

// 编辑器示例

const handleCreated = (editor: any) => {
  editorRef.value = editor; // 记录editor实例
};

// 获取到编辑器内容

const getcontent = () => {
  window.alert(valueHtml.value);
};
</script>

<style scoped lang="scss">
.pagecontent {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  color: #333;
  background-color: #fff;

  #top-container {
    border-bottom: 1px solid #e8e8e8;
    padding-left: 30px;
  }

  #editor-toolbar {
    width: 1580px;
    background-color: #fcfcfc;
    margin: 0 auto;
  }

  #content {
    // 减去90 是因为顶部导航栏的高度+返回按钮的高度
    height: calc(100% - 90px);
    background-color: rgb(245, 245, 245);
    overflow-y: auto;
    position: relative;
    #savebutton {
      width: 100%;
      height: 40px;
      background: blue;
      color: yellow;
      font-size: 24px;
      line-height: 40px;
      text-align: center;
      position: fixed;
      bottom: 0;
      left: 0;
      cursor: pointer;
    }
  }

  #editor-container {
    width: 850px;
    margin: 30px auto 50px auto;
    background-color: #fff;
    padding: 20px 50px 50px 50px;
    border: 1px solid #e8e8e8;
    box-shadow: 0 2px 10px rgb(0 0 0 / 12%);
  }

  #title-container {
    padding: 20px 0;
    border-bottom: 1px solid #e8e8e8;
  }

  #title-container input {
    font-size: 30px;
    border: 0;
    outline: none;
    width: 100%;
    line-height: 1;
  }

  #editor-text-area {
    min-height: 800px;
    margin-top: 20px;
  }
}
</style>

跟随滚动

效果

代码

<template>
  <div class="pagecontent">
    <div id="top-container">
      <p>
        <a href="./index.html">&lt;&lt; 返回 Back to demo</a>
      </p>
    </div>
    <div>
      <div id="editor-toolbar">
        <Toolbar
          :editor="editorRef"
          :defaultConfig="toolbarConfig"
          :mode="mode"
        />
      </div>
    </div>
    <div id="content">
      <div id="editor-container">
        <div id="title-container">
          <input v-model="title" placeholder="请输入标题" />
        </div>
        <div id="editor-text-area">
          <Editor
            style="min-height: 800px; overflow-y: hidden"
            v-model="valueHtml"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="handleCreated"
            ref="editorTextArea"
          />
        </div>
      </div>

      <!--保存按钮开始-->
      <div id="savebutton" @click="getcontent">保存</div>
      <!--保存按钮结束-->
    </div>
  </div>
</template>

<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";

// 获取编辑器实例

const editorTextArea = ref(null);

// 标题

const title = ref("");

// 编辑器实例,必须用shallowRef包裹

const editorRef = shallowRef();

// 内容HTML

const valueHtml = ref("<p>hello</p>");

// 编辑器模式

const mode = ref("default"); // simple或者default;

// 模拟ajax异步获取数据内容

onMounted(() => {});

// 工具栏配置

const toolbarConfig = {};

// 编辑器配置

const editorConfig = {
  placeholder: "请输入内容...",
  scroll: false, // 禁止编辑器滚动
};
// 组件销毁的时候,也即时 销毁编辑器

onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});

// 编辑器示例

const handleCreated = (editor: any) => {
  editorRef.value = editor; // 记录editor实例
};

// 获取到编辑器内容

const getcontent = () => {
  window.alert(valueHtml.value);
};
</script>

<style scoped lang="scss">
.pagecontent {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  color: #333;
  background-color: #fff;

  #top-container {
    border-bottom: 1px solid #e8e8e8;
    padding-left: 30px;
  }

  #editor-toolbar {
    width: 1580px;
    background-color: #fcfcfc;
    margin: 0 auto;
  }

  #content {
    // 减去90 是因为顶部导航栏的高度+返回按钮的高度
    height: calc(100% - 90px);
    background-color: rgb(245, 245, 245);
    overflow-y: auto;
    position: relative;
    #savebutton {
      width: 300px;
      height: 40px;
      background: blue;
      color: yellow;
      font-size: 24px;
      line-height: 40px;
      text-align: center;
      margin: 0 auto;
      margin-bottom: 50px;
      cursor: pointer;
    }
  }

  #editor-container {
    width: 850px;
    margin: 30px auto 50px auto;
    background-color: #fff;
    padding: 20px 50px 50px 50px;
    border: 1px solid #e8e8e8;
    box-shadow: 0 2px 10px rgb(0 0 0 / 12%);
  }

  #title-container {
    padding: 20px 0;
    border-bottom: 1px solid #e8e8e8;
  }

  #title-container input {
    font-size: 30px;
    border: 0;
    outline: none;
    width: 100%;
    line-height: 1;
  }

  #editor-text-area {
    min-height: 800px;
    margin-top: 20px;
  }
}
</style>