如何解决CodeMirror在移动设备及Android WebView中的适配问题

前端代码修改 #

首先需要补充引入CodeMirror官方移动端适配扩展，调整初始化配置和全局样式：

1. 引入官方移动端适配扩展touch.js（该文件在官方包的addon/edit/目录下）：

<script src="addon/edit/touch.js"></script>

2. 新增全局样式，解决高度占满和移动端适配问题：

<style>
* {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}
.CodeMirror {
  height: 100vh;
  font-size: 16px; /* 避免移动端点击时自动缩放页面 */
}
</style>

3. 调整CodeMirror初始化配置：

var myCodeMirror = CodeMirror(document.body, 
{
  mode: "javascript",
  value: "var a = 'DS code is cool thanks to codemirror';",
  lineNumbers: true,
  lineWrapping: true,
  // 新增适配配置
  inputStyle: "contenteditable", // 切换为移动端兼容性更好的输入模式
  electricChars: false, // 禁用关键字触发的自动缩进，解决输入var后回车异常问题
  viewportMargin: Infinity, // 渲染全部行内容，避免滚动时焦点偏移
  mobileHacks: true // 开启内置移动端兼容逻辑
}
);

Android WebView 配置调整 #

需要对承载页面的WebView做如下配置，解决输入和焦点相关问题：

1. 基础功能开启：

WebSettings settings = webView.getSettings();
settings.setJavaScriptEnabled(true);
settings.setDomStorageEnabled(true);
settings.setAllowFileAccess(true);

2. 焦点配置，解决点击无法触发编辑状态问题：

webView.setFocusable(true);
webView.setFocusableInTouchMode(true);
webView.requestFocus(View.FOCUS_DOWN);

3. 软键盘适配，在AndroidManifest.xml对应的Activity标签下添加属性，避免软键盘遮挡编辑器、输入时焦点异常：

<activity
    android:name=".YourActivity"
    android:windowSoftInputMode="adjustResize" />

修改完成后三个问题均可解决：

• 引入touch.js和调整输入模式后，空行回退时焦点不会丢失，软键盘不会自动隐藏，可正常删除空行
• 禁用electricChars后，输入关键字后回车不会触发异常逻辑，配合WebView焦点配置可正常点击唤起编辑状态
• 全局样式设置后编辑器可占满整个屏幕高度

内容的提问来源于stack exchange，提问作者Encoder's YT