Codemirror 显示 HTMLLint 内联错误 (.addLineWidget)

2024-03-13

我一直在尝试让 HTMLHint 显示内联而不是 JSHint 使用.addLineWidget http://codemirror.net/doc/manual.html#addLineWidget。 Codemirror 提供了我尝试使用 JSHint 执行的操作的演示here http://codemirror.net/demo/widget.html但是我很难将 HTMLHint 的错误警报集成为代码的内联警报，例如官方演示 http://codemirror.net/demo/widget.html.

参考:
http://codemirror.net/demo/lint.html http://codemirror.net/demo/lint.html
http://codemirror.net/demo/widget.html http://codemirror.net/demo/widget.html
http://codemirror.net/doc/manual.html#addLineWidget http://codemirror.net/doc/manual.html#addLineWidget

var widgets = [];
var waiting;

function updateHints() {
  editor.operation(function(){

    var defaultRules = {
      "tagname-lowercase": true,
      "attr-lowercase": true,
      "attr-value-double-quotes": true,
      "doctype-first": false,
      "tag-pair": true,
      "spec-char-escape": true,
      "id-unique": true,
      "src-not-empty": true,
      "attr-no-duplication": true
    };

    for (var i = 0; i < widgets.length; ++i){
      editor.removeLineWidget(widgets[i]);
    }

    widgets.length = 0;

    //***** HERE ***** 
    // var result = HTMLHint.verify(editor.getValue(), options && options.rules || defaultRules);
    var messages  = HTMLHint.verify(editor.getValue(), options && options.rules || defaultRules);

    //***** HERE *****
    for (i = 0; i < messages.length; ++i) {

      //***** HERE *****
      var err = messages[i];
      if (!err) continue;
      var msg = document.createElement("div");
      var icon = msg.appendChild(document.createElement("span"));
      icon.innerHTML = "!!";
      icon.className = "lint-error-icon";
      //***** HERE *****
      msg.appendChild(document.createTextNode(err.message));
      msg.className = "lint-error";
      widgets.push(editor.addLineWidget(err.line - 1, msg, {coverGutter: false, noHScroll: true}));
    }
  });// end of editor.operation
}// end of updateHints

editor = CodeMirror(document.getElementById("code"), {
  lineNumbers: true,
  mode: "text/html",
  lint: true,
  gutters: ["CodeMirror-lint-markers"],
  //***** HERE *****
  //lint: true,
  value: "<span class='hello'>\n  hello world\n</span>"
});

editor.on("change", function() {
  clearTimeout(waiting);
  waiting = setTimeout(updateHints, 500);
});

setTimeout(updateHints, 100);

@import url("http://necolas.github.io/normalize.css/3.0.1/normalize.css");
@import url("http://codemirror.net/lib/codemirror.css");
@import url("http://codemirror.net/addon/fold/foldgutter.css");
@import url("https://codemirror.net/addon/lint/lint.css");


.CodeMirror {
  float: left;
  width: 100%;
}
.lint-error {
  font-family: arial; 
  font-size: 70%; 
  background: #ffa; 
  color: #a00; 
  padding: 2px 5px 3px; 
}
.lint-error-icon {
  color: white; 
  background-color: red; 
  font-weight: bold; 
  border-radius: 50%; 
  padding: 0 3px; 
  margin-right: 7px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://codemirror.net/lib/codemirror.js"></script>
<script src="http://codemirror.net/javascripts/code-completion.js"></script>
<script src="http://codemirror.net/javascripts/css-completion.js"></script>
<script src="http://codemirror.net/javascripts/html-completion.js"></script>
<script src="http://codemirror.net/mode/javascript/javascript.js"></script>
<script src="http://codemirror.net/mode/xml/xml.js"></script>
<script src="http://codemirror.net/mode/css/css.js"></script>
<script src="http://codemirror.net/mode/htmlmixed/htmlmixed.js"></script>
<script src="http://codemirror.net/addon/edit/closetag.js"></script>
<script src="http://codemirror.net/addon/edit/matchbrackets.js"></script>
<script src="http://codemirror.net/addon/selection/active-line.js"></script>
<script src="http://codemirror.net/keymap/extra.js"></script>
<script src="http://codemirror.net/addon/fold/foldcode.js"></script>
<script src="http://codemirror.net/addon/fold/foldgutter.js"></script>
<script src="http://codemirror.net/addon/fold/brace-fold.js"></script>
<script src="http://codemirror.net/addon/fold/xml-fold.js"></script>
<script src="http://codemirror.net/addon/fold/comment-fold.js"></script>
<script src="https://codemirror.net/addon/lint/lint.js"></script>
<script src="https://rawgithub.com/stubbornella/csslint/master/release/csslint.js"></script>
<script src="http://htmlhint.com/js/htmlhint.js"></script>
<script src="https://codemirror.net/addon/lint/css-lint.js"></script>
<script src="https://codemirror.net/addon/lint/html-lint.js"></script>

<div id="code"></div>

HTMLHint 包含消息中的所有提示/消息。所以通过使用for如果没有错误，我会获取它的长度并继续，但如果有错误，我会按照与 JSHint lint 演示相同的方式附加它。

var widgets = [];
var waiting;

function updateHints() {
  editor.operation(function() {
    for (var i = 0; i < widgets.length; ++i){
      editor.removeLineWidget(widgets[i])
    }

    widgets.length = 0

    var messages = HTMLHint.verify(editor.getValue())
      
    for (i = 0; i < messages.length; ++i) {
      err = messages[i];
      if (!err) continue
      var msg = document.createElement("div")
      var icon = msg.appendChild(document.createElement("span"))
      icon.innerHTML = "!!"
      icon.className = "lint-error-icon"
      //***** HERE *****
      msg.appendChild(document.createTextNode(err.message))
      msg.className = "lint-error"
      widgets.push(editor.addLineWidget(err.line - 1, msg, {coverGutter: false, noHScroll: true}))
    }
  })// end of editor.operation
}// end of updateHints

editor = CodeMirror(document.getElementById("code"), {
  lineNumbers: true,
  mode: "text/html",
  lint: true,
  gutters: ["CodeMirror-lint-markers"],
  //***** HERE *****
  //lint: true,
  value: "<span class='hello'>\n  hello world\n</span>"
});

editor.on("change", function() {
  clearTimeout(waiting);
  waiting = setTimeout(updateHints, 500);
});

setTimeout(updateHints, 100);

@import url("http://necolas.github.io/normalize.css/3.0.1/normalize.css");
@import url("http://codemirror.net/lib/codemirror.css");
@import url("http://codemirror.net/addon/fold/foldgutter.css");
@import url("https://codemirror.net/addon/lint/lint.css");


.CodeMirror {
  float: left;
  width: 100%;
}
.lint-error {
  font-family: arial; 
  font-size: 70%; 
  background: #ffa; 
  color: #a00; 
  padding: 2px 5px 3px; 
}
.lint-error-icon {
  color: white; 
  background-color: red; 
  font-weight: bold; 
  border-radius: 50%; 
  padding: 0 3px; 
  margin-right: 7px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://codemirror.net/lib/codemirror.js"></script>
<script src="http://codemirror.net/javascripts/code-completion.js"></script>
<script src="http://codemirror.net/javascripts/css-completion.js"></script>
<script src="http://codemirror.net/javascripts/html-completion.js"></script>
<script src="http://codemirror.net/mode/javascript/javascript.js"></script>
<script src="http://codemirror.net/mode/xml/xml.js"></script>
<script src="http://codemirror.net/mode/css/css.js"></script>
<script src="http://codemirror.net/mode/htmlmixed/htmlmixed.js"></script>
<script src="http://codemirror.net/addon/edit/closetag.js"></script>
<script src="http://codemirror.net/addon/edit/matchbrackets.js"></script>
<script src="http://codemirror.net/addon/selection/active-line.js"></script>
<script src="http://codemirror.net/keymap/extra.js"></script>
<script src="http://codemirror.net/addon/fold/foldcode.js"></script>
<script src="http://codemirror.net/addon/fold/foldgutter.js"></script>
<script src="http://codemirror.net/addon/fold/brace-fold.js"></script>
<script src="http://codemirror.net/addon/fold/xml-fold.js"></script>
<script src="http://codemirror.net/addon/fold/comment-fold.js"></script>
<script src="https://codemirror.net/addon/lint/lint.js"></script>
<script src="https://rawgithub.com/stubbornella/csslint/master/release/csslint.js"></script>
<script src="http://htmlhint.com/js/htmlhint.js"></script>
<script src="https://codemirror.net/addon/lint/css-lint.js"></script>
<script src="https://codemirror.net/addon/lint/html-lint.js"></script>

<div id="code"></div>

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

Codemirror 显示 HTMLLint 内联错误 (.addLineWidget) 的相关文章

RequireJS 文本插件和变量连接字符串

我正在使用 RequireJS 文本插件来加载一些 html 模板当我将字符串文字传递给 require 函数时它工作正常 var templateHTML require text templates template name ht
如何在 javascript 或 jquery 中按尺寸对图像进行排序

如何在 JavaScript 或 jQuery 中按尺寸对图像进行排序我的代码如下 var imgsrc if document images length lt 1 alert No images to open return for
JavaScript 原型 - 请澄清

有人可以帮我理解原型属性吗我不明白原型属性是函数的属性还是函数内部的属性假设我们创建以下构造函数 Food 此时函数 Food 具有 Food prototype 属性由于 Food 是 Object 的实例因此这意味着 Obec
使用 jQuery 检测容器溢出？

我见过这个问题 https stackoverflow com questions 2059743 detect elements overflow using jquery但感觉必须有一个更干净的 jQuery 方法来做到这一点我什
Javascript：通过将路径作为字符串传递给对象来获取对象的深层值[重复]

这个问题在这里已经有答案了可能的重复使用字符串键访问嵌套的 JavaScript 对象 https stackoverflow com questions 6491463 accessing nested javascript obje
FormData 中的 Blob 为 null

我正在尝试通过远程 API 通过 ajax 在 android 中发送创建的照片我在用着相机图片背景 https github com an rahulpandey cordova plugin camerapicturebackgrou
Famo.us 滚动视图高度

我正在尝试使用著名的顺序布局在滚动视图下方添加图像但滚动视图的高度有问题这就是我创建滚动视图的方式 var scrollview new Scrollview direction Utility Direction X options
jspm / jQuery / TypeScript - 模块“jquery”没有默认导出

我正在尝试使用 TypeScript 和 jspm system js 来引导 Web 应用程序进行模块加载我还没有走多远安装 jspm 后并使用它来安装 jQuery jspm install jquery 以及基础知识 main
如何在服务器端按钮点击时关闭当前标签页？

我尝试在确认后关闭当前选项卡因此我将以下代码放在确认按钮的末尾但选项卡没有关闭 string jScript ClientScript RegisterClientScriptBlock this GetType keyClientBl
Jquery 自动完成 - 预填充文本字段

我有一个自动完成字段改编自地理自动完成以查找地理位置当用户从列表中选择位置时我会获取纬度经度和用于搜索的其他一些信息然而现在只有当用户实际从自动完成列表中进行选择时它才有效而不是开始键入并单击 Enter 例如他们尚未从列表中
使用 AJAX 获取发布数据

我正在尝试从 Wordpress 帖子 AJAX 中提取内容我已经在下面列出了迄今为止我的努力加载的脚本 wp enqueue script my ajax request get stylesheet directory uri js
在 jQuery 中绑定元素及其子元素

我想将事件绑定到元素及其子元素做这个的最好方式是什么 element bind click function event doSomething element bind click function event doSomething
如何上传文件 - sails.js

我可以下载图像和 pdf 但无法下载文档文件 doc pptx odt 下载文档 doc pptx odt 时仅将其下载为 ZIP XML 文件我可以做什么我在用着填写上传文件文档 https github com balderda
Google 地图 InfoBubble PixelOffset（从标记上方的默认位置移动）

我正在尝试实现一个自定义 infoBubble 它的框打开到标记的侧面而不是顶部的默认位置事实证明这比预期的要困难使用普通的infoWindow 您可以使用pixelOffset 请参阅此处文档 https developers go
javascript/jquery 禁用点击提交按钮，防止重复提交

所以我的提交按钮如下所示 a href img src images user create product png border 0 a 当我双击它时显然会双重提交问题是我将信息保存在数据库中因此那里会有重复的信息我不想那样这
在多个数组中搜索字符串，然后设置 var - jQuery

我正在寻找基于字符串存在于哪个数组中设置一个变量例如 var primary red blue yellow var secondary orange purple green 然后检查 purple 并返回它在 secondary 数组
从

我有一个 html 画布如下所示 output is a base64string of image data var oldImage new Image oldImage onload function var resizeRatio
角度 ng-repeat 根据条件添加样式

我在 div 列表上使用 ng repeat 并且在渲染此 div 的 json 中手动添加项目我需要定位我在 json 中添加的最后一个 div 它会自动在屏幕上渲染即 couse 光标所在的位置其余部分保持在相同位置但没有给出渲
我可以设置