nextjs中集成富文本编辑器wangEditor

背景

实现一个博客主站的文章生成系统，使用ssr去生成自己的文章，达到seo的效果。

技术栈

• [email protected]. [app-router]
• postgres@latest (本章不涉及)
• @wangeditor/[email protected] @wangeditor/[email protected]

使用

1. 引入富文本编辑器
   npm i -S @wangeditor/editor @wangeditor/editor-for-react
2. 基本的组件引入 目录: src/app/components/rich-text/index.tsx
   需要开启use client 可以试试不开，最后会贴上碰到的问题，以及解决方案

// 不加报错 useState only works in Client Components. Add the "use client" directive at the top of the file to use it
'use client'
import { IDomEditor, IEditorConfig, IToolbarConfig } from '@wangeditor/editor';
import { Editor, Toolbar } from '@wangeditor/editor-for-react';
import '@wangeditor/editor/dist/css/style.css';
import React, { useEffect, useState } from 'react';
import './index.scss';

export interface IRichTextProps {
  /**
   * 富文本内容
   * @default ''
   */
  defaultContent?: string;
  /**
   * 富文本提示文字
   * @default '请输入内容'
   */
  placeholder?: string;
  /**
   * 富文本内容变化回调
   * @param html 富文本内容
   */
  onChange?: (html: string) => void;
}

export default function RichText(props: IRichTextProps) {
  const { defaultContent = '', placeholder = '请输入内容', onChange } = props;
  // editor 实例
  const [editor, setEditor] = useState<IDomEditor | null>(null);
  // 编辑器内容
  const [html, setHtml] = useState(defaultContent);
  // 工具栏配置
  const toolbarConfig: Partial<IToolbarConfig> = {};
  // 编辑器配置
  const editorConfig: Partial<IEditorConfig> = {
    placeholder
  };
  // 及时销毁 editor ，重要！
  useEffect(() => {
    return () => {
      if (editor === null) return;
      editor.destroy();
      setEditor(null);
    };
  }, [editor]);

  const handleChange = (editor: IDomEditor) => {
    const h = editor.getHtml();
    setHtml(h);
    onChange && onChange(h);
  };    

  return (
    <>
      <div style={{ border: '1px solid #ccc', zIndex: 100 }}>
        <Toolbar
          editor={editor}
          defaultConfig={toolbarConfig}
          mode="default"
          style={{ borderBottom: '1px solid #ccc' }}
        />
        <Editor
          defaultConfig={editorConfig}
          value={html}
          onCreated={setEditor}
          onChange={handleChange}
          mode="default"
        />
      </div>
    </>
  );
}

3. 页面中的使用 目录： src/app/rich/page.tsx

import dynamic from 'next/dynamic'
import { Metadata } from 'next';

// 关闭服务端渲染 否则报错 ReferenceError: Element is not defined
const RichText = dynamic(() => import("../components/rich-text"), {
  ssr: false,
});

export const metadata: Metadata = {
  title: '创建数据',
}

export default function CreateText() {
  return (
    <div className='a'>
        <RichText />
    </div>
  );
}

4. 以上基本上代码层面没问题了，问题会出现在第三方插件和nextjs集成的一些地方

问题

针对性的说一下wangeditor和nextjs一起使用出现的问题

1. TypeError: Cannot set property navigator of #