CodeMirror ios下无法输入中文|日文的bug

codemirror


发表于 2018-06-13 22:41


这个问题将会被在codemirror6中被修复,在 https://codemirror.net/6/ 这里了解更多

最近发现编辑器在ios的默认输入法下,摁键盘会变成 ➊➋➌➍➎,换了第三方输入法之后不会出现这种情况了,但输入短句时发现只能输入一个汉字。一番google之后发现这是codemirror的一个bug,具体请看issue3137,这个bug 15年3月份就提出来了,但是到现在都没有被官方修复…

在issue的最下面有个人提出了一个解决方法,具体请看 patch

不过他的key_events.js文件似乎有点问题,我简单的修改了下:

import { signalLater } from "../util/operation_group"
import { restartBlink } from "../display/selection"
import { isModifierKey, keyName, lookupKey } from "../input/keymap"
import { eventInWidget } from "../measurement/widgets"
import { ie, ie_version, mac, presto } from "../util/browser"
import { activeElt, addClass, rmClass } from "../util/dom"
import { e_preventDefault, off, on, signalDOMEvent } from "../util/event"
import { hasCopyEvent } from "../util/feature_detection"
import { Delayed, Pass } from "../util/misc"

import { commands } from "./commands"

// Run a handler that was bound to a key.
function doHandleBinding(cm, bound, dropShift) {
  if (typeof bound == "string") {
    bound = commands[bound]
    if (!bound) return false
  }
  // Ensure previous input has been read, so that the handler sees a
  // consistent view of the document
  cm.display.input.ensurePolled()
  let prevShift = cm.display.shift, done = false
  try {
    if (cm.isReadOnly()) cm.state.suppressEdits = true
    if (dropShift) cm.display.shift = false
    done = bound(cm) != Pass
  } finally {
    cm.display.shift = prevShift
    cm.state.suppressEdits = false
  }
  return done
}

function lookupKeyForEditor(cm, name, handle) {
  for (let i = 0; i < cm.state.keyMaps.length; i++) {
    let result = lookupKey(name, cm.state.keyMaps[i], handle, cm)
    if (result) return result
  }
  return (cm.options.extraKeys && lookupKey(name, cm.options.extraKeys, handle, cm))
    || lookupKey(name, cm.options.keyMap, handle, cm)
}

// Note that, despite the name, this function is also used to check
// for bound mouse clicks.

let stopSeq = new Delayed
export function dispatchKey(cm, name, e, handle) {
  let seq = cm.state.keySeq
  if (seq) {
    if (isModifierKey(name)) return "handled"
    stopSeq.set(50, () => {
      if (cm.state.keySeq == seq) {
        cm.state.keySeq = null
        cm.display.input.reset()
      }
    })
    name = seq + " " + name
  }
  let result = lookupKeyForEditor(cm, name, handle)

  if (result == "multi")
    cm.state.keySeq = name
  if (result == "handled")
    signalLater(cm, "keyHandled", cm, name, e)

  if (result == "handled" || result == "multi") {
    e_preventDefault(e)
    restartBlink(cm)
  }

  if (seq && !result && /\'$/.test(name)) {
    e_preventDefault(e)
    return true
  }
  return !!result
}

// Handle a key from the keydown event.
function handleKeyBinding(cm, e) {
  let name = keyName(e, true)
  if (!name) return false

  if (e.shiftKey && !cm.state.keySeq) {
    // First try to resolve full name (including 'Shift-'). Failing
    // that, see if there is a cursor-motion command (starting with
    // 'go') bound to the keyname without 'Shift-'.
    return dispatchKey(cm, "Shift-" + name, e, b => doHandleBinding(cm, b, true))
        || dispatchKey(cm, name, e, b => {
             if (typeof b == "string" ? /^go[A-Z]/.test(b) : b.motion)
               return doHandleBinding(cm, b)
           })
  } else {
    return dispatchKey(cm, name, e, b => doHandleBinding(cm, b))
  }
}

// Handle a key from the keypress event
function handleCharBinding(cm, e, ch) {
  return dispatchKey(cm, "'" + ch + "'", e, b => doHandleBinding(cm, b, true))
}

let lastStoppedKey = null
export function onKeyDown(e) {
  let cm = this
  cm.curOp.focus = activeElt()
  if (signalDOMEvent(cm, e)) return
  // IE does strange things with escape.
  if (ie && ie_version < 11 && e.keyCode == 27) e.returnValue = false
  let code = e.keyCode
  cm.display.shift = code == 16 || e.shiftKey
  let handled = handleKeyBinding(cm, e)
  if (presto) {
    lastStoppedKey = handled ? code : null
    // Opera has no cut event... we try to at least catch the key combo
    if (!handled && code == 88 && !hasCopyEvent && (mac ? e.metaKey : e.ctrlKey))
      cm.replaceSelection("", null, "cut")
  }

  // Turn mouse into crosshair when Alt is held on Mac.
  if (code == 18 && !/\bCodeMirror-crosshair\b/.test(cm.display.lineDiv.className))
    showCrossHair(cm)
}

function showCrossHair(cm) {
  let lineDiv = cm.display.lineDiv
  addClass(lineDiv, "CodeMirror-crosshair")

  function up(e) {
    if (e.keyCode == 18 || !e.altKey) {
      rmClass(lineDiv, "CodeMirror-crosshair")
      off(document, "keyup", up)
      off(document, "mouseover", up)
    }
  }
  on(document, "keyup", up)
  on(document, "mouseover", up)
}

export function onKeyUp(e) {
  if (e.keyCode == 16) this.doc.sel.shift = false
  signalDOMEvent(this, e)
}

function onKeyPressOriginal(e,cm) {
  if (eventInWidget(cm.display, e) || signalDOMEvent(cm, e) || e.ctrlKey && !e.altKey || mac && e.metaKey) return
  let keyCode = e.keyCode, charCode = e.charCode
  if (presto && keyCode == lastStoppedKey) {lastStoppedKey = null; e_preventDefault(e); return}
  if ((presto && (!e.which || e.which < 10)) && handleKeyBinding(cm, e)) return
  let ch = String.fromCharCode(charCode == null ? keyCode : charCode)
  // Some browsers fire keypress events for backspace
  if (ch == "\x08") return
  if (handleCharBinding(cm, e, ch)) return
  
  var userAgent = window.navigator.userAgent.toLowerCase()
  if (!(userAgent.indexOf('iphone') != -1 || userAgent.indexOf('ipad') != -1 || userAgent.indexOf('android') != -1)) {
	  cm.display.input.onKeyPress(e);
  }
}

function onKeyPressMobile(e,cm) {
  if(e.which >= 0x10000) {
    return
  }
  if(!cm.display.input.composing) {
    cm.keyPressTimer = setTimeout( () => {
      onKeyPressOriginal.call(this, e ,cm)
    }, 30)
  }
}

export function onKeyPress(e) {
  // XXX
  let cm = this;
  var userAgent = window.navigator.userAgent.toLowerCase()
  if (userAgent.indexOf('iphone') != -1 || userAgent.indexOf('ipad') != -1 || userAgent.indexOf('android') != -1) {
    onKeyPressMobile(e,cm)
  } else {
    onKeyPressOriginal(e,cm)
  }
}

下载CodeMirror的源码之后替换patch中的几个文件之后,通过npm install就可以生成新的CodeMirror.js了。

或者直接从这里下载 codemirror.js


搜索