标签: codemirror

如何使用CodeMirror动态切换模式？

我有默认设置,但需要切换它.

CodeMirror似乎工作得非常好,除非我在textarea中只有少量(3个或更少)代码行.当发生这种情况时,textarea是空白的,直到I(A)在textarea中输入或(B)做一些导致浏览器重新绘制的内容(如调整大小).当有超过3行时,它们会在首次渲染页面时显示正常.

我在这里没有做任何想法:

var editor = CodeMirror.fromTextArea(document.getElementById('html'), {
    mode: 'text/html',
    tabMode: 'indent',
    lineNumbers: true
});

只是想知道是否有其他人有这个问题.

我在选项卡式界面中使用带有textareas的codemirror,当我不在包含codemirror的选项卡中然后转到它时,我得到没有行号或光标的空白空间,当我刷新它工作的页面时,我知道这是因为标签内容是隐藏的,display: none;所以我该如何解决这个问题呢？

这是我的代码,(我也使用jquery):

var editor = CodeMirror.fromTextArea(document.getElementById($this.attr('id')), {
        lineNumbers: true,
        mode: text/html,
        enterMode: "keep",
        tabMode: "shift"
    });

    $(editor.getScrollerElement()).width(300);
    width = $(editor.getScrollerElement()).parent().width();
    $(editor.getScrollerElement()).width(width);
    editor.refresh();

提前致谢.

一直试图决定使用CodeMirror还是Ace编辑器.我一直倾向于CodeMirror,但是我非常喜欢Ace的一个特性,那就是它如何进行语法验证.因此,当我输入时,行号旁边的左侧排水沟区域会出现警告或错误图标,当我将鼠标悬停在它上面时,它会给我一些描述.

有没有办法在CodeMirror中获得此功能？具体来说,我正在使用CodeMirror的css模式.

能够添加我自己的自定义验证也很好.

谢谢.

我有一行文本字段.(输入类型='文字')

我没有textarea.

该文本字段允许用户在简单的DSL中输入小字符串.为了给你一个想法,他们看起来像这样:

• 从米兰到伦敦
• 从意大利(罗马,佛罗伦萨)到英国

我想用codemirror替换这个文本字段

我的问题是:

• 使用代码镜像一行textarea一个好主意？
• 有人这样做过吗？
• 有没有其他方法可以使文本字段更"丰富多彩"？

谢谢,

我正在使用Selenium在包含CodeMirror编辑器的页面上运行自动化测试.我没有访问该对象,但我确实有jQuery可用.如何以CodeMirror识别更改的方式编辑编辑器的内容？

我正在尝试允许codemirror自动调整到给定数量的行或像素高度.达到此最大大小后,小部件应添加滚动条.

CodeMirror.fromTextArea(document.getElementById("code"), {
   lineNumbers: true,
   viewportMargin: 50

});

最大高度不起作用

.CodeMirror {
 border: 1px solid #eee;
 height: 100%;
}

http://jsfiddle.net/qzjo4ejh/

我正在为我的反应项目开发一些降价编辑器.我想使用CodeMirror作为代码编辑器,但是当我用webpack构建它时它似乎无法工作.

如果说实话,CodeMirror在DOM树中,textArea是隐藏的,但我看到的是:

和

UPD:相同的代码在codepen上完美运行.我想这是webpack的一个问题.

一些代码:

index.js

import React from 'react';
import ReactDOM from 'react-dom';

import {Editor} from './components';

const rootElement = document.getElementById('root');

ReactDOM.render(<Editor />, rootElement);

组件/ editor.js内

import React, { Component } from 'react';
import cm from 'codemirror';
require('codemirror/mode/markdown/markdown');

export class App extends Component {
  componentDidMount() {
    this.codeMirror = cm.fromTextArea(this.refs.editor, {mode: 'markdown'})
  }
  render() {
    return (
      <div>
        <textarea ref='editor' autoComplete='off' defaultValue='default value' />
      </div>
    );
  }
}

server.js

var path = require('path');
var express = require('express');
var webpack = …

我正在尝试将事件发射器与React useEffect和一起使用useState，但是它始终获取初始状态而不是更新状态。如果我直接调用事件处理程序，即使使用，也可以使用setTimeout。

如果将值传递给useEffect()第二个参数，它将使其起作用，但是，每当值更改时（这是击键触发的），这都会导致事件发射器重新订阅。

我究竟做错了什么？我试过useState，useRef，useReducer，和useCallback，并不能得到任何工作。

这是复制品：

import React, { useState, useEffect } from "react";
import { Controlled as CodeMirror } from "react-codemirror2";
import "codemirror/lib/codemirror.css";
import EventEmitter from "events";

let ee = new EventEmitter();

const initialValue = "initial value";

function App(props) {
  const [value, setValue] = useState(initialValue);

  // Should get the latest value, both after the initial server load, and whenever the Codemirror input changes.
  const handleEvent …

有没有人尝试通过browserify使用代码镜像？

我发现没有任何东西是可见的,即使它已经生成了所有的html标签.

代码 :

var CodeMirror = require('codemirror');
require('codemirror/mode/javascript/javascript.js');

  var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
    lineNumbers: true,
    extraKeys: {
      "Ctrl-Space": "autocomplete"
    },
    mode: {
      name: "javascript",
      globalVars: true
    }
  });

我想知道我应该如何要求js模式？