vue3中使用codemirror的詳細(xì)教程
前言
最近為了完成學(xué)校的大作業(yè)，需要制作markdown編輯器，為了用戶輸入方便，使用了codemirror來(lái)做編輯器。本文介紹的只是很簡(jiǎn)單的使用配置，更多內(nèi)容請(qǐng)查閱官方文檔。
引入
npm i codemirror
在vue3中使用
基本配置
具體的配置可以看官方網(wǎng)站https://codemirror.net/5/doc/manual.html#config
// html部分
<textarea ref="l"></textarea>
// 引入
import CodeMirror from "codemirror";
// codemirror配置
const l = ref(null);
onMounted(() => {
const editor=CodeMirror.fromTextArea(l.value, {
mode: "markdown",// 模式
theme: "solarized", // 主題
lineWrapping: true,// 自動(dòng)換行
scrollPastEnd: true,// 允許用戶將一個(gè)編輯器高度的空白區(qū)域滾動(dòng)到編輯器底部的視圖
lineNumbers: true,// 顯示左邊行號(hào)（默認(rèn)false,即不顯示）
styleActiveLine: true, // 當(dāng)前行背景高亮
});
}更改編輯框的外部樣式（高度、寬度）
第一種改css
.CodeMirror {
border: 1px solid #eee;
height: auto;
}第二種使用editor.setSize()方法，第一個(gè)寬，第二個(gè)高
獲取和修改內(nèi)容
// 獲取
editor.getValue();
// 修改
editor.setValue('要賦予的值');添加刪除事件
具體可以看官網(wǎng)https://codemirror.net/5/doc/manual.html#events
以change（當(dāng)編輯器內(nèi)容改變時(shí)觸發(fā)，類似于input的change）舉例：
editor.on('change', (cm, msg) => {
console.log(cm == editor);// true
console.log(msg);// 改變內(nèi)容的信息
})第二個(gè)參數(shù)截圖
實(shí)現(xiàn)markdown過(guò)程中遇到的bug
沒有內(nèi)容也可以滾動(dòng)，原來(lái)的.CodeMirror-sizer的height值為120%（找了有點(diǎn)久/(ㄒoㄒ)/~~
.CodeMirror-sizer {
height: 100%;
}實(shí)現(xiàn)同步滾動(dòng)過(guò)程中遇到鼠標(biāo)不滾動(dòng)了，但頁(yè)面還是滾動(dòng)的問(wèn)題，因?yàn)閮蛇叾冀壎藵L動(dòng)事件，形成了死循環(huán)。解決方法：設(shè)置一個(gè)變量來(lái)記錄當(dāng)前哪邊觸發(fā)滾動(dòng)。
codemirror報(bào)錯(cuò) Uncaught TypeError: Cannot read properties of undefined (reading ‘map‘)
原因：由于我用了pinia去存儲(chǔ)codemirror的對(duì)象，獲取使用時(shí)codemirror對(duì)象變成了proxy對(duì)象，沒有用真正的codemirror對(duì)象。解決方案：在獲取使用用toRaw()來(lái)獲取真正的codemirror對(duì)象再使用。
import { toRaw } from "@vue/reactivity";
const editor = toRaw(editorStore().editor);這樣再去使用就不會(huì)報(bào)錯(cuò)了。目前為什么這樣會(huì)出錯(cuò)，我還不知道原因?。?！
總結(jié)
到此這篇關(guān)于vue3中使用codemirror的文章就介紹到這了,更多相關(guān)vue3使用codemirror內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
今天小編就為大家分享一篇vue獲取form表單的值示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
這篇文章主要給大家介紹了關(guān)于vue前端更新后需要清空緩存的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-10-10
Vue.js+express利用切片實(shí)現(xiàn)大文件斷點(diǎn)續(xù)傳
斷點(diǎn)續(xù)傳就是要從文件已經(jīng)下載的地方開始繼續(xù)下載，本文主要介紹了Vue.js+express利用切片實(shí)現(xiàn)大文件斷點(diǎn)續(xù)傳，具有一定的參考價(jià)值，感興趣的可以了解下2023-05-05
Vue組件傳值過(guò)程接收不成功的問(wèn)題及解決
這篇文章主要介紹了Vue組件傳值過(guò)程接收不成功的問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
Vue3 + Element Plus 實(shí)現(xiàn)表格全選/反選/禁用功能(示例詳解)
本文詳細(xì)介紹了如何使用Vue3組合式API和ElementPlus實(shí)現(xiàn)表格的全選/反選/禁用功能,并分享了分頁(yè)保持、視覺提示優(yōu)化、性能優(yōu)化等技巧,同時(shí),還提供了常見問(wèn)題的解決方案和擴(kuò)展思考,幫助開發(fā)者構(gòu)建功能豐富且用戶體驗(yàn)良好的表格組件,感興趣的朋友一起看看吧2025-03-03
vue實(shí)現(xiàn)添加標(biāo)簽demo示例代碼
本篇文章主要介紹了vue實(shí)現(xiàn)添加標(biāo)簽demo示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-01-01
在本篇文章中我們給大家總結(jié)了關(guān)于編寫vue組件的方法知識(shí)點(diǎn)，有此需要的讀者們跟著學(xué)習(xí)下。2019-02-02
在使用 Vue 開發(fā)的這幾年里，掌握一些有用的技巧，使用一些更高級(jí)的技術(shù)點(diǎn)，總會(huì)有用的，本文就介紹了15個(gè)Vue技巧，具有一定的參考價(jià)值，感興趣的可以了解一下2022-02-02
configureWebpack、chainWebpack配置vue.config.js方式
這篇文章主要介紹了configureWebpack、chainWebpack配置vue.config.js方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
今天小編就為大家分享一篇Vue封裝的可編輯表格插件方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08