标签: codemirror

addWidget(pos,node,scrollIntoView)将节点(应该是绝对定位的DOM节点)放入编辑器中,位于给定{line,ch}位置的正下方.当scrollIntoView为true时,编辑器将确保整个节点可见(如果可能).要再次删除窗口小部件,只需使用DOM方法(将其移动到其他位置,或在其父窗口上调用removeChild).

我真的不明白这意味着什么,或者我会用它做什么.我无法在CodeMirror代码库中找到它的用法,也无法在谷歌的任何其他地方找到它的用法.

widget codemirror

Geo*_*uer

lucky-day

7
推荐指数

1
解决办法

2215
查看次数

Css在codemirror编辑器中无法正常工作

我成功安装了codemirror编辑器.
但是关于该编辑器的CSS有一个问题.

你可以在这里查看我的意思.

那么如何在编辑器中显示第3行之后的颜色.

css css3 codemirror

San*_*hod

2013 10-07

7
推荐指数

1
解决办法

4314
查看次数

使用browserify-shim填充依赖项的依赖关系

我正在尝试重构一个使用Browserify的库,方法是使用browserify-shim从bundle中填充某些模块.具体来说,库使用require("codemirror"),但我想提供一个不包含CodeMirror的包,而是使用通过CDN提供的包.

所以我在package.json中有了browserify-shim配置

  "browserify-shim": {
    "jquery": "global:jQuery",
    "codemirror": "global:CodeMirror"
  }

Run Code Online (Sandbox Code Playgroud)

到现在为止还挺好.要求("的jquery")和要求("codemirror")已从browserified束消失和由预期代码段抓住jQuery和CodeMirror关闭窗口对象的被取代.

该库还需要一些CodeMirror附加组件.例如require('codemirror/addon/hint/show-hint.js').没关系.我想要捆绑的附加组件.但是,在此附加组件中是一个包含require("../../ lib/codemirror")的UMD包装器.Browserify正在看到这个并且正在捆绑CodeMirror来自/node_modules /codemirror/lib/mirrormirror.js因为这个(我认为).我想让它使用在codemirror shim中定义的window.CodeMirror,但是无法解决它.尝试了许多变化,包括以下内容:

  "browserify-shim": {
    "jquery": "global:jQuery",
    "codemirror": "global:CodeMirror",
    "../../lib/codemirror": "global:CodeMirror",
    "codemirror/addon/hint/show-hint.js": { 
      "exports":null,
      "depends":["../../lib/codemirror:CodeMirror"]
    }
  }

Run Code Online (Sandbox Code Playgroud)

那个要求("../../ lib/codemirror")不会消失!我确定我错过了什么.

我是用Gulp脚本运行的,但我不认为这应该有所不同.Browserify版本3.38.1.Browserify-shim版本3.7.0.

有任何想法吗？

codemirror browserify browserify-shim

Eth*_*ett

2014 09-30

7
推荐指数

1
解决办法

2484
查看次数

将CodeMirror应用于ng-model-bound textarea

我正在编写一个非常基本的游乐场.出于某种原因,我需要将html面板嵌入到AngularJS应用程序中.

在这个版本中,我将一个JQuery更改侦听器放到CSS面板中,并将CodeMirror应用于textarea.它奏效了.

在AngularJS应用程序中有一个JQuery事件监听器我感到很不舒服,所以我决定将CSS面板绑定到AngularJS应用程序,并制作了这个版本.但现在,问题是CodeMirror代码(我在下面评论)不再起作用了:

HTML:

<body>
  <div ng-app="myApp" ng-controller="myCtrl">
    HTML:<br>
    <textarea rows=10 cols=40 ng-model="area1">html body area</textarea>
    <br>CSS:<br>
    <textarea id="css" rows=10 cols=40 ng-model="css"></textarea>
  </div>
  Output:
  <section id="output">
    <iframe></iframe>
  </section>
</body>

Run Code Online (Sandbox Code Playgroud)

JavaScript的:

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
    $scope.area1 = "<body>default</body>";  
    $scope.$watch('area1', function (json) {
      render();
    }, true);

    $scope.css="body {color: red}";
    $scope.$watch('css', function (json) {
      // CodeMirror does not work anymore
      // var cm_opt = { mode: 'css', gutter: true, lineNumbers: false };
      // var css_box = …

Run Code Online (Sandbox Code Playgroud)

jquery codemirror angularjs angularjs-directive ui-codemirror

作者

2016 12-28

7
推荐指数

1
解决办法

1070
查看次数

如何在 codemirror 编辑器中使用 cypress .type() 键入？

我正在cypress为 Codemirror Editor编写一些测试。我已经cypress习惯在输入字段中输入。

我正在尝试cy.type()在 CodeMirror 编辑器中实现。我在 codemirror 中的数据在跨度内。

<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &lt; h1 &gt; Welcome to your web project canvas! &lt; /h1&gt;</span></pre>

Run Code Online (Sandbox Code Playgroud)

cypress 规范代码 cy.get('pre.CodeMirror-line') .type('Cypress HTML Data')

我无法使用 cypress 输入一些数据。

如果有人可以提供帮助，我将不胜感激？

codemirror firepad cypress

Rah*_*wal

2019 03-27

7
推荐指数

1
解决办法

1259
查看次数

如何使用 React Codemirror 自动建议 css 关键字？

我正在尝试使用反应包装器 lib https://www.npmjs.com/package/react-codemirror2通过代码镜像浏览器编辑器实现 css 的自动建议

我试过 editor.execCommand('autocomplete');onchange 事件，但它使浏览器崩溃

我的尝试

import ReactDOM from "react-dom";
import React from "react";
import {UnControlled as CodeMirror} from 'react-codemirror2';

import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/material.css';
import 'codemirror/addon/hint/show-hint.css';

require('codemirror/mode/css/css');
require('codemirror/addon/hint/css-hint');
require('codemirror/addon/hint/show-hint');
require('codemirror/addon/edit/closebrackets');
require('codemirror/addon/lint/lint');
require('codemirror/addon/display/autorefresh');


const App = () => {

    const handleChange = (editor, data, value) => {

        console.log(editor, data, value);

        /* Crash the browser */
        // editor.execCommand('autocomplete');
    }
    return(
        <div>
            <CodeMirror
                value='body{ background: red }'
                options={{
                    mode: 'css',
                    theme: 'material',
                    lineWrapping: true,
                    smartIndent: true,
                    lineNumbers: true, …

Run Code Online (Sandbox Code Playgroud)

css codemirror reactjs react-codemirror

Nan*_*ane

2020 09-14

7
推荐指数

1
解决办法

322
查看次数