Giter Club home page Giter Club logo

Comments (2)

jaywcjlove avatar jaywcjlove commented on September 28, 2024

@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();
	});
}

from react-monacoeditor.

UvDream avatar UvDream commented on September 28, 2024

@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貌似不是,谢谢了,我再找找

from react-monacoeditor.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.