codemirror editor vue3

介紹

簡體中文

VUE3的CodeMirror組件。該組件是根據CodeMirror 5開發的，僅支持VUE3。

除了官方支持的模式外，還添加了日誌輸出表示模式，即開箱即用，但不一定適合所有情況。

有關完整的文檔和更多案例，請檢查CodeMirror-editor-vue3文檔。

安裝

npm install codemirror-editor-vue3 codemirror@^5 -S

yarn add codemirror-editor-vue3 codemirror@ " >=5.64.0 <6 " 

pnpm i codemirror-editor-vue3 codemirror@^5 -S

如果您的項目需要打字稿支持，您還需要安裝“@type/codemirror”依賴項。

npm install @types/codemirror -D

註冊全局組件

請勿建議全局註冊組件，這將導致模板上無法正確獲得的提示類型。

main.js:

 import { createApp } from "vue" ;
import App from "./App.vue" ;
import { InstallCodeMirror } from "codemirror-editor-vue3" ;

const app = createApp ( App ) ;
app . use ( InstallCodeMirror ) ;
app . mount ( "#app" ) ;

全局註冊的組件名稱是codemirror，或者您可以自定義組件名稱，例如：

 app . use ( InstallCodeMirror , { componentName : "customName" } ) ; 

在組件中使用

< template >
  < Codemirror
    v-model:value = " code "
    :options = " cmOptions "
    border
    placeholder = " test placeholder "
    :height = " 200 "
    @change = " change "
  />
</ template >

< script >
import Codemirror from " codemirror-editor-vue3 " ;

// placeholder
import " codemirror/addon/display/placeholder.js " ;

// language
import " codemirror/mode/javascript/javascript.js " ;
// placeholder
import " codemirror/addon/display/placeholder.js " ;
// theme
import " codemirror/theme/dracula.css " ;

import { ref } from " vue " ;
export default {
  components : { Codemirror },
  setup () {
    const code = ref ( `
var i = 0;
for (; i < 9; i++) {
  console.log(i);
  // more statements
} ` );

    return {
      code,
      cmOptions : {
        mode : " text/javascript " , // Language mode
        theme : " dracula " , // Theme
      },
    };
  },
};
</ script >

語言突出顯示

您可以單擊以下鏈接以查看相應的語言案例

• JavaScript
• JSON
• CSS
• html
• APL
• yaml

逐漸添加更多案例，您還可以參考文檔以獲得更多的語言模式。

組件道具

姓名	描述	類型	預設
值（V模型）	編輯內容	string	“”
選項	codemirror5的配置選項	編輯配置	default_options
佔位符	編輯佔位符內容介紹CodeMirror相關文件	string	“”
邊界	是否顯示編輯邊界	boolean	false
寬度	寬度	string	100%
高度	高度	string	100%
原始風格	使用原始樣式，禁用該組件樣式的第二次修改（但不會影響寬度，高度和邊框）	boolean	false
keepcursorInend	始終將鼠標位置保持在最後一行	boolean	false
合併	合併模式，也可以用作DIFF模式	boolean	false

事件

組件事件

以下三個僅是該組件封裝的事件。請參閱更多事件CodeMirror事件

事件名稱	描述	參數
change	價值或實例更改	(value: string, cm: Editor) => void
input	輸入	(value: string) => void
ready	codemirror組件已安裝	(cm: Editor) => void;

---

codemirror事件

以下事件是codemirror5的官方事件。您可以參考官方文檔以獲取詳細信息CodeMirror事件，可以使用此組件直接通過組件綁定事件，例如：

< Codemirror
  v-model : value = " code "
  : options = " { mode: ' text/x-vue ' , theme: ' default ' } "
  border
  placeholder="test-placeholder"
  : height = " 200 "
  @ change = " onChange "
  @ blur = " onBlur "
  @ focus = " onFocus "
  @ scroll = " onScroll "
/>

所有活動名稱如下：

• changes
• scroll
• beforeChange
• cursorActivity
• keyHandled
• inputRead
• electricInput
• beforeSelectionChange
• viewportChange
• swapDoc
• gutterClick
• gutterContextMenu
• focus
• blur
• refresh
• optionChange
• scrollCursorIntoView
• update