开发者社区> 小麻雀> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

简介:
+关注继续查看

CodeMirror默认

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

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

codemirror-no


不是想要的结果

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

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:

效果:

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
【TP5.1】引入百度ueditor富文本编辑器
【TP5.1】引入百度ueditor富文本编辑器
32 0
我的网站搭建: (第十天) Ueditor后台编辑器
    之前说过,我的网站编辑器一开始是tinymce,然后才用的ckeditor。可是最近我发现,ckeditor的小图标不是很美观,看久了有点low的样子。
1938 0
Atom编辑器
有下面几个插件足以。需要的插件:   外加一个php语法检测的插件 linter-php
626 0
编辑器系列
1.概述 vim:编辑器之神。轻巧而强大的感觉 emacs:神一般的编辑器。编辑功能之外有更多命令,“是操作系统而不是编辑器” 其它编辑器: sublime?看上去不过是vim上加了一堆插件 leafpad:windowns过度到linux的小白适用,因为类似于windows下的notepad,编码又处理的很好(win下保存的ansi打开也不乱码,哈) 2.
1150 0
22个所见即所得在线Web编辑器
本文搜集了 22 个 Web 在线编辑器,它们基本代表了当前 Web 编辑器的现状。 1. TinyMCE 免费,开源,轻量,基于 JavaScript,高度可定制,跨平台。 2. FCKEditor 免费,开源,用户量庞大,有良好的社区支持。
1989 0
KindEditor 在线编辑器
地址 http://www.kindsoft.net/index.php 调用 下载KindEditor最新版本。打开下载页面 解压zip文件,将所有文件上传到您的网站程序目录下。例如:http://您的域名/editor/ 要显示编辑器的位置添加TEXTAREA输入框。
929 0
+关注
34
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载