uiwjs / react-monacoeditor

Monaco Editor component for React.
https://uiwjs.github.io/react-monacoeditor/
MIT License
296 stars 25 forks source link

请教个问题,默认高亮一些字段 #175

Closed UvDream closed 1 year ago

UvDream commented 1 year ago

我想实现一个效果,默认高亮一些字段,类似于

image

这个高亮字段是后端传过来的,有啥好的实现思路吗?万分感谢

jaywcjlove commented 1 year ago

@UvDream 官方有个类似的示例,你可以参考: https://microsoft.github.io/monaco-editor/playground.html?source=v0.43.0#example-extending-language-services-hover-provider-example

monaco.languages.register({ id: "mySpecialLanguage" });

monaco.languages.registerHoverProvider("mySpecialLanguage", {
    provideHover: function (model, position) {
        return xhr("./playground.html").then(function (res) {
            return {
                range: new monaco.Range(
                    1,
                    1,
                    model.getLineCount(),
                    model.getLineMaxColumn(model.getLineCount())
                ),
                contents: [
                    { value: "**SOURCE**" },
                    {
                        value:
                            "```html\n" +
                            res.responseText.substring(0, 200) +
                            "\n```",
                    },
                ],
            };
        });
    },
});

monaco.editor.create(document.getElementById("container"), {
    value: "\n\nHover over this text",
    language: "mySpecialLanguage",
});

function xhr(url) {
    var req = null;
    return new Promise(function (c, e) {
        req = new XMLHttpRequest();
        req.onreadystatechange = function () {
            if (req._canceled) {
                return;
            }

            if (req.readyState === 4) {
                if (
                    (req.status >= 200 && req.status < 300) ||
                    req.status === 1223
                ) {
                    c(req);
                } else {
                    e(req);
                }
                req.onreadystatechange = function () {};
            }
        };

        req.open("GET", url, true);
        req.responseType = "";

        req.send(null);
    }).catch(function () {
        req._canceled = true;
        req.abort();
    });
}
UvDream commented 1 year ago

@UvDream 官方有个类似的示例,你可以参考: https://microsoft.github.io/monaco-editor/playground.html?source=v0.43.0#example-extending-language-services-hover-provider-example

monaco.languages.register({ id: "mySpecialLanguage" });

monaco.languages.registerHoverProvider("mySpecialLanguage", {
  provideHover: function (model, position) {
      return xhr("./playground.html").then(function (res) {
          return {
              range: new monaco.Range(
                  1,
                  1,
                  model.getLineCount(),
                  model.getLineMaxColumn(model.getLineCount())
              ),
              contents: [
                  { value: "**SOURCE**" },
                  {
                      value:
                          "```html\n" +
                          res.responseText.substring(0, 200) +
                          "\n```",
                  },
              ],
          };
      });
  },
});

monaco.editor.create(document.getElementById("container"), {
  value: "\n\nHover over this text",
  language: "mySpecialLanguage",
});

function xhr(url) {
  var req = null;
  return new Promise(function (c, e) {
      req = new XMLHttpRequest();
      req.onreadystatechange = function () {
          if (req._canceled) {
              return;
          }

          if (req.readyState === 4) {
              if (
                  (req.status >= 200 && req.status < 300) ||
                  req.status === 1223
              ) {
                  c(req);
              } else {
                  e(req);
              }
              req.onreadystatechange = function () {};
          }
      };

      req.open("GET", url, true);
      req.responseType = "";

      req.send(null);
  }).catch(function () {
      req._canceled = true;
      req.abort();
  });
}
image

mao'si貌似不是,谢谢了,我再找找