欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2020年10月30日 12:27:50   作者：韓大璐  
這篇文章主要介紹了vue項目頁面嵌入代碼塊vue-prism-editor的實現(xiàn),本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

需求：

在這里插入圖片描述

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

實現(xiàn)

在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----為需要高亮顯示的代碼內(nèi)容
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” 是給編輯器設置高度的，高度可自行設置，也可以不設置，這個樣式非必需

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

問題

1.如果僅安裝vue-prism-editor，沒有安裝prismjs，會報以下錯誤，npm install prismjs即可

在這里插入圖片描述

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

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

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

相關文章

最新評論