vue项目页面嵌入代码块vue-prism-editor的实现
作者:韩大璐 发布时间:2024-04-27 16:14:03
需求:
1. 可输入代码,并且代码语法高亮
2. 支持编辑和不可编辑模式
3. 提交到后端到代码内容为字符串格式
实现
在gitbug上找到vue-prism-editor,可以满足以上需求。
使用
1.安装vue-prism-editor
npm install vue-prism-editor
由于vue-prism-editor需要依赖 prismjs,所以还需要安装prismjs
npm install prismjs
2.在需要使用vue-prism-editor的组件中引入
import { PrismEditor } from "vue-prism-editor";
import "vue-prism-editor/dist/prismeditor.min.css"; // import the styles somewhere
// import highlighting library (you can use any library you want just return html string)
import { highlight, languages } from "prismjs/components/prism-core";
import "prismjs/components/prism-clike";
import "prismjs/components/prism-javascript";
import "prismjs/themes/prism-tomorrow.css"; // import syntax highlighting styles
3.html代码
<prism-editor
class="my-editor height-300"
v-model="code"
:highlight="highlighter"
:line-numbers="lineNumbers"
></prism-editor>
code----为需要高亮显示的代码内容
highlighter----定义在methods中的一个方法,用于把code高亮显示
lineNumbers----是否可编辑标识
4.js代码
export default {
components: {
PrismEditor
},
data: () => ({
code: 'console.log("Hello World")',
lineNumbers: true, // true为编辑模式, false只展示不可编辑
}),
methods: {
highlighter(code) {
return highlight(code, languages.js); //returns html
}
}
};
5.css代码
<style lang="scss">
/* required class */
.my-editor {
background: #2d2d2d;
color: #ccc;
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
font-size: 14px;
line-height: 1.5;
padding: 5px;
}
/* optional */
.prism-editor__textarea:focus {
outline: none;
}
/* not required: */
.height-300 {
height: 300px;
}
</style>
注意: css样式必写,不然编辑器没有样式,只是纯白页面展示
“height-300” 是给编辑器设置高度的,高度可自行设置,也可以不设置,这个样式非必需
到这里,功能基本就实现了。
但是在过程中遇到一些问题,这里也一并总结。
问题
1.如果仅安装vue-prism-editor
,没有安装prismjs,会报以下错误,npm install prismjs
即可
2.如果报错中有提示升级或者安装ajv或者vue2.6.X版本,根据提示安装即可
npm install ajv@^6.9.1
npm install vue@^2.6.11
个人理解,如果ajv和vue版本过低,可能会导致vue-prism-editor
依赖的相关东西安装不上,建议升级完ajv和vue之后,再重新安装vue-prism-editor
和prismjs.
3.vue与vue-template-compiler版本不一致
卸载低版本vue-template-compiler
npm uninstall vue-template-compiler
然后安装跟vue同样版本的vue-template-compiler
npm install vue-template-compiler@2.6.11
来源:https://blog.csdn.net/weixin_41257563/article/details/109381066


猜你喜欢
- 前言今天继续分享mayfly-go开源代码中代码或者是包组织形式。犹豫之后这里不绘制传统UML图来描述,直接用代码或许能更清晰。开源项目地址
- 本文实例讲述了Python使用matplotlib模块绘制图像并设置标题与坐标轴等信息。分享给大家供大家参考,具体如下:进行图像绘制有时候需
- 本文实例讲述了Python实现监控键盘鼠标操作。分享给大家供大家参考,具体如下:# -*- coding: utf-8 -*-import
- Python的装饰器(decorator)是一个很棒的机制,也是熟练运用Python的必杀技之一。装饰器,顾名思义,就是用来装饰的,它装饰的
- 本文实例讲述了Yii2中SqlDataProvider用法。分享给大家供大家参考,具体如下:第一种方法:$totalCount = Yii:
- SQL防注入代码一<?php /** * 防sql注入 * @author: zhuyubing@gmail.com * */ /**
- 1、string-->numberstring类型 *1 即可变成 number类型2
- 本文中我们将通过一个例子来介绍SQL Server 2005的一个Bug,首先,在建立同义词链接Oracle的时候,我们会使用下面的语句:C
- 从MySQL 5.0.2开始,通过mysql_stmt_attr_set() C API函数实现了服务器端光标。服务器端光标允许在服务器端生
- 今天主题是实现并发服务器,实现方法有多种版本,先从简单的单进程代码实现到多进程,多线程的实现,最终引入一些高级模块来实现并发TCP服务器。说
- Event是Javascript中的重要事件,event代表事件的状态,专门负责对事件的处理,它的属性和方法能帮助我们完成很多和用户交互的操
- 1 之前我们学习了列表,知道列表可以用来存储一组数据,可以增删改查,可以遍历2 之前我们学习了字典,知道字典可以用来存储键值对,与列表类似,
- 关于在asp中不使用组件使得脚本sleep的办法还比较少见,可能比较好的办法是创建同步的xmlhttp request,直到获得的时间达到某
- varint今天本来在研究 OpenTelemetry 的基准性能测试 github.com/zdyj3170101…
- 这篇文章主要介绍了python tkinter canvas使用实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习
- 介绍我们在实际的开发工作中需要将django框架与swagger进行集成,用于生成API文档。网上也有一些关于django集成swagger
- 1. 创建微信公众号首先,你需要注册一个微信公众号。访问微信公众平台,使用你的微信账号登录,并按照提示创建一个新的公众号。2. 开通微信公众
- 本文实例讲述了JavaScript函数重载操作。分享给大家供大家参考,具体如下:上个星期四下午,接到了网易的视频面试(前端实习生第二轮技术面
- 一、前言今天有粉丝咨询了一个问题,他现在有两个列表,它们的元素都为字典,且字典都有一个key为id,现在想把这两个字典根据id合并为一个字典
- T-SQL 标识符在T-SQL语言中,对SQLServer数据库及其数据对象(比如表、索引、视图、存储过程、触发器等)需要以名称来进行命名并