vue项目页面嵌入代码块vue-prism-editor的实现


Posted in Javascript onOctober 30, 2020

需求:

vue项目页面嵌入代码块vue-prism-editor的实现

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即可

vue项目页面嵌入代码块vue-prism-editor的实现

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项目页面嵌入代码块vue-prism-editor的实现

卸载低版本vue-template-compiler

npm uninstall vue-template-compiler

然后安装跟vue同样版本的vue-template-compiler

npm install vue-template-compiler@2.6.11

到此这篇关于vue项目页面嵌入代码块vue-prism-editor的文章就介绍到这了,更多相关vue项目页面嵌入代码块内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
对字符串进行HTML编码和解码的JavaScript函数
Feb 01 Javascript
js 实现菜单上下显示附效果图
Nov 21 Javascript
jquery简单实现滚动条下拉DIV固定在头部不动
Nov 25 Javascript
Javascript 修改String 对象 增加去除空格功能(示例代码)
Nov 30 Javascript
JavaScript中实现依赖注入的思路分享
Jan 15 Javascript
javascript模拟评分控件实现方法
May 13 Javascript
JS实现网页上随机产生超链接地址的方法
Nov 09 Javascript
JS实现字符串转驼峰格式的方法
Dec 16 Javascript
基于JavaScript实现的插入排序算法分析
Apr 14 Javascript
bootstrap datepicker插件默认英文修改为中文
Jul 28 Javascript
create-react-app中添加less支持的实现
Nov 15 Javascript
JS实现躲避粒子小游戏
Jun 18 Javascript
解决vue侦听器watch,调用this时出现undefined的问题
Oct 30 #Javascript
vue2.0 watch里面的 deep和immediate用法说明
Oct 30 #Javascript
JavaScript实现轮播图效果
Oct 30 #Javascript
vue组件添加事件@click.native操作
Oct 30 #Javascript
解决removeEventListener 无法清除监听的问题
Oct 30 #Javascript
详解 javascript对象创建模式
Oct 30 #Javascript
ES6中的Javascript解构的实现
Oct 30 #Javascript
You might like
动漫女神老婆无限好,但日本女生可能就不是这么一回事了!
2020/03/04 日漫
谈谈新手如何学习PHP 默默经典版本
2009/08/04 PHP
理解和运用PHP中的多态性[译]
2011/08/02 PHP
php字符串分割函数explode的实例代码
2013/02/07 PHP
php中eval函数的危害与正确禁用方法
2014/06/30 PHP
使用 PHPStorm 开发 Laravel
2015/03/24 PHP
php文件上传后端处理小技巧
2016/05/22 PHP
jquery slibings选取同级其他元素的实现代码
2013/11/15 Javascript
用javascript替换URL中的参数值示例代码
2014/01/27 Javascript
深入浅出分析javaScript中this用法
2015/05/09 Javascript
仿百度换肤功能的简单实例代码
2016/07/11 Javascript
JavaScript中setter和getter方法介绍
2016/07/11 Javascript
Vue中使用vux的配置详解
2017/05/05 Javascript
js 获取html5的data属性实现方法
2017/07/28 Javascript
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
2019/05/31 Javascript
Vue CLI3基础学习之pages构建多页应用
2019/06/02 Javascript
在Vue中使用HOC模式的实现
2020/08/23 Javascript
python实现媒体播放器功能
2018/02/11 Python
Python cookbook(数据结构与算法)将多个映射合并为单个映射的方法
2018/04/19 Python
numpy中的delete删除数组整行和整列的实例
2018/05/09 Python
TensorFlow数据输入的方法示例
2018/06/19 Python
python使用knn实现特征向量分类
2018/12/26 Python
Python Selenium 设置元素等待的三种方式
2020/03/18 Python
Django REST Swagger实现指定api参数
2020/07/07 Python
Python性能分析工具py-spy原理用法解析
2020/07/27 Python
Django中和时区相关的安全问题详解
2020/10/12 Python
Python识别处理照片中的条形码
2020/11/16 Python
东方电视购物:东方CJ
2016/10/12 全球购物
美国旅游网站:Tours4Fun
2017/02/17 全球购物
下面这个程序执行后会有什么错误或者效果
2014/11/03 面试题
如何客观的进行自我评价
2013/12/17 职场文书
挂牌仪式主持词
2014/03/20 职场文书
产品调价通知函
2015/04/20 职场文书
婚宴主持词
2015/06/30 职场文书
美德少年主要事迹材料
2015/11/04 职场文书
python基于机器学习预测股票交易信号
2021/05/25 Python