codemirror 只读模式（vue）

问题描述

现在我需要将使用的这个东西，在我查看历史提交的地方 只可读，不可修改

解决过程

查看官方文档，就看到了一个属性 readOnly

翻译：

这将禁用用户对编辑器内容的编辑。如果给出了特殊值“nocursor”(而不是简单的true)，也不允许对编辑器进行聚焦。

解决方法

在options中添加属性readOnly
在 created() 钩子函数中赋值

<template><div class="code-mirror-box"><textarea ref="textareaCoder" v-model="code"></textarea></div>
</template><script>
// 引入全局实例
import _CodeMirror from 'codemirror'
// language
import 'codemirror/mode/javascript/javascript.js'
// 核心样式
import 'codemirror/lib/codemirror.css'
// 引入主题后还需要在 options 中指定主题才会生效
import 'codemirror/theme/monokai.css'
// active-line
import 'codemirror/addon/selection/active-line.js'
// foldGutter
import 'codemirror/addon/fold/foldgutter.css'
import 'codemirror/addon/fold/brace-fold.js'
import 'codemirror/addon/fold/comment-fold.js'
import 'codemirror/addon/fold/foldcode.js'
import 'codemirror/addon/fold/foldgutter.js'
import 'codemirror/addon/fold/indent-fold.js'
import 'codemirror/addon/fold/markdown-fold.js'
import 'codemirror/addon/fold/xml-fold.js'// 尝试获取全局实例
const CodeMirror = window.CodeMirror || _CodeMirrorexport default {name: 'code-mirror-box',props: ['conHeight', 'codeValue','editable'],data() {return {// 内部真实的内容code: '',// 编辑器实例coder: null,// 默认配置options: {mode: 'javascript', // 默认的语法类型// 缩进格式tabSize: 2,// 主题，对应主题库 JS 需要提前引入ambiance(白色)  monokai(黑色)theme: 'ambiance',// 显示行号lineNumbers: true,line: true,styleActiveLine: false, // 激活行样式// 添加折叠foldGutter: true,extraKeys: { Ctrl: 'autocomplete' }, //自动提示配置//设置为只读状态，不可写readOnly: '',lineWrapping: true, // 自动换行gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],},}},created() {this.code = this.codeValuethis.options.readOnly = this.editable},mounted() {// 初始化this._initialize()},methods: {// 初始化_initialize() {// 初始化编辑器实例，传入需要被实例化的文本域对象和默认配置this.coder = CodeMirror.fromTextArea(this.$refs.textareaCoder,this.options)// 监听改变this.coder.on('change', (coder) => {this.code = coder.getValue()// this.coder.setSize(600,this.conHeight);//设置编译器大小})},// 赋值操作setValue(val) {this.coder.setValue(val)},// 刷新操作refresh() {let timer = setTimeout(() => {clearTimeout(timer)this.$nextTick(() => {this.coder.refresh()})}, 100)},},watch: {code: {handler(val) {this.$emit('getCode', val)},},},
}
</script><style lang="less" scoped>
.code-mirror-box {font-size: 14px;
}
.CodeMirror {height: 100% !important;
}
.CodeMirror-scroll {height: 100%;
}
</style>

在调用的地方添加绑定属性即可

<template><div class="make-submit"><p>代码：</p><oj-code-mirrorid="codemirrorStyle"ref="codeMirror":codeValue="lastSubmitData.code":editable="editable"></oj-code-mirror></div>
</template><script>
export default {data() {return {editable:'nocursor',}},</script>

codemirror 只读模式（vue）相关推荐

luckysheet 只读模式和编辑模式
只读模式配置: var options = {container: "luckysheet", //容器的IDtitle: "bi", // 工作簿名称lang ...
为什么有时优盘是只读模式_为什么安装了Paragon NTFS磁盘还是只读，不能进行操作？...
现在的Mac小伙伴们都知道了,如果想要让自己的电脑对NTFS格式的磁盘进行读写,那么安装一个Mac读写软件是很有必要的. 大多数小伙伴们都会选择 paragon ntfs mac-Paragon NT ...
python文件打开模式rb表示只读模式打开文件_一篇搞懂python文件读写操作（r/r+/rb/w/w+/wb/a/a+/ab）...
关于文件操作的几种常用方式,网上已有很多解说,内容很丰富,但也因此有些杂乱复杂.今天,我就以我个人的学习经验写一篇详细又易懂的总结文章,希望大家看完之后会有所收获. 一.各模式逐个分解 'r':只读. ...
ClickHouse【环境搭建 02】设置用户密码的两种方式（明文+SHA256）及新用户添加及只读模式 Cannot execute query in readonly mode 问题解决
1.查看user.xml文件可知设置密码的多种方式 <!-- Password could be specified in plaintext or in SHA256 (in hex form ...
Write operations are not allowed in read-only mode 只读模式下(FlushMode.NEVER/MANUAL)写操作不允
来源:http://blog.sina.com.cn/s/blog_656ffe730100ugtw.html org.springframework.dao.InvalidDataAccessApi ...
MySQL设置从库只读模式
常见现象运维工作中会经常维护MySQL主从服务器,当然Slave我们只是用于读操作. 一般权限开通也只授权只读账号,但是有时候维护工作可能不是一个人在做,你不能保证其他同事都按照这个标准操作. 有同 ...
oracle 9i 只读模式,我的oracle 9i学习日志（6）--Starting Up and shutting down a Database
Starting Up a Database 1.NOMOUNT 这个状态下oracle server完成下列任务: a.读取初始化参数文件: b.为SGA分配内存: c.启动后台进程: d.打开al ...
SharePoint Server 2016 PWA(Project web app) 被变为只读模式
今天有同事反应了一个状况,我们SharePoint 2016里面集成的Project Web App(以下简称PWA)变成 read-only 只读模式了! 今天就给大家分享一下我的排查过程,供大家参 ...
PPT不能编辑，如何取消PPT的只读模式？
小伙伴有没有遇到这种情况,为了保护做好的PPT不被改动,给PPT设置了权限密码,这样别人就只能看,不能编辑. 设置密码的时候想得好好的,觉得很容易记,可过了一段时间,终究是高估了自己,密码彻底忘记了! ...

codemirror 只读模式（vue）

问题描述

解决过程

codemirror 只读模式（vue）相关推荐

最新文章

热门文章