当前位置: 首页 > article >正文

【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);

在这里插入图片描述


http://www.kler.cn/news/341625.html

相关文章:

  • 如何用AI两小时上线自己的小程序
  • 量化交易常见策略
  • 【斯坦福CS144】Lab1
  • 基于springboot和vue.js 养老院管理系统设计与实现
  • AI生成视频
  • 4.扩散模型的似然函数最大化(1)
  • 如何制作低代码开发的视频教程?
  • 腾讯云SDK 下载
  • Solidity优质例子(二)物流的增删改查智能合约(附truffle测试)
  • docker 部署 postgres
  • vue3的v-model使用
  • JAVA思维提升
  • Python 实现常用的数据编码和对称加密
  • AI无人直播风口,云微客替你抓住了
  • 基于MicroPython的Raspberry Pi Pico控制DHT22温湿度传感器的设计方案
  • 前端学习第二天笔记 CSS选择 盒子模型 浮动 定位 CSS3新特性 动画 媒体查询 精灵图雪碧图 字体图标
  • 第十三章 Redis短信登录实战(基于Redis)
  • 2015年国赛高教杯数学建模D题众筹筑屋规划方案设计解题全过程文档及程序
  • PEFT学习
  • Android学习7 -- NDK2 -- 几个例子