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