将 vue文件转为字符串在Codemirror里面展示

第一种直接引入

import index from "./FFCesiumExample/basicOperationInterface/addIconMap.vue?raw";

index直接就是字符串。但是出现一个问题就是build的时候可以出警告,。so还有第二种

const readFile = (filePath) => {// 创建一个新的xhr对象let xhr = null;if (window.XMLHttpRequest) {xhr = new XMLHttpRequest();} else {// eslint-disable-next-linexhr = new ActiveXObject("Microsoft.XMLHTTP");}const okStatus = document.location.protocol === "file" ? 0 : 200;xhr.open("GET", filePath, false);xhr.overrideMimeType("text/html;charset=utf-8");xhr.send(null);return xhr.status === okStatus ? xhr.responseText : null;
};

使用时:

传入url文件路径


let inedx =  readFile(url);

嘎嘎嘎就好了

然后codemirror使用

<Codemirrorclass="experience-editor-code"v-model:value="code":options="cmOptions"borderref="myCm"></Codemirror>//伪代码
code.value = index

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

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

相关文章

dockers安装mysql

1.dockerhub上搜索自己需要安装得镜像版本 dockerhub网址&#xff1a;https://hub-stage.docker.com docker pull mysql:5.7 #下载自己需要得版本2.启动容器实例&#xff0c;并且挂载容器数据卷 docker run -d -p 3306:3306 --privilegedtrue \ -v /home/mysql/log:/var/log/…

python 构造函数

在Python中&#xff0c;构造函数是一个特殊的方法&#xff0c;用于在创建类的实例&#xff08;对象&#xff09;时自动调用&#xff0c;以初始化对象的属性。构造函数在类中是通过__init__方法来定义的。它的主要作用是为新创建的对象设置初始状态&#xff0c;即初始化对象的属…

基于react native的图片放大旋转效果二

基于react native的图片放大旋转效果二 const TaskReceiveModal ({ onClick }) > {const spinValue useRef(new Animated.Value(0)).current;const scaleValue useRef(new Animated.Value(0)).current;const spinAnimation useRef(null);const spin spinValue.interpol…

微服务架构-微服务治理基础

目录 一、服务治理由来 1.1 概述 1.2 微服务治理的几个维度 1.2.1 服务定义和SLA 1.2.2 服务注册中心 1.2.3 服务生命周期管理 1.2.4 服务通信和链路治理 1.2.5 服务授权和通信安全 二、服务治理的目标与愿景 2.1 服务治理的愿景 2.2 服务治理的目标 2.2.1 标准化 …

墨天轮《2023年中国数据库行业年度分析报告》正式发布!

为明晰发展脉络&#xff0c;把握未来趋势&#xff0c;墨天轮于5月29日正式发布 《2023年中国数据库年度行业分析报告》。该报告由墨天轮联合业界专家学者共同编写&#xff0c;共330页&#xff0c;旨在梳理和洞察中国数据库行业的发展趋势、技术创新、市场动态以及面临的挑战&am…

Java-集合基础

集合 一、含义 集合是Java API所提供的一系列类&#xff0c;可以用于动态存放多个对象 (集合只能存对象)集合与数组的不同在于&#xff0c;集合是大小可变的序列&#xff0c;而且元素类型可以不受限定&#xff0c;只要是引用类型。(集合中不能放基本数据类型&#xff0c;但可以…

Source Insight 变量高亮快捷键F8 失效

SourceInsight4.0&#xff0c;使用的时候&#xff0c;高亮快捷键F8突然不能用了 查半天发现&#xff0c;是用了“有道翻译”的原因&#xff0c;热键冲突&#xff0c;如下&#xff0c;把下面的热键换一个就好了

中国商业化重水需求依赖进口满足 国内行业发展前景广阔

中国商业化重水需求依赖进口满足 国内行业发展前景广阔 重水又称氘化水或氘水&#xff0c;是水的一种&#xff0c;常温常压下为无色无味液体&#xff0c;它的摩尔质量比一般水要重。普通的水是由两个只具有质子的氢原子和一个氧16原子所组成&#xff0c;但在重水分子内的两个氢…

mac安装allure及allure:command not fund问题解决

一、下载 下载连接&#xff1a;https://github.com/allure-framework/allure2/releases 选择任意压缩包进行下载 二、解压 解压后是一个文件夹 三、打开终端 # bash终端 vim ~/.bash_profile # zsh终端 vim ~/.zshrc四、配置环境变量 export PATH/usr/bin:/bin:/usr/sb…

Flink系列二:DataStream API中的Source,Transformation,Sink详解(^_^)

在上面篇文章中已经对flink进行了简单的介绍以及了解了Flink API 层级划分&#xff0c;这一章内容我们主要介绍DataStream API 流程图解&#xff1a; 一、DataStream API Source Flink 在流处理和批处理上的 source 大概有 4 类&#xff1a; &#xff08;1&#xff09;基于本…

Python网页处理与爬虫实战:使用Requests库进行网页数据抓取

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢&#xff0c;在这里我会分享我的知识和经验。&am…

【前端】Vuex笔记(超详细!!)

最近花了两周时间&#xff0c;完完全全的跟着Vuex官方的视频学完了Vuex并且详详细细的做了笔记&#xff0c;其中总结部分是我对于整个视频课程的总结&#xff0c;视频部分是跟着视频做的笔记&#xff0c;如果总结部分有不懂的话&#xff0c;直接去视频部分查找对应的笔记即可&a…

ios:文本框默认的copy、past改成中文复制粘贴

问题 ios 开发&#xff0c;对于输入框的一些默认文案展示&#xff0c;如复制粘贴是英文的&#xff0c;那么如何改为中文的呢 解决 按照路径找到这个文件 ios/项目/Info.plist&#xff0c;增加 <key>CFBundleAllowMixedLocalizations</key> <true/> <…

Keras深度学习框架实战(1):图像分类识别

1、绪论 1.1 图像分类的定义 图像分类是计算机视觉领域中的一项基本任务&#xff0c;其定义是将输入图像分配给预定义类别中的一个或多个。具体来说&#xff0c;图像分类系统接受一个图像作为输入&#xff0c;并输出一个或多个类别标签&#xff0c;这些标签描述了图像中的内容…

第十三届蓝桥杯物联网试题(国赛)

还是那句话不能掉以轻心&#xff0c;全力以赴吧&#xff0c;遇事不要慌&#xff0c;该做的都做了&#xff0c;冷静沉稳的处理&#xff0c;看看配置&#xff0c;看看代码&#xff0c;还是不行就重启&#xff0c;都没问题换个板子 下面对比较复杂的部分的处理过程进行展现&#x…

git报错prohibited by Gerrit: not permitted: update

git push报错&#xff1a; Push to refs/for/[branch] to create a review, or get Push rights to update the branch. Contact an administrator to fix the permissions (prohibited by Gerrit: not permitted: update)原因&#xff1a; 使用Gerrit代码审核时&#xff0c;本…

CentOS 7基础操作02_优化Linux操作系统中的服务

1、实验环境 公司在文件服务器中新安装了CentOS系统.由于默认启动的服务程序较多&#xff0c;系统运行缓慢。现需要对系绞服务进行适当优化&#xff0c;减少一些不必要的自启动服务.并设置系统在开机后直接进入字符模式。 2、需求描述 根据实际使用需求对CentOS 7操作系统中的…

postgressql——PGPROC XLOG(6)

PGPROC相关结构 在共享内存中,核心数据结构围绕PROC_HDR指向的两个list:PROC和XACT PRCO内存连续,维护链表结构方便申请释放,对应每个后台服务进程,PID为OS标识、PGPROCNO为内部标识 XACT内存连续,维护快照需要的xmin和xid,XACT从PROC拆出来是为了更高的cache line命中…

IBM开源Granite Code模型,多尺寸可选,支持多种代码任务,性能媲美 CodeLlama

前言 近年来&#xff0c;大型语言模型&#xff08;LLM&#xff09;在代码领域展现出惊人的潜力&#xff0c;为软件开发流程带来了革命性的改变。代码 LLM 不仅能够生成高质量代码&#xff0c;还能帮助程序员修复错误、解释代码、编写文档等等&#xff0c;极大地提高了软件开发…

【kubernetes】探索k8s集群的存储卷、pvc和pv

目录 一、emptyDir存储卷 1.1 特点 1.2 用途 1.3部署 二、hostPath存储卷 2.1部署 2.1.1在 node01 节点上创建挂载目录 2.1.2在 node02 节点上创建挂载目录 2.1.3创建 Pod 资源 2.1.4访问测试 2.2 特点 2.3 用途 三、nfs共享存储卷 3.1特点 3.2用途 3.3部署 …