扩展编辑器，整合搜索...问题解决清单捏:)

浅更新一下，最近压力比较大，几个项目同时并行，还要修好多大佬提出的 bug，有点痛并快乐的感觉吧，闲言少叙...

扩展 Toast UI Markdown 编辑器 React 组件，实现图片上传与其他功能

这篇简述一下 Toast UI 编辑器的自定义事件处理（以图片上传为例）

首先知道我们要处理什么，一个是插入图片是将原来的直接输入 base64 的方式改为上传到后端，然后要封装为通用组件在所有地方使用

图片上传

首先我们追一下源码

我们发现这里预留了一个 hook，其接收两个参数，一个是文件（二进制），还有一个回调函数

于是我们可以写一个函数来完成上传

typescript
1const handleImageUpload = async (
2      blob: Blob,
3      callback: (url: string, altText: string) => void,
4    ) => {
5      const formData = new FormData();
6      formData.append('file', blob);
7
8      const response = await fetch('/api/v1/upload', {
9        method: 'POST',
10        headers: {

封装组件

组件这里可能就是一点不太一样，因为我们需要 ref 拿到其实例上的函数 getMarkdown()，我们需要将 ref 做一下传递：

typescript
1useImperativeHandle(ref, () => ({
2      getInstance: () => editorRef.current?.getInstance(),
3      getRootElement: () => editorRef.current?.getRootElement() || null,
4      setMarkdown: (markdown: string) => {
5        editorRef.current?.getInstance().setMarkdown(markdown);
6      },
7      context: editorRef.current?.context,
8      setState: editorRef.current?.setState,
9      forceUpdate: editorRef.current?.forceUpdate,
10    }));

我们使用 useImperativeHandle 传递之后，然后可以封装为组件

typescript
1import { getToken } from '@/utils/token';
2import { FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons';
3import '@toast-ui/editor/dist/toastui-editor.css';
4import { Editor } from '@toast-ui/react-editor';
5import { Button, message } from 'antd';
6import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
7
8type EditorHandle = {
9  getInstance: () => Editor | null;
10  getRootElement: () => HTMLElement | null;

然后我们在所需地方直接使用即可：

typescript
1<CustomEditor ref={editorRef} />

用 ES 迁移到 MeiliSearch

要被es折磨疯了...对于小服务器和轻需求，它实在太重了！！！

实现迁移非常简单，首先是配置文件：

java
1package com.grtsinry43.grtblog.config;
2
3import org.springframework.context.annotation.Bean;
4import org.springframework.context.annotation.Configuration;
5import com.meilisearch.sdk.Client;
6import com.meilisearch.sdk.Config;
7
8/**
9 * @author grtsinry43
10 * @date 2025/2/11 14:20

实现搜索逻辑：

java
1package com.grtsinry43.grtblog.service;
2
3import com.grtsinry43.grtblog.dto.AggregatedSearchResult;
4import com.grtsinry43.grtblog.dto.AggregatedSearchResult.HighlightedArticleDocument;
5import com.grtsinry43.grtblog.dto.AggregatedSearchResult.HighlightedMomentDocument;
6import com.grtsinry43.grtblog.dto.AggregatedSearchResult.HighlightedPageDocument;
7import com.grtsinry43.grtblog.esdao.ArticleDocument;
8import com.grtsinry43.grtblog.esdao.MomentDocument;
9import com.grtsinry43.grtblog.esdao.PageDocument;
10import com.meilisearch.sdk.Client;

最后配置数据同步：

java
1package com.grtsinry43.grtblog.service;
2
3import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
4import com.fasterxml.jackson.core.JsonProcessingException;
5import com.fasterxml.jackson.databind.ObjectMapper;
6import com.grtsinry43.grtblog.entity.Article;
7import com.grtsinry43.grtblog.entity.Page;
8import com.grtsinry43.grtblog.entity.StatusUpdate;
9import com.grtsinry43.grtblog.esdao.ArticleDocument;
10import com.grtsinry43.grtblog.esdao.MomentDocument;

实测其性能和体验有很大提高。