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----是否可編輯標(biāo)識
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” 是給編輯器設(shè)置高度的，高度可自行設(shè)置，也可以不設(shè)置，這個樣式非必需
到這里，功能基本就實現(xiàn)了。
但是在過程中遇到一些問題，這里也一并總結(jié)。
問題
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版本過低，可能會導(dǎo)致vue-prism-editor依賴的相關(guān)東西安裝不上，建議升級完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項目頁面嵌入代碼塊vue-prism-editor的文章就介紹到這了,更多相關(guān)vue項目頁面嵌入代碼塊內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue2.0實現(xiàn)分頁組件的實例代碼,需要的朋友可以參考下2017-06-06
vue中如何使用lodash的debounce防抖函數(shù)
防抖函數(shù) debounce 指的是某個函數(shù)在某段時間內(nèi),無論觸發(fā)了多少次回調(diào),都只執(zhí)行最后一次,在Vue中使用防抖函數(shù)可以避免在頻繁觸發(fā)的事件中重復(fù)執(zhí)行操作,這篇文章主要介紹了vue中使用lodash的debounce防抖函數(shù),需要的朋友可以參考下2024-01-01
這篇文章主要介紹了nuxt.js 緩存實踐，nuxt 的緩存可以分為 組件級別緩存 , API級別緩存 以及 頁面級別緩存，本文就詳細(xì)的介紹了這三種緩存，感興趣的小伙伴們可以參考一下2018-06-06
Vue3 + Vue-PDF 實現(xiàn)PDF 文件在線預(yù)覽實戰(zhàn)
這篇文章主要介紹了Vue3 + Vue-PDF 實現(xiàn)PDF 文件在線預(yù)覽實戰(zhàn)，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-06-06
Vue Elenent實現(xiàn)表格相同數(shù)據(jù)列合并
這篇文章主要為大家詳細(xì)介紹了Vue Elenent實現(xiàn)表格相同數(shù)據(jù)列合并，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
vue分片上傳視頻并轉(zhuǎn)換為m3u8文件播放的實現(xiàn)示例
前端上傳大文件、視頻的時候會出現(xiàn)超時、過大、很慢等情況,為了解決這一問題,跟后端配合做了一個切片的功能,本文主要介紹了vue分片上傳視頻并轉(zhuǎn)換為m3u8文件播放的實現(xiàn)示例,感興趣的可以了解一下2023-11-11
這篇文章主要為大家詳細(xì)介紹了vue iview實現(xiàn)分頁功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
VUE開發(fā)分布式醫(yī)療掛號系統(tǒng)后臺管理頁面步驟
本文從整體上介紹Vue框架的開發(fā)流程，結(jié)合具體的案例，使用Vue框架調(diào)用具體的后端接口，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-04-04
這篇文章主要介紹了vue-cli 3 全局過濾器的實例代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-06-06
淺析vue3響應(yīng)式數(shù)據(jù)與watch屬性
這篇文章主要介紹了vue3響應(yīng)式數(shù)據(jù)與watch屬性的相關(guān)知識，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-05-05