Vue3使用ckeditor5，加载mathtype组件，并将最终结果转化为latex格式输出

最新推荐文章于 2024-07-11 09:33:07 发布

莫尔道嘎老范

最新推荐文章于 2024-07-11 09:33:07 发布

阅读量664

点赞数 1

分类专栏：使用方法文章标签：前端 vue

本文链接：https://blog.csdn.net/weixin_44134588/article/details/136511028

版权

使用方法专栏收录该内容

12 篇文章 0 订阅

订阅专栏

本文详细描述了如何在Vue3项目中使用Vite构建工具，并介绍了在项目中集成Ckeditor5时需要注意的依赖版本管理和配置步骤，包括vite.config.ts的修改、main.ts的配置以及使用mathml2latex进行数学公式转换。

摘要由CSDN通过智能技术生成

vue3项目直接用vite搭建就行。我用的是4.1.0版本的vite
接下来说一下要注意的几个点：

1、ckeritor的相关依赖安装必须`版本相同`，不然会报依赖重复的错误

主要有以下依赖：

    "@ckeditor/ckeditor5-basic-styles": "^38.0.1",
    "@ckeditor/ckeditor5-editor-classic": "^38.0.1",
    "@ckeditor/ckeditor5-essentials": "^38.0.1",
    "@ckeditor/ckeditor5-link": "^38.0.1",
    "@ckeditor/ckeditor5-paragraph": "^38.0.1",
    "@ckeditor/ckeditor5-theme-lark": "^38.0.1",
    "@ckeditor/ckeditor5-vue": "^5.1.0",
    "@ckeditor/vite-plugin-ckeditor5": "^0.1.3",
    "@wiris/mathtype-ckeditor5": "^8.3.1",

依次安装即可，举例：npm i @ckeditor/ckeditor5-basic-styles@38.0.1
其中最后两个分别是vue版本插件和支持数学公式的mathtype插件

2、修改vite.config.ts

直接贴上我的了：

import {defineConfig} from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';
import ckeditor5 from '@ckeditor/vite-plugin-ckeditor5';

export default defineConfig({
  plugins: [vue(), ckeditor5({theme: require.resolve('@ckeditor/ckeditor5-theme-lark')})],
  server: {
    host: '0.0.0.0',
    port: 8686, //这里自行更改
    open: false, //是否打开浏览器
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
  optimizeDeps: {
    exclude: ['@wiris/mathtype-html-integration-devkit'],
  },
});

3、修改main.ts文件

import {createApp} from 'vue';
import App from '@/App.vue';
import CKEditorPlugin from '@ckeditor/ckeditor5-vue';

const app = createApp(App);
app.use(CKEditorPlugin);
app.mount('#app');

4、创建vue文件并进行引用

在此之前需要安装mathml2latex,
npm i mathml2latex
主要用于将mathml转化为latex格式输出


<template>
    <ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
</template>
<script setup lang="ts">

import {ref, watch} from 'vue';
import {ClassicEditor} from '@ckeditor/ckeditor5-editor-classic';
import {Essentials} from '@ckeditor/ckeditor5-essentials';
import {Bold, Italic} from '@ckeditor/ckeditor5-basic-styles';
import {Link} from '@ckeditor/ckeditor5-link';
import {Paragraph} from '@ckeditor/ckeditor5-paragraph';
import MathType from '@wiris/mathtype-ckeditor5/src/plugin';
import MathMl2LaTeX from 'mathml2latex';

const editor = ref(ClassicEditor);
const editorData = ref('<math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><mi>a</mi><mo>+</mo><mi>b</mi><mo>−</mo><mn>8</mn><mo>∗</mo><mroot><mn>2</mn><mn>3</mn></mroot></math>');
const editorConfig = ref({
  plugins: [Essentials, Bold, Italic, Link, Paragraph, MathType],
  toolbar: {
    items: ['bold', 'italic', 'link', 'undo', 'redo', 'MathType', 'ChemType'],
  },
});
watch(
  editorData,
  (params: string | any[]) => {
    if (!params) return;
    let mathmlStr = params.slice(3, -4);
    const latexStr = MathMl2LaTeX.convert(mathmlStr ); 
    console.log('🚀 ~ latex:', latexStr );
  },
  {
    deep: true,
  }
);
</script>