在vue里使用codemirror遇到的问题


Posted in Javascript onNovember 01, 2018

前提小结:

第一次用codemirror,而且是在vue里面使用,看了官方文档,一大串都是英文,翻译后大概了解了这个插件,然后在项目中使用时出现过好几个问题:

1.新版的codemirror在lib目录下没有codemirror.js文件,旧版的有,所以网上的很多文章都是直接这样引:

<scriptsrc="lib/codemirror.js"></script>
 <linkrel="stylesheet"href="../lib/codemirror.css" rel="external nofollow" >
<scriptsrc="mode/javascript/javascript.js"></script>

然而新手在新版的codemirror怎么引都报错,新版的codemirror把codemirror.js放到了src目录下,当然src目录下的codemirror.js文件如果你要移到lib目录下是要改变里面的路径的。

2.在vue里面使用codemirror,动态创建编辑器,在关闭的时候会产生一种鬼知道是什么的错误,就是比如我新建了a,b两个编辑器,a在左,b在右,当我关闭a时,想要显示b的文档内容,却显示的是b的,肯呢个这是动态数据改变产生的错误,可是当关闭b,不关闭a时,就能显示a的文本内容。

在vue里使用codemirror遇到的问题

3.路由跳转的时候,当打开的编辑器代码显示最顶层的内容的时候,切换到其他路由再切换回来还是能显示缓存的编辑器文本,当我把编辑器拉到最底层,显示最底层的文本内容,再切换到其他路由再切回来时,编辑器一片空白,鼠标点击编辑器或者鼠标滑轮滚动,文本内容出现,而且显示的内容是顶层的内容。

在vue里使用codemirror遇到的问题

基于以上几点,我选择用vue-codemirror组件来实现。

实现

1.首先要先安装vue-codemirror

在npm的官网我找到了vue-codemirror

https://www.npmjs.com/package/vue-codemirror
npm install vue-codemirror --save

接着在main.js里使用

import { codemirror } from 'vue-codemirror'

import 'codemirror/lib/codemirror.css'
Vue.use(VueCodemirror)

再到组件中使用

import { codemirror } from 'vue-codemirror'
 require("codemirror/mode/python/python.js")
 require('codemirror/addon/fold/foldcode.js')
 require('codemirror/addon/fold/foldgutter.js')
 require('codemirror/addon/fold/brace-fold.js')
 require('codemirror/addon/fold/xml-fold.js')
 require('codemirror/addon/fold/indent-fold.js')
 require('codemirror/addon/fold/markdown-fold.js')
 require('codemirror/addon/fold/comment-fold.js')

当然组件需要先声明

components:{
    codemirror
   }

html代码这样写:

<codemirror
    ref="myCm"
    :value="item.content"
    :options="cmOptions"
    @changes="changes"
     class="code"
    ></codemirror>

options是和codemirror一样的配置项

value: string | CodeMirror.Doc

编辑器的初始值(文本),可以是字符串或者CodeMirror文档对象(不同于HTML文档对象)。

mode: string | object

通用的或者在CodeMirror中使用的与mode相关联的mime,当不设置这个值的时候,会默认使用第一个载入的mode定义文件。一般地,会使用关联的mime类型来设置这个值;除此之外,也可以使用一个带有name属性的对象来作为值(如:{name: “javascript”,

 json: true})。可以通过访问CodeMirror.modes和CodeMirror.mimeModes获取定义的mode和MIME。

lineSeparator: string|null

明确指定编辑器使用的行分割符(换行符)。默认(值为null)情况下,文档会被 CRLF(以及单独的CR, LF)分割,单独的LF会在所有的输出中用作换行符(如:getValue)。当指定了换行字符串,行就只会被指定的串分割。

theme: string

配置编辑器的主题样式。要使用主题,必须保证名称为 .cm-s-[name] (name是设置的theme的值)的样式是加载上了的。当然,你也可以一次加载多个主题样式,使用方法和html和使用类一样,如: theme: foo bar,那么此时需要cm-s-foo cm-s-bar这两个样式都已经被加载上了。

indentUnit: integer

缩进单位,值为空格数,默认为2 。

smartIndent: boolean

自动缩进,设置是否根据上下文自动缩进(和上一行相同的缩进量)。默认为true。

tabSize: integer

tab字符的宽度,默认为4 。

indentWithTabs: boolean

在缩进时,是否需要把 n*tab宽度个空格替换成n个tab字符,默认为false 。

electricChars: boolean

在输入可能改变当前的缩进时,是否重新缩进,默认为true (仅在mode支持缩进时有效)。

specialChars: RegExp

需要被占位符(placeholder)替换的特殊字符的正则表达式。最常用的是非打印字符。默认为:/[\u0000-\u0019\u00ad\u200b-\u200f\u2028\u2029\ufeff]/。

specialCharPlaceholder: function(char) → Element

这是一个接收由specialChars选项指定的字符作为参数的函数,此函数会产生一个用来显示指定字符的DOM节点。默认情况下,显示一个红点(•),这个红点有一个带有前面特殊字符编码的提示框。

rtlMoveVisually: boolean
Determines whether horizontal cursor movement through right-to-left (Arabic, Hebrew) text is visual (pressing the left arrow moves the cursor left) or logical (pressing the left arrow moves to the next lower index in the string, which is visually right in right-to-left
 text). The default is false on Windows, and true on other platforms.(这段完全不晓得搞啥子鬼)

keyMap: string

配置快捷键。默认值为default,即 codemorrir.js 内部定义。其它在key
 map目录下。

extraKeys: object

给编辑器绑定与前面keyMap配置不同的快捷键。

lineWrapping: boolean

在长行时文字是换行(wrap)还是滚动(scroll),默认为滚动(scroll)。

lineNumbers: boolean

是否在编辑器左侧显示行号。

firstLineNumber: integer

行号从哪个数开始计数,默认为1 。

lineNumberFormatter: function(line: integer) → string

使用一个函数设置行号。

gutters: array<string>

用来添加额外的gutter(在行号gutter前或代替行号gutter)。值应该是CSS名称数组,每一项定义了用于绘制gutter背景的宽度(还有可选的背景)。为了能明确设置行号gutter的位置(默认在所有其它gutter的右边),也可以包含CodeMirror-linenumbers类。类名是用于传给setGutterMarker的键名(keys)。

fixedGutter: boolean

设置gutter跟随编辑器内容水平滚动(false)还是固定在左侧(true或默认)。

scrollbarStyle: string

设置滚动条。默认为”native”,显示原生的滚动条。核心库还提供了”null”样式,此样式会完全隐藏滚动条。Addons可以设置更多的滚动条模式。

coverGutterNextToScrollbar: boolean

当fixedGutter启用,并且存在水平滚动条时,在滚动条最左侧默认会显示gutter,当此项设置为true时,gutter会被带有CodeMirror-gutter-filler类的元素遮挡。

inputStyle: string

选择CodeMirror处理输入和焦点的方式。核心库定义了textarea和contenteditable输入模式。在移动浏览器上,默认是contenteditable,在桌面浏览器上,默认是textarea。在contenteditable模式下对IME和屏幕阅读器支持更好。

readOnly: boolean|string

编辑器是否只读。如果设置为预设的值 “nocursor”,那么除了设置只读外,编辑区域还不能获得焦点。

showCursorWhenSelecting: boolean

在选择时是否显示光标,默认为false。

lineWiseCopyCut: boolean

启用时,如果在复制或剪切时没有选择文本,那么就会自动操作光标所在的整行。

undoDepth: integer

最大撤消次数,默认为200(包括选中内容改变事件) 。

historyEventDelay: integer

在输入或删除时引发历史事件前的毫秒数。

tabindex: integer

编辑器的tabindex。

autofocus: boolean

是否在初始化时自动获取焦点。默认情况是关闭的。但是,在使用textarea并且没有明确指定值的时候会被自动设置为true。

低级选项

下面的选项仅用于一些特殊情况。

dragDrop: boolean

是否允许拖放,默认为true。

allowDropFileTypes: array<string>

默认为null。当设置此项时,只接收包含在此数组内的文件类型拖入编辑器。文件类型为MIME名称。

cursorBlinkRate: number

光标闪动的间隔,单位为毫秒。默认为530。当设置为0时,会禁用光标闪动。负数会隐藏光标。

cursorScrollMargin: number

当光标靠近可视区域边界时,光标距离上方和下方的距离。默认为0 。

cursorHeight: number

光标高度。默认为1,也就是撑满行高。对一些字体,设置0.85看起来会更好。

resetSelectionOnContextMenu: boolean

设置在选择文本外点击打开上下文菜单时,是否将光标移动到点击处。默认为true。

workTime, workDelay: number

通过一个假的后台线程高亮 workTime 时长,然后使用 timeout 休息 workDelay 时长。默认为200和300 。(完全不懂这个功能是在说啥)

pollInterval: number

指明CodeMirror向对应的textarea滚动(写数据)的速度(获得焦点时)。大多数的输入都是通过事件捕获,但是有的输入法(如IME)在某些浏览器上并不会生成事件,所以使用数据滚动。默认为100毫秒。

flattenSpans: boolean

默认情况下,CodeMirror会将使用相同class的两个span合并成一个。通过设置此项为false禁用此功能。

addModeClass: boolean

当启用时(默认禁用),会给每个标记添加额外的表示生成标记的mode的以cm-m开头的CSS样式类。例如,XML mode产生的标记,会添加cm-m-xml类。

maxHighlightLength: number

当需要高亮很长的行时,为了保持响应性能,当到达某些位置时,编辑器会直接将其他行设置为纯文本(plain text)。默认为10000,可以设置为Infinity来关闭此功能。

viewportMargin: integer

指定当前滚动到视图中内容上方和下方要渲染的行数。这会影响到滚动时要更新的行数。通常情况下应该使用默认值10。可以设置值为Infinity始终渲染整个文档。注意:这样设置在处理大文档时会影响性能。

vue-codemirror还提供了一些使用的方法

  • scroll
  • changes
  • beforeChange
  • cursorActivity
  • keyHandled
  • inputRead
  • electricInput
  • beforeSelectionChange
  • viewportChange
  • swapDoc
  • gutterClick
  • gutterContextMenu
  • focus
  • blur
  • refresh
  • optionChange
  • scrollCursorIntoView
  • update

我英语不好就步翻译了,不过用到的基本就这几个changes,update,refresh,focus,blur,其他的看你们的需要而定。代码编辑后的保存还是要用到codemirror的方法,而使用codemirror的方法就是在计算属性使用:

computed: {
  codemirror() {
   return this.$refs.myCm.codemirror
  }
 },

codemirror的方法在官网有很详细的解释,我在这里就列几个常用的
(     

(1)getValue():获取编辑器文本

        (2)setValue(textString):设置编辑器文本

        (3)undo():撤销一个编辑器

        (4)redo():重做一个编辑器

        (5)setSelection({line:startLineNumber,ch:start_ch},{line:endLineNumber,ch:end_ch});设置一个新的编辑器

        (6)getLine(Integer):获取第n行的文本内容

        (7)replaceRange(str1,{line,ch},{line,ch},str2):替换str1中一部分代码为str2

        (8)lineCount():获取编辑器总行数

        (9)replaceSelection(str1,str2):替换所选内容

到此,用法已经说完,开头我提到的三个问题第一第二个已经解决,第三个解决不了,应该是codemirror内部有自动刷新的程序,解决页面切换编辑器空白的方法可以在options加一个配置viewportMargin:Infinity不过这样会影响性能。

总结

以上所述是小编给大家介绍的在vue里使用codemirror,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery使用一个按钮控制图片的伸缩实现思路
Apr 19 Javascript
jquery将一个表单序列化为一个对象的方法
Jan 03 Javascript
将查询条件的input、select清空
Jan 14 Javascript
Bootstrap模态对话框的简单使用
Apr 29 Javascript
javascript显示倒计时控制按钮的简单实现
Jun 07 Javascript
浅谈js多维数组和hash数组定义和使用
Jul 27 Javascript
jQuery中delegate()方法的用法详解
Oct 13 Javascript
使用原生的javascript来实现轮播图
Feb 24 Javascript
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
vue实现后台管理权限系统及顶栏三级菜单显示功能
Jun 19 Javascript
vue设置导航栏、侧边栏为公共页面的例子
Nov 01 Javascript
JS实现可控制的进度条
Mar 25 Javascript
vue中使用codemirror的实例详解
Nov 01 #Javascript
vue-lazyload使用总结(推荐)
Nov 01 #Javascript
vue 中基于html5 drag drap的拖放效果案例分析
Nov 01 #Javascript
Vue列表渲染的示例代码
Nov 01 #Javascript
socket io与vue-cli的结合使用的示例代码
Nov 01 #Javascript
Vue表单输入绑定的示例代码
Nov 01 #Javascript
浅谈Angular 观察者模式理解
Nov 01 #Javascript
You might like
《OVERLORD》手游英文版即将上线 手机上也能扮演骨王
2020/04/09 日漫
随时给自己贴的图片加文字的php水印
2007/03/16 PHP
php精确的统计在线人数的方法
2015/10/21 PHP
CL vs ForZe BO5 第二场 2.13
2021/03/10 DOTA
用脚本调用样式的几种方法
2006/12/09 Javascript
Jquery 组合form元素为json格式,asp.net反序列化
2009/07/09 Javascript
JS获取父节点方法
2009/08/20 Javascript
JavaScript 数组循环引起的思考
2010/01/01 Javascript
js获取浏览器的可视区域尺寸的实现代码
2011/11/30 Javascript
js限制文本框只能输入数字(正则表达式)
2012/07/15 Javascript
JS弹出层的显示与隐藏示例代码
2013/12/27 Javascript
基于JavaScript实现仿京东图片轮播效果
2015/11/06 Javascript
微信小程序 vidao实现视频播放和弹幕的功能
2016/11/02 Javascript
Node.js实现注册邮箱激活功能的方法示例
2018/03/23 Javascript
React中嵌套组件与被嵌套组件的通信过程
2018/07/11 Javascript
angular6 填坑之sdk的方法
2018/12/27 Javascript
javascript的delete运算符知识点总结
2019/11/19 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
2020/09/22 Javascript
解决ant Design中Select设置initialValue时的大坑
2020/10/29 Javascript
[01:02:26]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第二场 1月18日
2021/03/11 DOTA
Python常用小技巧总结
2015/06/01 Python
python爬取微信公众号文章的方法
2019/02/26 Python
Python进阶:生成器 懒人版本的迭代器详解
2019/06/29 Python
Python OpenCV 调用摄像头并截图保存功能的实现代码
2019/07/02 Python
如何基于python生成list的所有的子集
2019/11/11 Python
tensorflow 模型权重导出实例
2020/01/24 Python
Python3+Appium安装及Appium模拟微信登录方法详解
2021/02/16 Python
英国排名第一的最新设计师品牌手表独立零售商:TIC Watches
2016/09/24 全球购物
切尔西足球俱乐部官方网上商店:Chelsea FC
2019/06/17 全球购物
俄罗斯品牌服装和鞋子在线商店:BRIONITY
2020/03/26 全球购物
应用心理学个人的求职信
2013/12/08 职场文书
医德医风演讲稿
2014/05/20 职场文书
2014法院四风问题对照检查材料思想汇报
2014/10/04 职场文书
党员示范岗材料
2014/12/19 职场文书
担保贷款承诺书
2015/04/30 职场文书
祝酒词范文
2015/08/12 职场文书