在手机上显示Codemirror皮棉错误/警告


由于CodeMirror棉绒

而导致的错误和警告

スクリーンショット 2018-03-24 19.12.17.png

我正在使用此功能,但是由于鼠标悬停时会显示工具提示,因此我了解到没有鼠标的智能手机存在错误,但是我不知道错误是什么。

这是个问题,因此当我点击标记(或在行号附近点击)时,我试图显示工具提示。

点击相应的部分将其删除。

机制

在CodeMirror的touchend事件中,当您点击标记时,将在此处生成伪鼠标悬停事件来发出工具提示。

如果您可以自己生成并显示工具提示,则不需要伪鼠标悬停事件,但是
该工具提示的功能似乎与codemirror密切相关。
由于不可能仅检索该部分,因此它受伪事件支持。
(当然,您可以复制和粘贴,但是我不喜欢在多个地方使用相同的代码...)

除非是智能手机,否则不会发生touchend事件本身,因此仅当它是智能手机时才起作用。
如果是PC,则照常通过鼠标悬停显示。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
  CodeMirror.on(cm.display.scroller, "touchend", function (e) {
    let touch = cm.display.activeTouch;
    let date = new Date;
    if (touch &&  touch.left != null &&
        !touch.moved && date - touch.start < 300) {

      //エディタの何処かをsingle tapした
      if (!touch.prev) {

        //行に変換するならこれ
        var pos = cm.coordsChar(touch, "page");

        //gutterの範囲判定
        if(touch.left < Math.floor(cm.display.gutters.getBoundingClientRect().right)){
          showLintTooltip(pos.line);
          return;
        }
      }
    }

    //hide tooltip
    if(currentTooptipTarget) {
      dispatchMouseEvent(currentTooptipTarget, "mouseout", 0, 0);
      currentTooptipTarget = null;
    }
  });


  let currentTooptipTarget = null ;
  function showLintTooltip(line){

    let markers = jsEditor.state.lint.marked;
    let info = jsEditor.lineInfo(line);
    for (let marker of markers) {
      if (marker.lines[0].lineNo() === line) {
        //need to tooltip
        let element = info.gutterMarkers["CodeMirror-lint-markers"];
        if (element) {
          let rect = element.getBoundingClientRect();
          console.log(rect);

          if(currentTooptipTarget == element){
            //hide tooltip
            dispatchMouseEvent(element, "mouseout", rect.x, rect.y);
            currentTooptipTarget = null;
          }else {
            //hide tooltip
            if(currentTooptipTarget) {
              dispatchMouseEvent(currentTooptipTarget, "mouseout", rect.x, rect.y);
            }
            //show tooltip
            dispatchMouseEvent(element, "mouseover", rect.left+rect.width/2, rect.top+rect.height/2);

            currentTooptipTarget = element;
          }
          return;
        }
      }
    }
  }

  function dispatchMouseEvent(elm, type,x,y){

    var mouseMoveEvent = document.createEvent("MouseEvents");

    mouseMoveEvent.initMouseEvent(
        type, //event type : click, mousedown, mouseup, mouseover, mousemove, mouseout.
        true, //canBubble
        false, //cancelable
        window, //event's AbstractView : should be window
        1, // detail : Event's mouse click count
        x, // screenX
        y, // screenY
        x, // clientX
        y, // clientY
        false, // ctrlKey
        false, // altKey
        false, // shiftKey
        false, // metaKey
        0, // button : 0 = click, 1 = middle button, 2 = right button
        null // relatedTarget : Only used with some event types (e.g. mouseover and mouseout). In other cases, pass null.
    );

    elm.dispatchEvent(mouseMoveEvent);
  }

注意

尽管可以用

上面的代码显示,但在iOS的css(野生动物园)中似乎有一个错误(?),并且似乎position:fixed的位置指定不能很好地工作。 (垂直移位)
在这种情况下,我认为如果您使用css和position:absolute,那将是正确的。

另外,它可以在Android上正常运行(据我所试)。

其他

在ios上使用Codemirror时,存在日语输入奇怪的问题,因此我认为这种对应关系也是必不可少的(我将其用作参考)
https://qiita.com/ttakuru88/items/e363267772cacf4c1fa2

首先在智能手机上编写代码有多少需求?