uiwjs / react-monacoeditor

Monaco Editor component for React.

Home Page:https://uiwjs.github.io/react-monacoeditor/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

UvDream opened this issue · comments

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

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

@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 官方有个类似的示例,你可以参考: 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貌似不是,谢谢了,我再找找