codemirror editor vue3下载codemirror editor vue3源代码下载

codemirror editor vue3

其他资源

v2.8.0

下载

介绍

简体中文

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 "
/>