vue3中使用codemirror的詳細教程
前言
最近為了完成學(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,// 顯示左邊行號（默認false,即不顯示）
styleActiveLine: true, // 當前行背景高亮
});
}更改編輯框的外部樣式（高度、寬度）
第一種改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（當編輯器內(nèi)容改變時觸發(fā)，類似于input的change）舉例：
editor.on('change', (cm, msg) => {
console.log(cm == editor);// true
console.log(msg);// 改變內(nèi)容的信息
})第二個參數(shù)截圖
實現(xiàn)markdown過程中遇到的bug
沒有內(nèi)容也可以滾動，原來的.CodeMirror-sizer的height值為120%（找了有點久/(ㄒoㄒ)/~~
.CodeMirror-sizer {
height: 100%;
}實現(xiàn)同步滾動過程中遇到鼠標不滾動了，但頁面還是滾動的問題，因為兩邊都綁定了滾動事件，形成了死循環(huán)。解決方法：設(shè)置一個變量來記錄當前哪邊觸發(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中this.$parent的使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
Vue使用el-tree 懶加載進行增刪改查功能的實現(xiàn)
這篇文章主要介紹了Vue使用el-tree 懶加載進行增刪改查,以懶加載的形式展示，目錄根據(jù)需求需要有新增 編輯 刪除 操作以及操作后的刷新樹結(jié)構(gòu)，具體實現(xiàn)代碼跟隨小編一起看看吧2021-08-08
vue3.0 vue-router4.0打包后頁面空白的解決方法
本文主要介紹了vue3.0 vue-router4.0打包后頁面空白的解決方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
本篇文章主要介紹了vue通過路由實現(xiàn)頁面刷新的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了vue+echarts定時重新繪制以達到刷新的動效問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
本篇文章主要給大家詳細代碼講解了vue2.0 elementUI制作面包屑導(dǎo)航欄的過程，對此有興趣的朋友可以學(xué)習(xí)下。2018-02-02
這篇文章主要為大家詳細介紹了vue仿寫帶過渡效果的下拉菜單功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
vue通過數(shù)據(jù)過濾實現(xiàn)表格合并
這篇文章主要為大家詳細介紹了vue通過數(shù)據(jù)過濾實現(xiàn)表格合并，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
vue router解決路由帶參數(shù)跳轉(zhuǎn)時出現(xiàn)404問題
我的頁面是從一個vue頁面router跳轉(zhuǎn)到另一個vue頁面,并且利用windows.open() 瀏覽器重新創(chuàng)建一個頁簽,但是不知道為什么有時候可以有時候又不行,所以本文給大家介紹了vue router解決路由帶參數(shù)跳轉(zhuǎn)時出現(xiàn)404問題,需要的朋友可以參考下2024-03-03
在做項目的時候發(fā)現(xiàn)一個情況,輸入框無法輸入值并且表單校驗失靈,所以下面這篇文章主要給大家介紹了關(guān)于el-input無法輸入的問題和表單驗證失敗問題解決的相關(guān)資料,需要的朋友可以參考下2023-02-02