基于ace的brace在输入中文时前面有个框的解决过程

[abeet]

基于ace的brace在输入中文时前面有个框，这个问题也存在于有道云笔记6.x。

brace.js官网的bug更严重，输入中文不光前面有框，汉字还会重复。
http://thlorenz.com/brace/
而ace最新版
https://ace.c9.io/
没有这个问题
然后在ace的issues里搜索 chinese 发现了一个issue说汉字输入有问题

ajaxorg/ace#3099

我推断是brace.js里面的修改版ace editor版本太低有bug，
花了好多时间去将ace最新版合并到brace.js里。
合并后问题没有解决，
才考虑是不是字符的显示问题。

brace它是修改版的ace中用到的占位字符
\x01
在 electron 1.6 chrome 56 下
显示成了 "⁥ ￰ ￱ ￲ ￳ ￴ ￵ ￶ ￷ ￸"
ace最新版用的占位字符是
\u2028
在 electron 1.6 chrome 56 下
显示效果类似于 "⁦ ⁧ ⁨ ⁩"

我将 \x01 改为 \u00ad 字符不再显示出来

解决很简单，找到问题花了半天时间。

arr=[
  '\\x00','\x00', '\\x01','\x01', '\\x02','\x02', '\\x03','\x03', '\\x04','\x04', '\\x05','\x05', '\\x06','\x06', '\\x07','\x07', '\\x08','\x08', '\\x09','\x09',
  '\\x0a','\x0a', '\\x0b','\x0b', '\\x0c','\x0c', '\\x0d','\x0d', '\\x0e','\x0e', '\\x1f','\x1f',
  '\\x7f','\x7f',
  '\\x80','\x80', '\\x81','\x81', '\\x82','\x82', '\\x83','\x83', '\\x84','\x84', '\\x85','\x85', '\\x86','\x86', '\\x87','\x87', '\\x88','\x88', '\\x89','\x89',
  '\\x8a','\x8a', '\\x8b','\x8b', '\\x8c','\x8c', '\\x8d','\x8d', '\\x8e','\x8e', '\\x8f','\x8f',
  '\\x90','\x90', '\\x91','\x91', '\\x92','\x92', '\\x93','\x93', '\\x94','\x94', '\\x95','\x95', '\\x96','\x96', '\\x97','\x97', '\\x99','\x99', '\\x99','\x99',
  '\\x9a','\x9a', '\\x9b','\x9b', '\\x9c','\x9c', '\\x9d','\x9d', '\\x9e','\x9e', '\\x9f', '\x9f',
  '\\u0000','\u0000', '\\u00ad','\u00ad',
  '\\u0600','\u0600', '\\u0601','\u0601', '\\u0602','\u0602', '\\u0603','\u0603', '\\u0604','\u0604', '\\u070f','\u070f', '\\u17b4','\u17b4', '\\u17b5','\u17b5',
  '\\u200c','\u200c', '\\u200d','\u200d', '\\u200e','\u200e', '\\u200f','\u200f',
  '\\u2028','\u2028', '\\u2029','\u2029', '\\u202a','\u202a', '\\u202b','\u202b', '\\u202c','\u202c', '\\u202d','\u202d', '\\u202e','\u202e', '\\u202f','\u202f',
  '\\u2060','\u2060', '\\u2061','\u2061', '\\u2062','\u2062', '\\u2063','\u2063', '\\u2064','\u2064', '\\u2065','\u2065', '\\u2066','\u2066', '\\u2067','\u2067', '\\u2068','\u2068', '\\u2069','\u2069',
  '\\u206a','\u206a', '\\u206b','\u206b', '\\u206c','\u206c', '\\u206d','\u206d', '\\u206e','\u206e', '\\u206f','\u206f',
  '\\ufeff','\ufeff',
  '\\ufff0','\ufff0', '\\ufff1','\ufff1', '\\ufff2','\ufff2', '\\ufff3','\ufff3', '\\ufff4','\ufff4', '\\ufff5','\ufff5', '\\ufff6','\ufff6', '\\ufff7','\ufff7', '\\ufff8','\ufff8', '\\ufff9','\ufff9',
  '\\ufffa','\ufffa', '\\ufffb','\ufffb', '\\ufffc','\ufffc', '\\ufffd','\ufffd', '\\ufffe','\ufffe', '\\uffff','\uffff',
]
  
arr1 = ["\x0c","\x0d","\u00ad","\u070f","\u17b4","\u17b5","\u200c","\u200d","\u200e","\u200f","\u202a","\u202b","\u202c","\u202d","\u202e","\u2060","\u2061","\u2062","\u2063","\u2064","\u2065","\u2066","\u2067","\u2068","\u2069","\u206a","\u206b","\u206c","\u206d","\u206e","\u206f","\ufeff","\ufff0","\ufff1","\ufff2","\ufff3","\ufff4","\ufff5","\ufff6","\ufff7","\ufff8","\ufffc"]
arr2 = ["\\x0c","\\x0d","\\u00ad","\\u070f","\\u17b4","\\u17b5","\\u200c","\\u200d","\\u200e","\\u200f","\\u202a","\\u202b","\\u202c","\\u202d","\\u202e","\\u2060","\\u2061","\\u2062","\\u2063","\\u2064","\\u2065","\\u2066","\\u2067","\\u2068","\\u2069","\\u206a","\\u206b","\\u206c","\\u206d","\\u206e","\\u206f","\\ufeff","\\ufff0","\\ufff1","\\ufff2","\\ufff3","\\ufff4","\\ufff5","\\ufff6","\\ufff7","\\ufff8","\\ufffc"]

arr3 = []

for(var i=0;i<arr1.length;i++){
  $0.innerText=arr1[i]
  if($0.clientWidth === 0 && $0.clientWidth === 0)
    arr3.push(arr2[i*2])
}
arr3

上面的字符是在 Chrome54下宽为0
宽高都为0的是 ["\x09","\x0b","\x0c","\u00ad"]
分别是 水平制表 垂直制表 换页键 软连字符

[darlinglele]

那是怎么解决的啊 没太看明白 @abeet