Vue Markdown编辑器toast-ui/editor

1、安装

yran add @toast-ui/editor

2、完整示例

<template>

  <div class="page-container">

    <div id="editor" style="width: 100%; height: 100%;"/>

    <n-flex justify="end" class="operation-container">

      <n-button type="primary" @click="saveToLocal"><n-icon size="16"><SaveOutline /></n-icon>保存到本地</n-button>

      <n-button type="primary" @click="saveToServe"><n-icon size="16"><PaperPlaneOutline /></n-icon>保存到服务器</n-button>

    </n-flex>

    <div class="toastui-editor-contents">

      <div v-html="htmlText"></div>

    </div>

  </div>

</template>

<script setup lang="ts">

import { ref, onMounted } from 'vue';

import Editor from '@toast-ui/editor';

import '@toast-ui/editor/dist/toastui-editor.css';

import { SaveOutline } from '@vicons/ionicons5'

import { PaperPlaneOutline } from '@vicons/ionicons5'

import axios from 'axios'

import { useMessage } from 'naive-ui'

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vim实战:使用Vim实现图像分类任务(一)

文章目录 摘要安装包安装timm 数据增强Cutout和MixupEMA项目结构编译安装Vim环境环境安装过程安装库文件 计算mean和std生成数据集 摘要 论文&#xff1a;https://arxiv.org/pdf/2401.09417v1.pdf 翻译&#xff1a; 近年来&#xff0c;随着深度学习的发展&#xff0c;视觉模型…

JUC并发编程01——进程,线程(详解),并发和并行

目录 1.进程和线程的概念及对比1.进程概述 2.线程3.对比 2.并行与并发1.并发2.并行 3.线程详解3.1.创建和运行线程3.1.1.Thread3.1.2.Runnable结合Thread 创建线程3.1.3.Callable 3.2线程方法APIrun startsleep yieldjoininterrupt打断线程打断 park终止模式 daemon不推荐使用的…

基于Java SSM框架实现校园快领服务系统项目【项目源码+论文说明】计算机毕业设计

基于java的SSM框架实现校园快领服务系统演示 摘要 随着科学技术的飞速发展&#xff0c;各行各业都在努力与现代先进技术接轨&#xff0c;通过科技手段提高自身的优势&#xff1b;对于校园快领服务系统当然也不能排除在外&#xff0c;随着网络技术的不断成熟&#xff0c;带动了…

骨传导耳机的技术原理是什么?和传统耳机相比有哪些优点?

骨传导耳机通过人体骨骼来传递声音&#xff0c;可以绕过耳道和耳膜直接传达音频到听者的内耳&#xff0c;开放双耳的佩戴方式可以在享受音乐或通话的同时保持对周围环境的感知&#xff0c;这种设计在户外活动或运动等场景下的使用尤为实用&#xff0c;可以避免堵塞耳朵&#xf…

CHS_08.2.3.6_1+生产者-消费者问题

CHS_08.2.3.6_1生产者-消费者问题 问题描述问题分析思考&#xff1a;能否改变相邻P、V操作的顺序&#xff1f;知识回顾 在这个小节中 我们会学习一个经典的进程同步互斥的问题 问题描述 并且尝试用上个小节学习的p v操作 也就是信号量机制来解决这个生产者消费者问题 问题的描…

什么是IDE,新手改如何选择IDE?

IDE 是 Integrated Development Environment&#xff08;集成开发环境&#xff09;的缩写&#xff0c;它是一种软件应用程序&#xff0c;为程序员提供了一站式的开发环境&#xff0c;整合了多种工具和服务&#xff0c;以便高效地创建、修改、编译、调试和运行软件程序。IDE 集成…

大力说视频号第三课:视频小店

自从腾讯推出视频号之后&#xff0c;大家非常明显的感觉到&#xff0c;视频号正以势不可挡的姿势走向独立发展。那么&#xff0c;依托于微信生态的视频号&#xff0c;未来将迎来哪些精彩发展呢&#xff1f; 让我们一同来揭开“视频号小店”的神秘面纱&#xff0c;了解一下玩法…

深度学习框架——动态图和静态图

深度学习框架之动态图 vs 静态图 &#x1f335;文章目录&#x1f335; &#x1f333;引言&#x1f333;&#x1f333;静态图框架解析&#x1f333;静态图优势静态图局限性 &#x1f333;动态图框架解析&#x1f333;动态图优势动态图局限性 &#x1f333;应用场景&#x1f333;…

有色金属矿山采选智能工厂数字孪生可视化,推进矿采选业数字化转型

有色金属矿山采选智能工厂数字孪生可视化&#xff0c;推进矿采选业数字化转型。随着科技的不断发展&#xff0c;数字化转型已经成为各行各业发展的必然趋势。有色金属矿采选业作为传统工业的重要组成部分&#xff0c;也面临着数字化转型的挑战。为了更好地推进有色金属矿采选业…

百无聊赖之JavaEE从入门到放弃(十七)时间处理相关类

目录 一.Date 时间类 二.DateFormat 类和 SimpleDateFormat 类 三.Calendar 日历类 “时间如流水&#xff0c;一去不复返”&#xff0c;时间是一维的。所以&#xff0c;我们需要一把刻度尺来表达和度 量时间。在计算机世界&#xff0c;我们把 1970 年 1 月 1 日 00:00:00 定…

张维迎《博弈与社会》多重均衡与制度和文化(4)路径依赖的困惑

在前述计算机产品标准化的问题中&#xff0c;有两个纳什均衡&#xff1a;都生产有5.25英寸软盘驱动器的计算机和都生产有3.5英寸软盘驱动器的计算机。假设一开始企业只能生产有5.25英寸软盘驱动器的计算机&#xff0c;生产3.5英寸软盘驱动器计算机的技术随后出现&#xff0c;企…

Next.js如何正确处理跨域问题?

以前一直使用Vue来写前端。去年下半年接手了一个基于React Next.js的项目&#xff0c;于是顺带学习了一下Next.js。由于Next.js的特点&#xff0c;这个项目的前后端是放在一起的。一开始没什么问题&#xff0c;看了半天文档就上手了。 上周我们需要在另一个网页项目中&#x…

C#,桌面游戏编程,数独游戏(Sudoku Game)的算法与源代码

本文包括以下内容&#xff1a; &#xff08;1&#xff09;数独游戏的核心算法&#xff1b; &#xff08;2&#xff09;数独游戏核心算法的源代码&#xff1b; &#xff08;3&#xff09;数独游戏的部分题目样本&#xff1b; &#xff08;4&#xff09;适老版《数独》的设计原则…

C#,哥伦布数(Golomb Number)的算法与源代码

1 哥伦布数&#xff08;Golomb Number&#xff09; 哥伦布数&#xff08;Golomb Number&#xff09;是一个自然数的非减量序列&#xff0c;使得n在序列中正好出现G&#xff08;n&#xff09;次。前几个15的G&#xff08;n&#xff09;值为&#xff1a;1 2 2 3 3 4 4 4 5 5 5 6…

B. Minimize Inversions

给你两个长度为 n 的排列 a 和 b 。一个排列是由从 1 到 n 的 n 个元素组成的数组&#xff0c;其中所有元素都是不同的。例如&#xff0c;数组 [2,1,3] 是一个排列&#xff0c;但是 [0,1] 和 [1,3,1] 不是。 你可以(随心所欲地)选择两个索引 i 和 j &#xff0c;然后同时把 ai …

代码随想录算法训练营第三十三天|509. 斐波那契数 ,● 70. 爬楼梯 , 746. 使用最小花费爬楼梯

确定dp数组&#xff08;dp table&#xff09;以及下标的含义确定递推公式dp数组如何初始化确定遍历顺序举例推导dp数组 代码随想录 视频&#xff1a;从此再也不怕动态规划了&#xff0c;动态规划解题方法论大曝光 &#xff01;| 理论基础 |力扣刷题总结| 动态规划入门_哔哩哔哩…

串口通讯(串行接口通讯)

文章目录 一、串行通讯是什么&#xff1f;二、种类三、并行与串行的区别四、通信方式总结 一、串行通讯是什么&#xff1f; 串行通讯是通信双方按位进行&#xff0c;遵守时序的一种通信方式。 串行通信中&#xff0c;将数据按位依次传输&#xff0c; 每位数据占据固定的时间长…

计算机图形学 实验

题目要求 1.1 实验一&#xff1a;图元的生成&#xff1a;直线、圆椭区域填充 你需要完成基本的图元生成算法&#xff0c;包括直线和椭圆。 在区域填充中&#xff0c;要求你对一个封闭图形进行填充。你需要绘制一个封 闭图形&#xff08;例如多边形&#xff09;&#xff0c;并选…

2024美赛数学建模问题A题思路模型分析 ——资源可用性和性别比例

虽然有些动物物种不存在通常的雄性或雌性&#xff0c;但大多数物种基本上都是雄性或雌性。虽然许多物种在出生时的性别比例为 1:1&#xff0c;但其他物种的性别比例却偏离了平均值。这就是所谓的适应性性别例变异。例如&#xff0c;美洲鳄孵卵巢的温度会影响其出生时的性别比例…

Hadoop3.x基础(3)- MapReduce

来源: B站尚硅谷 目录 MapReduce概述MapReduce定义MapReduce优缺点优点缺点 MapReduce核心思想MapReduce进程常用数据序列化类型MapReduce编程规范WordCount案例实操本地测试提交到集群测试 Hadoop序列化序列化概述自定义bean对象实现序列化接口&#xff08;Writable&#xff…