Question

下面是HTML代码。我正在尝试使用ace js创建编辑器

<!DOCTYPE html>
<html lang="en">

<head>
  <script>
    window.onload = function what() {
      var a = document.getElementById("abc");
      a.innerHTML = 'hi';
    };
  </script>
  <title>ACE in Action</title>
  <style type="text/css" media="screen">
    #editor {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
  </style>

</head>

<body>

  <div id="editor">
    <span id="abc">Class </span>{ public void add(int a, int b){ int sum=a+b; } }
  </div>
  <script src="http://ajaxorg.github.io/ace-builds/src/ace.js" type="text/javascript" charset="utf-8"></script>
  <script src="http://ajaxorg.github.io/ace-builds/src/ext-language_tools.js"></script>
  <script type="text/javascript" src="ClassData.json"></script>
  <script>
    var langTools = ace.require("ace/ext/language_tools");
    var editor = ace.edit("editor");
    editor.setTheme("ace/theme/monokai");
    editor.session.setMode("ace/mode/java");
    editor.setOptions({
      enableBasicAutocompletion: true
      // enableLiveAutocompletion: true
    });
    var staticWordCompleter = {
      getCompletions: function(editor, session, pos, prefix, callback) {
        var wordList = ["foo", "bar", "baz", "arpit", "abhishek"];
        callback(null, wordList.map(function(word) {
          return {
            caption: word,
            value: word,
            meta: "class"
          };
        }));

      }
    }

    langTools.addCompleter(staticWordCompleter);
  </script>
</body>

</html>

错误：

错误“无法将属性'innerHTML'设置为null”。

我正在尝试使用Ace JS创建一个在线编辑器，该编辑器具有在创建任何对象时自动导入包并添加类的自定义名称等功能。为此，我在Class旁边添加了一个'p'标记，以便可以在该行中插入一些文本，但是它无法检测到名为'abc'的ID。

Answer 1

您使用的ACE编辑器似乎不接受文本字段内的HTML。打开开发人员工具并检查内容，发现ACE编辑器删除了ID为span的{{1}}，这就是为什么您会得到一个空指针试图访问不存在的元素的原因。

编辑器修改了文本的开头，使其在开发人员工具中看起来像abc。

错误“无法将属性'innerHTML'设置为null”

1 个答案: