快捷導(dǎo)航

vue項(xiàng)目頁(yè)面嵌入代碼塊vue-prism-editor的實(shí)現(xiàn)

更新時(shí)間：2020年10月30日 12:27:50 作者：韓大璐

這篇文章主要介紹了vue項(xiàng)目頁(yè)面嵌入代碼塊vue-prism-editor的實(shí)現(xiàn),本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

需求：

在這里插入圖片描述

1. 可輸入代碼，并且代碼語(yǔ)法高亮
2. 支持編輯和不可編輯模式
3. 提交到后端到代碼內(nèi)容為字符串格式

實(shí)現(xiàn)

在gitbug上找到vue-prism-editor，可以滿(mǎn)足以上需求。

使用

1.安裝vue-prism-editor

npm install vue-prism-editor

由于vue-prism-editor需要依賴(lài) 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----為需要高亮顯示的代碼內(nèi)容
highlighter----定義在methods中的一個(gè)方法，用于把code高亮顯示
lineNumbers----是否可編輯標(biāo)識(shí)

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樣式必寫(xiě)，不然編輯器沒(méi)有樣式，只是純白頁(yè)面展示
“height-300” 是給編輯器設(shè)置高度的，高度可自行設(shè)置，也可以不設(shè)置，這個(gè)樣式非必需

到這里，功能基本就實(shí)現(xiàn)了。
但是在過(guò)程中遇到一些問(wèn)題，這里也一并總結(jié)。

問(wèn)題

1.如果僅安裝vue-prism-editor，沒(méi)有安裝prismjs，會(huì)報(bào)以下錯(cuò)誤，npm install prismjs即可

在這里插入圖片描述

2.如果報(bào)錯(cuò)中有提示升級(jí)或者安裝ajv或者vue2.6.X版本，根據(jù)提示安裝即可

npm install ajv@^6.9.1
npm install vue@^2.6.11

個(gè)人理解，如果ajv和vue版本過(guò)低，可能會(huì)導(dǎo)致vue-prism-editor依賴(lài)的相關(guān)東西安裝不上，建議升級(jí)完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

到此這篇關(guān)于vue項(xiàng)目頁(yè)面嵌入代碼塊vue-prism-editor的文章就介紹到這了,更多相關(guān)vue項(xiàng)目頁(yè)面嵌入代碼塊內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: