codemirror editor vue3

Введение

简体中文

Компонент Codemirror VUE3. Этот компонент разработан на основе 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

Если ваш проект требует поддержки TypeScript, вам также потребуется установить зависимость «@Types/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
• Ямл

Постепенно добавляется больше случаев, и вы также можете обратиться к документу для достижения большего количества языковых режимов.

Компонентный реквизит

имя	описание	тип	по умолчанию
значение (V-модель)	Контент редактора	string	""
параметры	Параметры конфигурации Codemirror5	EditorConfiguration	Default_options
заполнитель	Редакторный контент заполнителей для введения файлов, связанных с кодиррором	string	""
граница	Показать границы редактора	boolean	false
ширина	ширина	string	100%
высота	высота	string	100%
оригинальный стиль	Используя оригинальный стиль, отключите вторую модификацию стиля для этого компонента (но не влияет на ширину, высоту и границу)	boolean	false
Сохранить	Всегда держите положение мыши на последней строке	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