【element-tiptap】如何将编辑器初始化为全屏显示？

源码地址：
https://github.com/Leecason/element-tiptap
我们在学习一个项目的代码的时候，最好的学习方式就是带着问题学习。就像题目的这个小问题，今天就一起来探索这一课题吧！
首先看下项目启动后的页面

这个小符号明显就是控制编辑器缩放的。
当前的路由是这个 demos/views/Simple.vue
其中有一个 Fullscreen 配置项，看名字咱们就能看出来是缩放控制
我们点进去看一下它的定义

import type { Editor } from '@tiptap/core';
import { Extension } from '@tiptap/core';
import FullscreenCommandButton from '@/components/MenuCommands/FullscreenCommandButton.vue';

const Fullscreen = Extension.create({
  name: 'fullscreen',

  addOptions() {
    return {
      ...this.parent?.(),
      button({ editor }: { editor: Editor }) {
        return {
          component: FullscreenCommandButton,
        };
      },
    };
  },
});

export default Fullscreen;

它是使用了tiptap 提供的 Extension.create 方法，创建出来的扩展，对应的组件呢，就是 FullscreenCommandButton。这个组件的定义稍微有点长，主要看控制缩放的属性是怎么来的

const isFullscreen = inject('isFullscreen', false);
const toggleFullscreen = inject('toggleFullscreen');

可以看到，这个属性是通过 inject 注入的，inject 是 Vue3 中，接收祖先组件数据的方法，发出数据的祖先组件需要使用 provide 发出数据。那么我们就在全局搜一下 isFullscreen 属性还在哪里出现好了
就是在 src/components/ElementTiptap.vue 里面

// provide定义子组件可以访问的数据
provide('isFullscreen', isFullscreen);
provide('toggleFullscreen', toggleFullscreen);

那么我们只需要，把 isFullscreen 的默认值改为 true，即可实现编辑器初始化就显示全屏效果啦

const isFullscreen = ref(true);

原文地址：https://blog.csdn.net/weixin_45855469/article/details/142787444

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！