编辑器的必备：vite5和vue3开发环境中使用jodit4富文本编辑器的实战指南

## 在vite5和vue3开发环境中使用jodit4富文本编辑器

### 安装依赖

npm install --save jodit

### 创建一个新的Vue项目

vue create my-jodit-project

### 在项目中添加jodit

在项目的package.json文件中，将jodit添加到依赖项中：

{
"dependencies": {
"jodit": "^4.0.0"
}
}

然后，在终端中运行以下命令来安装jodit：

npm install

### 在Vue组件中使用jodit

在您的Vue组件中，您可以使用`<jodit>`组件来创建富文本编辑器。

### 添加自定义插件

您可以使用jodit的插件系统来添加自定义功能。例如，您可以添加一个插件来支持上传图片。

import Jodit from "jodit";

// 创建一个新的jodit插件
const MyUploadPlugin = {
name: "my-upload-plugin",
init(jodit) {
// 添加一个按钮来触发文件上传对话框
jodit.toolbar.addButton("my-upload", {
icon: "cloud-upload",
tooltip: "上传图片",
exec: () => {
// 打开文件上传对话框
const input = document.createElement("input");
input.type = "file";
input.multiple = true;
input.accept = "image/*";
input.onchange = (e) => {
// 获取选中的文件
const files = e.target.files;

      // 遍历选中的文件并将其上传到服务器
      for (let i = 0; i < files.length; i++) {
        const file = files[i];

        // 使用FormData对象来发送文件
        const formData = new FormData();
        formData.append("file", file);

        // 使用fetch API来上传文件
        fetch("/upload", {
          method: "POST",
          body: formData,
        })
          .then((response) => {
            // 获取上传后的图片URL
            const url = response.json().url;

            // 将图片URL插入到编辑器中
            jodit.value += `<img src="${url}" />`;
          })
          .catch((error) => {
            console.error(error);
          });
      }
    };
    input.click();
  },
});

},
};

// 将插件添加到jodit中
Jodit.plugins.push(MyUploadPlugin);

### 添加自定义配置

您可以使用jodit的配置选项来自定义编辑器的外观和行为。例如，您可以设置编辑器的语言、字体和字号。

import Jodit from "jodit";

// 创建一个新的jodit实例
const editor = new Jodit(document.querySelector("#editor"), {
language: "zh_CN",
fontSize: "16px",
fontFamily: "Arial",
});

### 使用highlight.js实现代码块高亮

您可以使用highlight.js来实现代码块高亮。

// 在项目中安装highlight.js
npm install --save highlight.js

// 在项目中添加highlight.js的样式文件

// 在项目中添加highlight.js的脚本文件

// 使用highlight.js来高亮代码块
hljs.highlightAll();

### 全部代码

import Jodit from "jodit";
import "jodit/build/jodit.min.css";

// 创建一个新的jodit插件
const MyUploadPlugin = {
name: "my-upload-plugin",
init(jodit) {
// 添加一个按钮来触发文件上传对话框
jodit.toolbar.addButton("my-upload", {
icon: "cloud-upload",
tooltip: "上传图片",
exec: () => {
// 打开文件上传对话框
const input = document.createElement("input");
input.type = "file";
input.multiple = true;
input.accept = "image/*";
input.onchange = (e) => {
// 获取选中的文件
const files = e.target.files;

      // 遍历选中的文件并将其上传到服务器
      for (let i = 0; i < files.length; i++) {
        const file = files[i];

        // 使用FormData对象来发送文件
        const formData = new FormData();
        formData.append("file", file);

        // 使用fetch API来上传文件
        fetch("/upload", {
          method: "POST",
          body: formData,
        })
          .then((response) => {
            // 获取上传后的图片URL
            const url = response.json().url;

            // 将图片URL插入到编辑器中
            jodit.value += `<img src="${url}" />`;
          })
          .catch((error) => {
            console.error(error);
          });
      }
    };
    input.click();
  },
});

},
};

// 将插件添加到jodit中
Jodit.plugins.push(MyUploadPlugin);

// 在项目中安装highlight.js
import highlight from "highlight.js";
import "highlight.js/styles/default.css";

// 创建一个新的jodit实例
const editor = new Jodit(document.querySelector("#editor"), {
language: "zh_CN",
fontSize: "16px",
fontFamily: "Arial",
plugins: [MyUploadPlugin],
});

// 使用highlight.js来高亮代码块
highlight.highlightAll();