热门标签
热门文章
- 1细说 TCP 内核参数_tcp_synack_retries(1)，2024年最新Golang面试题中高级_tcp synack retries
- 2RTSP协议分析与安全实践
- 3mysql可重复读引发的问题_可重复读存在哪些问题
- 4JSON pretty化
- 5Android开发—RadioGroup中RadioButton默认选中问题_android radiobutton获取默认值
- 6【Java】智慧医院绩效考核系统源码_医院绩效考核系统成品源码
- 7植物大战僵尸2战果_植物大战僵尸2内置功能菜单
- 8CVPR 2021 底层视觉最新进展分享
- 9Mac下载安装vscode_vscode mac下载
- 10离2024年PMP考试还有多久？如何准备？_pmp考试2024
当前位置: article > 正文
33.CodeMirror编辑器如何在vue项目中使用_vue-codemirror 语法检查
作者：小舞很执着 | 2024-06-20 11:38:11
赞
踩
vue-codemirror 语法检查
1.封装组件
- <template>
- <div className="yaml-editor">
- <textarea ref="textarea"/>
- <div>
- <span style="margin-right: 10px">Ctrl + F</span>
- <el-button @click="find">查找</el-button>
- </div>
- </div>
- </template>
-
- <script>
- import CodeMirror from 'codemirror'
- import 'codemirror/addon/lint/lint.css'
- import 'codemirror/lib/codemirror.css'
- import 'codemirror/theme/monokai.css'
- import 'codemirror/theme/midnight.css'
- import 'codemirror/theme/mdn-like.css'
- import 'codemirror/mode/yaml/yaml'
- import 'codemirror/addon/lint/lint'
- import 'codemirror/addon/lint/yaml-lint'
-
- // 代码折叠
- import 'codemirror/addon/fold/foldgutter.css'
- import 'codemirror/addon/fold/foldcode.js'
- import 'codemirror/addon/fold/foldgutter.js'
- import 'codemirror/addon/fold/brace-fold.js'
- import 'codemirror/addon/fold/comment-fold.js'
- import 'codemirror/addon/fold/xml-fold.js'
- import 'codemirror/addon/fold/markdown-fold.js'
- import 'codemirror/addon/fold/indent-fold.js'
-
- // 查找
- import 'codemirror/addon/scroll/annotatescrollbar.js'
- import 'codemirror/addon/search/matchesonscrollbar.js'
- import 'codemirror/addon/search/match-highlighter.js'
- import 'codemirror/addon/search/jump-to-line.js'
- import 'codemirror/addon/dialog/dialog.js'
- import 'codemirror/addon/dialog/dialog.css'
- import 'codemirror/addon/search/searchcursor.js'
- import 'codemirror/addon/search/search.js'
-
- window.jsyaml = require('js-yaml') // 引入js-yaml为codemirror提高语法检查核心支持
-
- export default {
- name: 'YamlEditor',
- props: {
- value: {
- type: String,
- default: ''
- },
- disabled: {
- type: Boolean,
- default: false
- },
- showNumber: {
- type: Boolean,
- default: true
- }
- },
- data() {
- return {
- yamlEditor: null
- }
- },
- watch: {
- value(value) {
- const editorValue = this.yamlEditor.getValue()
- if (value !== editorValue) {
- this.yamlEditor.setValue(this.value)
- }
- }
- },
- mounted() {
- this.yamlEditor = CodeMirror.fromTextArea(this.$refs.textarea, {
- lineNumbers: true, // 显示行号
- mode: 'text/x-yaml', // 语法model
- readOnly: false, // 是否禁止输入
- theme: 'mdn-like', // 编辑器主题 midnight/mdn-like/monokai
- foldGutter: true, // 代码折叠
- lint: true, // 开启语法检查
- gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter', 'CodeMirror-lint-markers'],
- indentUnit: 4, // 缩进
-
-
- indentWithTabs: true,
- styleActiveLine: true, // 当前行背景高亮
- })
-
- this.yamlEditor.setValue(this.value)
- this.yamlEditor.on('change', (cm) => {
- this.$emit('changed', cm.getValue())
- this.$emit('input', cm.getValue())
- })
- },
- methods: {
- getValue() {
- return this.yamlEditor.getValue()
- },
- find() {
- console.log(1)
- this.yamlEditor.execCommand('find')
- }
- }
- }
- </script>
-
- <style scoped>
- .yaml-editor {
- height: 100%;
- }
-
- .yaml-editor >>> .CodeMirror {
- height: 100%;
- }
-
- .yaml-editor >>> .CodeMirror-scroll {
- }
-
- .yaml-editor >>> .cm-s-rubyblue span.cm-string {
- color: #f08047;
- }
-
- /deep/ .cm-s-mdn-like {
- height: 400px;
- }
- </style>
2.父组件使用
<yaml-editor v-model="YamlValue" :disabled="disabled" />
本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
推荐阅读
相关标签
Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。
