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

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>

效果:
在这里插入图片描述
转化前后的输出格式:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/433460.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

基于springboot实现的幼儿园管理系统

一、系统架构 前端&#xff1a;html | layui | jquery | css 后端&#xff1a;springboot | mybatis 环境&#xff1a;jdk1.8 | mysql | maven 二、代码及数据库 三、功能介绍 01. 登录页 02. 系统管理-用户管理 03. 系统管理-页面管理 04. 系统管理-角色管…

进制算法题(进制转换、Alice和Bob的爱恨情仇)

进制的本质 对于一个十进制数字&#xff0c;比如说153&#xff0c;其本质是每一个数位上的数字乘上这一位上的权重&#xff0c;即:153(1x)(5x)(3 x)而二进制&#xff0c;只不过是把10换成了2&#xff0c;任意一个非负整数都有唯一的一个二进制表示: 在计算机中&#xff0c;数字…

视频推拉流EasyDSS平台直播通道重连无法转推的原因排查与解决

视频推拉流EasyDSS视频直播点播平台&#xff0c;集视频直播、点播、转码、管理、录像、检索、时移回看等功能于一体&#xff0c;可提供音视频采集、视频推拉流、播放H.265编码视频、存储、分发等视频能力服务。 用户使用EasyDSS平台对直播通道进行转推&#xff0c;发现只要关闭…

Codesys自定义库的帮助文档的美化

文章目录 1.前言2.美化的方式2.1.利用html标签2.2.利用reStructuredText 3.相关说明3.1.使用reStructuredText时&#xff0c;中文注释的问题3.2.将文档需要的图片包含到库中3.3.文档的作用区域 1.前言 当我们在codesys中写好自己的库&#xff0c;并且发布给别人使用时&#xf…

vue基本用法

文本插值 {{}} 用来绑定data方法返回的对象属性 v-bind:为标签的属性绑定data方法中返回的属性 事件绑定v-on:xxx 简写为xxx 双向绑定v-model 条件渲染 v-if v-else v-else-if 动态渲染页面元素

数字政府建设中的锐捷力量:五维构建坚实的数字政务基础设施

3月1日,中国信息协会部分地方信息机构负责人会议暨信息服务业助力高质量发展研讨会在深圳成功召开。来自民政部、农业农村部、国家统计局、人民日报社等部委单位,全国省市信息协会、信息中心、大数据局负责人,信息化领域专家学者在内的230多名代表参加了会议。2024年是立足“二…

C# SwinV2 Stable Diffusion 提示词反推 Onnx Demo

目录 介绍 效果 模型信息 项目 代码 下载 C# SwinV2 Stable Diffusion 提示词反推 Onnx Demo 介绍 模型出处github地址&#xff1a;https://github.com/SmilingWolf/SW-CV-ModelZoo 模型下载地址&#xff1a;https://huggingface.co/SmilingWolf/wd-v1-4-swinv2-tagg…

【开源物联网平台】FastBee使用EMQX5.0接入步骤

​&#x1f308; 个人主页&#xff1a;帐篷Li &#x1f525; 系列专栏&#xff1a;FastBee物联网开源项目 &#x1f4aa;&#x1f3fb; 专注于简单&#xff0c;易用&#xff0c;可拓展&#xff0c;低成本商业化的AIOT物联网解决方案 目录 一、将java内置mqtt broker切换成EMQX5…

电商之战:实时监控竞争对手战术,掌握市场先机!

淘宝天猫、拼多多、抖音、小红书等国内平台&#xff0c;甚至包括亚马逊、速卖通等跨境商家&#xff0c;在竞争如此激烈的电商平台&#xff0c;想要脱颖而出&#xff0c;打造店铺的差异化运营&#xff0c;通过对竞争对手甚至选品的监控可以更好地了解市场趋势和变化。 这有助于…

Jmeter正则表达式提取器

伙伴们是否遇到过以下的场景&#xff1a; 响应报文类似下面的这样 我们要使用phrase后面的其中一个值。 使用正则表达式提取后匹配出多少值&#xff0c;提取结果如下&#xff1a; 现在的问题是&#xff0c;如果我们要使用正则表达式提取后的&#xff1a;使用其中的第1个和第1…

前端H5动态背景登录页面(上)

最近一段时间看一些关于前端的东西&#xff0c;下面分享两个非常不错的前端动态背景登陆页面&#xff0c;还有几个等后面有时间了再整理。 1、彩色气泡登录页面 下面是源代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8…

互联网智慧工地源码,“互联网+建筑大数据”SaaS微服务架构,支持PC端、手机端、数据大屏端

智慧工地源码&#xff0c;支持多端展示&#xff08;PC端、手机端、平板端&#xff09;SaaS微服务架构&#xff0c;项目监管端&#xff0c;工地管理端源码 智能时代的风暴已经融入了我们生活的每个方面&#xff0c;智能手机、iPad等移动终端智能设备已经成为我们生活的必需品。智…

[ 云计算 | AWS ] ChatGPT 竞争对手 Claude 3 上线亚马逊云,实测表现超预期

文章目录 一、前言二、Claude 3 介绍以及相关测试细节三、在亚马逊云科技上体验 Claude 33.1 在 Amazon Bedrock 服务中配置 Claude 33.2 为聊天配置使用 Claude 3 模型3.3 Caude 3 Sonet 聊天体验 四、文末总结五、参考文献 一、前言 3月4号&#xff0c;Anthropic 发布了号称…

基于el-tree实现懒加载穿梭条

一、关键代码 <template><div><!-- 左侧待选列表 --><div class"left-box"><p>待选列表</p><el-input placeholder"输入关键词过滤" v-model"leftFilterText" clearable/><el-treeref"tree…

鱼哥赠书活动第12期:《基于React低代码平台开发》

鱼哥赠书活动第12期&#xff1a;《基于React低代码平台开发》 一、React与低代码平台的结合优势二、基于React的低代码平台开发挑战三、基于React的低代码平台开发实践四、未来展望内容简介&#xff1a;作者简介如何阅读&#xff1a;适合阅读人群&#xff1a;赠书抽奖规则:往期…

OpenText™ Migrate 软件, 结构化、可重复的工作负载迁移,停机时间几乎为零

OpenText™ Migrate 允许用户将任何规模和各种复杂度的物理、虚拟和云工作负载轻松地迁移到任何环境&#xff0c;并且停机时间几乎为零。微调自动化有助于协调流程的每个阶段。 为什么选择 OpenText Migrate&#xff1f; 1、满足您所有迁移需求的单一解决方案 OpenText Migra…

SqlServer中连续号及断号查询—附源码

效果如下图所示&#xff1a; SqlServer中连续号及断号查询SQL如下&#xff1a; --1.定义临时表 DECLARE TestTemp TABLE(TestCode NVARCHAR(50),TestNum INT )DECLARE DataTemp TABLE(TestCode NVARCHAR(50),TestNumStr NVARCHAR(100) )--2.插入测试数据 INSERT INTO TestT…

供应链优化:降本增效的核心战略——张驰咨询

在当今这个高度竞争的商业环境中&#xff0c;企业为了保持竞争力&#xff0c;不断寻求降低成本和提升效率的策略变得至关重要。有效的成本控制和效率提升不仅能够增加企业的利润率&#xff0c;还能增强其市场地位和客户满意度。以下是一些实用的策略&#xff0c;旨在帮助企业实…

2024春招面试,2024年阿里Android高级面试题分享

前言 作为一个3-5年的Android工程师&#xff0c;我们经常会遇到这些瓶颈&#xff1a; 1.技术视野窄 长期在小型软件公司&#xff0c;外包公司工作&#xff0c;技术视野被限制的太厉害 2.薪资提升难 初中级Android岗位薪资上升空间有限&#xff0c;基本上你想拿15k以上&#…

android开发教程百度网盘,高并发系统基础篇

展望未来 操作系统 移动操作系统的演变过程&#xff0c;从按键交互的塞班功能机到触摸屏交互的Android/IOS智能机&#xff0c;从小屏幕手机到全面屏、刘海屏、水滴屏。任何系统无非干两件事&#xff1a;输入和输出&#xff0c;接收到外部输入信号后经过操作系统处理后输出信息…