1.1.6 • Published 2 years ago
@totonoo/vue-codemirror v1.1.6
vue-codemirror
codemirror vue组件,支持TS,使用的是codemirror 6。支持明暗模式。
未经测试,不建议使用于生产环境。个人测试作品。
准备开始
安装
首先需要安装 npm
npm install @totonoo/vue-codemirror --save
基础使用
<template>
<div class="codemirror-demo">
<MarkdownEditor
v-model="value"
@blur="changeHandler"
@focus="changeHandler"
@selectionChange="consoleHandler"
@themeChange="consoleHandler"
@change="changeHandler" />
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import '@totonoo/vue-codemirror/dist/style.css'
import { MarkdownEditor } from '@totonoo/vue-codemirror'
export default defineComponent({
components: {
MarkdownEditor
},
setup () {
const value = ref(`## 标题
文章以名为 Markdown 的轻量级标记语言编写,这种方式易于阅读且易于学习。
`)
const changeHandler = (val: string, editor: typeof MarkdownEditor) => {
console.log(val === value.value)
}
const consoleHandler = (val: string, editor: typeof MarkdownEditor) => {
console.log(val)
}
return {
value,
changeHandler,
consoleHandler
}
},
})
</script>
<style lang="scss">
.codemirror-demo {
border: 1px #dddddd solid;
height: 600px;
}
</style>
MarkdownEditor 详细使用说明
Events
- ready (editor: typeof MarkdownEditor) => {}
- change (value: string, editor: typeof MarkdownEditor) => {}
- focus (value: string, editor: typeof MarkdownEditor) => {}
- blur (value: string, editor: typeof MarkdownEditor) => {}
- selectionChange (value: Line, editor: typeof MarkdownEditor) => {}
- toolbarItemAction (item: ToolbarItemType, type: string, editor: typeof MarkdownEditor) => {} 边栏点击或快捷键通知
快捷键
查看帮助文档,编辑器获得焦点,按 Alt + h
即可查看。
基础配置
const dialog = {
fullScreen: false,
fixed: false,
zIndex: 3
}
const theme = {
def: 'light', // light or dark
observer: 'body',
observerAttr: 'theme'
}
const editorConfig = {
lineWrapping: true, // 较长文本是否自动换行
lineNumbers: true, // 是否显示行号
allowMultipleSelections: true // 是否允许多行选择
}
const uploadConfig = {
uploadUrl: '/api/upload',
headers: {
token: 'test token'
},
uploadSuccess: (result: any): string => {
return result.data.domain + result.data.filepath
},
uploadFail: (error: any): void => {
console.log('console', error)
}
}
// <MarkdownEditor v-model="value" :dialog="dialog" :theme="theme" :editor="editorConfig" :upload="uploadConfig" />
常见问题
本地查看效果
git clone https://github.com/myestorm/vue-codemirror.git
npm install
npm run dev
如何修改背景颜色?
在编辑器的任意一个父级节点注入即可。
.codemirror-demo {
--editor-bg: #f5f5f5;
--editor-bg-dark: #000000;
}
在边栏上我能做什么
<template>
<div class="codemirror-demo">
<MarkdownEditor
v-model="value"
@toolbarItemAction="toolbarItemAction"
:beforeInitToolbars="beforeInitToolbars" />
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import '@totonoo/vue-codemirror/dist/style.css'
import { MarkdownEditor } from '@totonoo/vue-codemirror'
import IconUpload from '../components/editor/theme/markdown/upload.svg?component'
export default defineComponent({
components: {
MarkdownEditor
},
setup () {
const value = ref('')
const TopCustom: MarkdownMDToolbarItemType = {
type: 'top_custom',
title: '自定义',
icon: IconUpload,
shortcutKey: 'Alt-x',
action: () => {
console.log('in')
}
}
const beforeInitToolbars = (toolbars: MarkdownMDToolbarsType) => {
toolbars.top.push(TopCustom)
return toolbars
}
const toolbarItemAction = (item: MarkdownMDToolbarItemType, type: string, editor: typeof MarkdownEditor) => {
console.log(item.type, type) // type: click[点击], keyboard[键盘]
editor.setValue('test demo')
}
return {
value,
beforeInitToolbars,
toolbarItemAction
}
},
})
</script>
1.1.1
2 years ago
1.1.6
2 years ago
1.1.5
2 years ago
1.1.4
2 years ago
1.1.3
2 years ago
1.1.2
2 years ago
1.1.0
2 years ago
1.0.11
2 years ago
1.0.12
2 years ago
1.0.9
2 years ago
1.0.10
2 years ago
1.0.8
2 years ago
1.0.7
2 years ago
1.0.6
2 years ago
1.0.5
2 years ago
1.0.4
2 years ago
1.0.3
2 years ago
1.0.2
2 years ago
1.0.1
2 years ago
1.0.0
2 years ago