如何使用原生JavaScript（Vanilla JS）在网站中部署Lexical富文本编辑器？

一、获取Lexical文件（部署到服务器） #

Lexical不像TinyMCE那样提供直接下载的独立包，主要有两种方式获取可部署的文件：

• 通过npm打包生成
  1. 在本地项目目录执行命令：npm install lexical @lexical/react（React场景）或npm install lexical（纯JS场景）
  2. 用Webpack、Vite这类打包工具，把Lexical相关依赖打包成静态JS/CSS文件，之后将打包好的文件上传到你的服务器静态资源目录
• 直接使用CDN链接（无需本地部署）
  不用自己下载文件，直接在HTML里引入CDN提供的脚本和样式，适合快速测试或者不想折腾构建工具的场景

二、快速在网站中接入Lexical（纯JS方案，类似TinyMCE的简便方式） #

如果你习惯TinyMCE那种直接插入JS的用法，用CDN+纯JS的方案最省心：

1. 先在HTML里添加编辑器的容器：

<div id="editor-container"></div>

2. 引入Lexical的CDN脚本：

<script src="https://unpkg.com/lexical@latest"></script>
<script src="https://unpkg.com/@lexical/rich-text@latest"></script>
<script src="https://unpkg.com/@lexical/link@latest"></script>
<script src="https://unpkg.com/@lexical/list@latest"></script>

3. 添加初始化编辑器的脚本：

<script>
  const { createEditor } = lexical;
  const { $createParagraphNode, $createTextNode } = window['@lexical/rich-text'];
  const { LinkPlugin } = window['@lexical/link'];
  const { ListPlugin } = window['@lexical/list'];

  // 创建编辑器实例
  const editor = createEditor({
    namespace: 'MyCustomEditor',
    onError: (error) => console.error('编辑器报错:', error),
  });

  // 挂载编辑器到指定容器
  editor.setRootElement(document.getElementById('editor-container'));

  // 注册插件，让编辑器支持富文本、链接、列表功能
  editor.registerPlugin(LinkPlugin);
  editor.registerPlugin(ListPlugin);

  // 初始化编辑器默认内容
  editor.update(() => {
    const paragraph = $createParagraphNode();
    const textNode = $createTextNode('欢迎使用Lexical编辑器！');
    paragraph.append(textNode);
    editor.setRoot(paragraph);
  });
</script>

三、自行部署Lexical静态文件到服务器 #

如果不想依赖CDN，想自己托管文件：

1. 本地新建文件夹，执行npm init -y初始化项目
2. 安装Lexical及所需插件：npm install lexical @lexical/rich-text @lexical/link @lexical/list
3. 用Vite或Webpack打包：比如用Vite的话，新建main.js写入上面的初始化代码，执行vite build生成dist目录
4. 将dist目录里的JS、CSS文件上传到你的服务器静态资源文件夹，然后在HTML里引入这些本地文件即可

内容的提问来源于stack exchange，提问作者sthr