搭建学校oj平台-vue引入markdown富文本编辑器

最新推荐文章于 2023-11-12 12:38:00 发布
最新推荐文章于 2023-11-12 12:38:00 发布
阅读量300 收藏
点赞数 2
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52839873/article/details/130071900
版权

标题vue引入markdown富文本编辑器

gitee仓库代码在文章尾部

markdown使用v-md-editor

v-md-editor 是基于 Vue 开发的 markdown 编辑器组件

http://ckang1229.gitee.io/vue-markdown-editor/zh/

npm安装

$ npm install @kangc/v-md-editor@next --save

进阶版vue3中引入（web\src\main.js）

import { createApp } from 'vue';
import VMdEditor from '@kangc/v-md-editor/lib/codemirror-editor';
import '@kangc/v-md-editor/lib/style/codemirror-editor.css';
import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';
import '@kangc/v-md-editor/lib/theme/style/github.css';

// highlightjs
import hljs from 'highlight.js';

// codemirror 编辑器的相关资源
import Codemirror from 'codemirror';
// mode
import 'codemirror/mode/markdown/markdown';
import 'codemirror/mode/javascript/javascript';
import 'codemirror/mode/css/css';
import 'codemirror/mode/htmlmixed/htmlmixed';
import 'codemirror/mode/vue/vue';
// edit
import 'codemirror/addon/edit/closebrackets';
import 'codemirror/addon/edit/closetag';
import 'codemirror/addon/edit/matchbrackets';
// placeholder
import 'codemirror/addon/display/placeholder';
// active-line
import 'codemirror/addon/selection/active-line';
// scrollbar
import 'codemirror/addon/scroll/simplescrollbars';
import 'codemirror/addon/scroll/simplescrollbars.css';
// style
import 'codemirror/lib/codemirror.css';

VMdEditor.Codemirror = Codemirror;
VMdEditor.use(githubTheme, {
  Hljs: hljs,
});

const app = createApp(/*...*/);

app.use(VMdEditor);

使用

<template>
  <v-md-editor v-model="text" height="400px"></v-md-editor>
</template>

<script>
export default {
  data() {
    return {
      text: '',
    };
  },
};
</script>

github主题拓展引入

引入代码高亮语言包highlight.js （web\src\main.js）

import VueMarkdownEditor from '@kangc/v-md-editor';
import '@kangc/v-md-editor/lib/style/base-editor.css';
import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';
import '@kangc/v-md-editor/lib/theme/style/github.css';

// highlightjs 核心代码
import hljs from 'highlight.js/lib/core';
// 按需引入语言包
import json from 'highlight.js/lib/languages/json';

hljs.registerLanguage('json', json);

VueMarkdownEditor.use(githubTheme, {
  Hljs: hljs,
});

引入emoji表情包（web\src\main.js）

import VueMarkdownEditor from '@kangc/v-md-editor';
import createEmojiPlugin from '@kangc/v-md-editor/lib/plugins/emoji/index';
import '@kangc/v-md-editor/lib/plugins/emoji/emoji.css';

VueMarkdownEditor.use(createEmojiPlugin());

Katex 插件与Mermaid 插件

cdn 引入 mermaid 资源（web\public\index.html）
//
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js"></script>
// mermaid
<script src="https://unpkg.com/mermaid/dist/mermaid.min.js"></script>

在这里插入图片描述

引入插件（web\src\main.js）
import VueMarkdownEditor from '@kangc/v-md-editor';
import createKatexPlugin from '@kangc/v-md-editor/lib/plugins/katex/cdn';
import createMermaidPlugin from '@kangc/v-md-editor/lib/plugins/mermaid/cdn';
import '@kangc/v-md-editor/lib/plugins/mermaid/mermaid.css';
VueMarkdownEditor.use(createKatexPlugin());
VueMarkdownEditor.use(createMermaidPlugin());
使用katex
<template>
  <v-md-editor v-model="text" height="500px" />
</template>

<script>
export default {
  data() {
    return {
      text: '$$sum_{i=1}^n a_i=0$$',
    };
  },
};
</script>
使用mermaid
<template>
  <v-md-editor v-model="text" height="500px" />
</template>

<script>
const text = `\`\`\`mermaid
graph LR
A --- B
B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner);
\`\`\`
`;

export default {
  data() {
    return {
      text,
    };
  },
};
</script>

line-number

copy-code

总代码

main.js

import VMdEditor from '@kangc/v-md-editor/lib/codemirror-editor';
import '@kangc/v-md-editor/lib/style/codemirror-editor.css';
import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';
import '@kangc/v-md-editor/lib/theme/style/github.css';
// emoji
import createEmojiPlugin from '@kangc/v-md-editor/lib/plugins/emoji/index';
import '@kangc/v-md-editor/lib/plugins/emoji/emoji.css';
// katex
import createKatexPlugin from '@kangc/v-md-editor/lib/plugins/katex/cdn';
//mermaid
import createMermaidPlugin from '@kangc/v-md-editor/lib/plugins/mermaid/cdn';
import '@kangc/v-md-editor/lib/plugins/mermaid/mermaid.css';
//lineNumber
import createLineNumbertPlugin from '@kangc/v-md-editor/lib/plugins/line-number/index';
//copyCode
import createCopyCodePlugin from '@kangc/v-md-editor/lib/plugins/copy-code/index';
import '@kangc/v-md-editor/lib/plugins/copy-code/copy-code.css';

// 进阶markdown
import Codemirror from 'codemirror';
// mode
import 'codemirror/mode/markdown/markdown';
import 'codemirror/mode/javascript/javascript';
import 'codemirror/mode/css/css';
import 'codemirror/mode/htmlmixed/htmlmixed';
import 'codemirror/mode/vue/vue';
// edit
import 'codemirror/addon/edit/closebrackets';
import 'codemirror/addon/edit/closetag';
import 'codemirror/addon/edit/matchbrackets';
// placeholder
import 'codemirror/addon/display/placeholder';
// active-line
import 'codemirror/addon/selection/active-line';
// scrollbar
import 'codemirror/addon/scroll/simplescrollbars';
import 'codemirror/addon/scroll/simplescrollbars.css';
// style
import 'codemirror/lib/codemirror.css';

VMdEditor.Codemirror = Codemirror;


import hljs from 'highlight.js/lib/core';
import cpp from 'highlight.js/lib/languages/cpp';
hljs.registerLanguage('cpp', cpp);

VMdEditor.use(githubTheme, {
  Hljs: hljs,
  // extend(md) {
  //   // md为 markdown-it 实例，可以在此处进行修改配置,并使用 plugin 进行语法扩展
  //   
  // },
});

VMdEditor.use(createKatexPlugin());
VMdEditor.use(createMermaidPlugin());
VMdEditor.use(createEmojiPlugin());
VMdEditor.use(createLineNumbertPlugin());
VMdEditor.use(createCopyCodePlugin());


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

index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.jpg">
    <title>PGMA</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js"></script>
    <script src="https://unpkg.com/mermaid@9.2.1/dist/mermaid.min.js"></script>
  </body>
</html>

加入file-saver依赖保存文件

$ npm install file-saver --save

创建MarkdownIndexView.vue

<template>
    <v-md-editor 
        v-model="text"
        left-toolbar="undo redo clear | h bold italic strikethrough quote emoji | ul ol table hr | link image code | save"
        @save="save"
        height="500px" 
    />
</template>
  
<script>
import { saveAs } from 'file-saver';
export default {
    data() {
      return {
        text: "编写内容",
      };
    },
    methods: {
    save(text){
      console.log(text);
      let strData = new Blob([text], { type: 'md/plain;charset=utf-8' });
      saveAs(strData, "mkd.md");
    },
  },
};
</script>

效果

在这里插入图片描述

完结

上传git

https://gitee.com/wanhzhaoxuan0/oj/tree/e530721bbce1c894b838e890896a1fc49f19dc8b

呜呜呜～铁
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
利用marked.js写个简单Markdown编辑器(1)
GISXX
05-29 1万+
Markdown的语法简洁明了、学习容易，而且功能比纯文本更强，因此有很多人用它写博客。 最近想自己动手写一个博客系统，然后查了下博客系统一般构造，发现目前大部分博客把Markdown作为博客的标配了。网上有很多markdown的解析插件，我一开始用的事markdown-js.js，但这个插件实在太坑了，代码块和表格都不能很好的处理；然后又用了strapdown.js，只能说这个插件太好了，它会给
vue、marked 简洁markdown网页编辑器
weixin_45592677的博客
07-28 371
代码】vue、marked简洁markdown网页编辑器。
使用Vue自己做一个简单的MarkDown在线编辑器
weixin_30378623的博客
10-11 683
1.首先要下载mark组件。 npm install marked --save 2.在Vcontent.vue中简单写一些样式。 <template> <div class="wrap"> <div class="mark"> <textarea name="" id="" cols="25" rows...
vue引入markdown编辑器。实现文章发布。
itsxyu的博客
03-13 1716
下载 npm install mavon-editor --save main.js引入 import mavonEditor from 'mavon-editor' import 'mavon-editor/dist/css/index.css' Vue.use(mavonEditor) 页面使用。自带@change事件，两个参数分别为输入值和HTML渲染后的值得格式。通过v-ht...
OJ题目Markdown模板及常用Latex整理
weixin_45072620的博客
07-16 363
OJ题目Markdown模板及常用Latex整理。
前端项目-oj.markdown.zip
09-02
oj.markdown是专门为在线编程评测平台设计的Markdown解析器和渲染器。它可能具有以下特性： 1. **语法高亮**：oj.markdown可能支持代码块的语法高亮，使得代码部分更易于阅读和理解。 2. **自定义扩展**：可能增加了...
OJ系统汇总-2021-10-5(C)-32页.pdf
10-05
OJ系统汇总-2021-10-5(C)-32页.pdf
vue 中引用gojs绘制E-R图的方法示例
01-19
首先，在vue项目中安装gojs的依赖包，并在项目中引入。 创建tablePreview.vue <style> #sample{ position: relative; margin: 20px; } #myOverviewDiv { position: absolute; width:225px; height:...
OJ在线判题系统 - Vue 3 + Arcodesign + Springboot的 全栈项目，实现 在线做题，判题的功能
最新发布
05-19
该项目利用了基于springboot + vue + mysql的开发模式框架实现的课设系统，包括了项目的源码资源、sql文件、相关指引文档等等。 【项目资源】：包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理...
C++实现oj算法代码-贪心算法.zip
10-28
本压缩包包含了一系列用C++编写的、针对在线判题平台（Online Judge，简称oj）的贪心算法解决方案。 1. 贪心策略基础： 贪心算法并不保证总是得到全局最优解，但对某些问题，如霍夫曼编码、最小生成树（Kruskal's ...
浏览器中引用mermaid.js
OeMook的博客
11-12 654
浏览器引入mermaid.js
离线使用Mermaid画图
主要记录了工作之余胡乱学习的知识，大部分是入门级别的内容。 主要是为了自己未来有用到时能快速上手，相当于是个备忘录。 当然，也很开心其他人可以从中找到对自己有用的信息。^_^
12-08 4019
需求 初次接触Mermaid还是在写博客。当我发现竟然可以只靠标记出连接关系就能自动画出流程图时，我是惊喜的。这对于我这种喜欢画图的人来说帮助很大，它生成图片快速，且易于更改。 但是慢慢，我膨胀出了新的需求： 有时候生成图片和博客无关，我不想每次生成图片时都来这里，这样比较麻烦。对此，可以使用 Mermaid Live Editor ，但是这个外国网页会有时打开很慢。 此外，我会有无法接入互联网的时候。因此我想离线也能使用Mermaid画图 其实Mermaid能画很多类型的图，但是当前博客还没支持所有类型
js绘制流程图、图表------with mermaid.js
zjw0742的博客
11-25 5066
graph LR;     A--合并-->B;     A-->C;     B-->D;     C-->D;       mermaid.init({noteMargin: 10}, ".firstTest");
关于引入MD编辑器的前后端方案
爱飞的男孩的博客
10-25 880
这里需要注意的是pojo文件对应的Article的time数据类型应是LocalDateTime,否则在更改数据时会报错，其次label的使用方式应为“多个标签集中”如："标签1 标签2"，以某种符号连接起来（这里使用空格）到此为止，有关个人博客的比较棘手的问题已经解决一半了，在前端的布局与路由调整之后，下面的重点就是评论区、后台管理，主题与背景图等需要审美的东西，就在本项目开源后留给各位小伙伴了。早上看了很多不同的编辑器，最后选择了这个比较简单便捷的。使用方法很简单，具体请看我的这篇博客。
Mermaid语法大全
weixin_45017098的博客
06-13 3322
​ Mermaid是一个开源的、基于JavaScript的绘图库，它可以用简洁的、人类可读的文本描述和绘制流程图、序列图、甘特图、类图、实例图、状态图和部署图等不同类型的图表。Mermaid的语法简单易懂，支持针对不同类型图表的定制化设置，可以轻松绘制高质量的图表并嵌入到网页、Markdown文档和其它支持HTML的场景之中。此外，它还支持插件和编辑器的集成，使得用户可以更加高效地使用和管理Mermaid图表。Mermaid是一个接近理想状态的图表和流程图的设计工具，是众多开发者和作者的首选。
Mermaid制作甘特图
5年编程经验的老猿。
05-14 3840
最近因为项目需要，这几天一直在学习怎么用JAVAWEB取值制作甘特图，忙了几天，终于整理出来一个简单实用的方法。分享出来给大家参考使用。
Vue2使用vue-md-editor
m0_59541783的博客
10-25 2320
Vue2 对v-md-editor的简单使用
(二)设置hexo支持mermaid
机器人视觉感知
04-18 1890
hexo设置支持mermaid
Mermaid安装及绘制流程图
qq_46457076的博客
01-13 3186
使用 Mermaid 绘制流程图以及 Mermaid 的安装配置！
springboot vue的oj平台
02-08
SpringBoot Vue的OJ平台是一个基于SpringBoot后端和Vue前端技术构建的在线评测平台。它提供了一个用户友好的界面，让用户能够提交程序代码，并进行编译运行和评测。平台支持多种编程语言，包括Java、C++、Python等，用户可以选择自己擅长的语言进行编程。 该平台提供了丰富的题库，涵盖了算法、数据结构、计算机网络、操作系统等多个方向的题目。除了常规的编程题目外，还提供了一些竞赛题目，供用户在规定的时间内进行切磋比赛。 平台采用了权限管理系统，用户可以注册账号并登录使用。注册用户可以提交自己的解题代码，并获得实时的编译运行结果以及评测分数。用户还可以查看自己的提交记录、解题情况，以及平台上其他用户的解题情况。同时，平台也提供了排行榜功能，用户可以看到本周、本月甚至全年的编程比赛排名情况。 通过SpringBoot Vue的OJ平台，用户可以在练习编程的同时进行实时的代码评测，提高自己的编程能力。另外，平台还可以举办编程比赛，促进用户之间的技术交流和竞争，让用户能够更好地提升自己的编程技能。总的来说，该平台为编程爱好者提供了一个交流和学习的平台，让用户能够在编程的世界里不断进步。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值