解决CodeMirror编辑器Tab转空格问题

CodeMirror默认

最近用CodeMirror做了个编辑器,遇到一个问题: 就像这样:

默认的Tab是不会转为空格的,需要处理。


不是想要的结果

网上和官网提供找的方法是:

editor.setOption("extraKeys", {
  Tab: function(cm) {
    var spaces = Array(cm.getOption("indentUnit") + 1).join(" ");
    cm.replaceSelection(spaces);
  }
});

实践了一下,还是会有一个问题: 
选中多行代码缩进的时候,选中的代码也会被转为空格,就被删了!!而不是理想中的选中几行都缩进。


解决方案

经过了几天的积累,终于找到了解决方案:

editor.setOption("extraKeys", {
    Tab: newTab
});

function newTab(cm) {
    if (cm.somethingSelected()) {
        cm.indentSelection('add');
    } else {
        cm.replaceSelection(cm.getOption) ? "\t" : Array(cm.getOption("indentUnit") + 1).join(" "), "end", "+input");
    }
}

DEMO:

效果:

时间: 2024-10-31 13:22:37

解决CodeMirror编辑器Tab转空格问题的相关文章

php解决input输入多个空格只显示一个的问题

这里简单的介绍了关于php解决input输入多个空格只显示一个的问题,我们利用了chr(32)来替换成html空格符,有需要的朋友可以参考一下. 代码如下 <body> <form id="form1" name="form1" method="post" action="">   <label for="textfield"></label>   <i

CSS解决浏览器的等宽空格问题

很多时候,希望能够在HTML中使用空格排版.但浏览器在解析HTML时,会把连续的空格解析成一个,所以我们会使用等这样的占位符. 但是也不是很可靠,比如空格间距非常大,那么我们必须增加多个占位符,同时页面的体积会变得非常大.     同时,注意到Safari中的宽度是已设定字符的空格宽度(Safari的默认字体为Times),也就是说一个中文字符需要两个占位符. 具体情况如下图所示: 其实,这不是Safari的问题,而是字体的问题.解决的方式就是使用下面的属性 font-family:'宋体';将

word制表位和TAB、空格

首先,我们先来了解一下,什么是WORD的制表位及其作用! 一.制表位的概念及作用 制表位是指水平标尺上的位置,它指定了文字缩进的距离或一栏文字开始的位置,使用户能够向左.向右或居中对齐文本行;或者将文本与小数字符或竖线字符对齐. 用户可以在制表符前自动插入特定字符,如句号或划线等.默认情况下,按一次Tab键,Word将在文档中插入一个制表符,其间隔为0.74厘米. 二.制表位的应用范围 在排版上.在论文编辑.制作索引或制作目录中,就需要使用到制表位. 三.制表位的种类 制表位的种类包括:左对齐,

Dreamweaver解决网页制作中的空格问题

    1. 制作一张很小的透明图片.嵌入到文本当中或者行首.这种方法实现起来比较麻烦.     2. 使用全角空格.为什么这种方案可行呢?因为全角空格实现起来比较简单.虽然也是空格但是对应的HTML代码却不是空格代码.而是另外的代码,因此Dreamweaver把他当字符处理而不是空格.所以可以相安无事.但是在不支持中文字符集的浏览器看来就是乱码了.具体操作方法就是选择智能ABC输入法,然后切换成全角状态,再键入空格就OK啦!     3. 使用软空格.即在要插入空格的地方按Ctrl+shift

MathType公式编辑器怎么输入空格

  1.打开[MathType]软件,可以从你的电脑 开始 ->所有程序 ->Mathtype进行打开; 2.也可以直接从桌面的快捷方式打开; 3.界面简单的区域划分如下; 4.在上图的公式编辑区域开始输入公式,和下图类似输入公式,输入文字和公式 5.假如你要输入这些,但是你发现"一元二次方程"和公式之间挨的太近了,你想调整一下,加一些空格你该怎么办呢? 6.将鼠标定位至要加入空格的地方 7.选择"菜单栏"中的[Style] 8.选择"styl

解决ueditor编辑器不能上传图片的问题

在上传不了图片时,如果有你权限查看web访问日志,你可以看一个"拒绝访问"的错误.小编仔细调试分析,终于找到问题所在. 在它的upload.class.asp中,有如下一个函数:  代码如下 复制代码  Private Function CheckOrCreatePath( ByVal path )         Set fs = Server.CreateObject("Scripting.FileSystemObject")         Dim parts

寻高手解决Flex4 中Tab 关闭标签问题

问题描述 刚接触Flex,想实现tab的全部关闭:就像是139邮箱那个tab一样,当tab数达到一定就会自动创建出一个可以关闭全部tab的按钮 tab数不够时按钮会隐藏 而且是始终存在末尾 问题补充:zyn010101 写道 解决方案 不好意思,381547903解决方案二:你加我qq吧,38154793解决方案三:Tabnavigator有个change事件,你在事件函数中判断当前选定的子容器,子容器的数目,按照子容器的数目选择序号关闭就可以了.解决方案四:你判断TabNavigator下的v

解决ewebeditor编辑器不兼IE7/IE8/IE9/360浏览器方法

在eWebEditor的目录里找到Editor.js文件,有的可能在Include目录下,也有可能在js目录下,用记事本打开,在其中找到如下代码 代码  代码如下 复制代码 if (element.YUSERONCLICK) { eval(element.YUSERONCLICK + "anonymous()"); } 改为 代码  代码如下 复制代码 if (element.YUSERONCLICK) { try { eval(element.YUSERONCLICK + "

yii2整合百度编辑器umeditor及umeditor图片上传问题的解决办法_php实例

我们接下来就来聊聊Yii2框架是如何整合百度编辑器umeditor的. umeditor是啥,我只听过ueditor,你这umeditor是不是盗版的东东喃?umeditor呢,说白了就是mini版的ueditor,按照百度官方说法,其实就是编辑器中的"短软小",但是功能俱全.咳咳,咱们回归正题. 首先勒,咱们先去官网下载一份mini版的ueditor umeditor,注意哦,是um editor. 下载下来解压放到项目根目录下面的 /css目录下 命名为umeditor,具体位置各