Add an image to the editor

[qiufeihong2018]

Add an image to the editor. This image can be added, deleted or checked

[alii]

Please further describe what you mean by this

[qiufeihong2018]

just add an image to the editor.

[ry7791]

How about make your editor theme's backgroundColor transparent.
And add an image by using <div></div>

[ry7791]

Go to monaco playground
https://microsoft.github.io/monaco-editor/playground.html#creating-the-editor-hello-world

And copy & paste this code.
You can add an image to the editor

var jsCode = [
	'"use strict";',
	'function Person(age) {',
	'	if (age) {',
	'		this.age = age;',
	'	}',
	'}',
	'Person.prototype.getAge = function () {',
	'	return this.age;',
	'};'
].join('\n');

var editor = monaco.editor.create(document.getElementById("container"), {
	value: jsCode,
	language: "javascript",
	glyphMargin: true,
	contextmenu: false
});




// Add a content widget (scrolls inline with text)
var contentWidget = {
	domNode: null,
	getId: function() {
		return 'my.content.widget';
	},
	getDomNode: function() {
		if (!this.domNode) {
			this.domNode = document.createElement('div');
			this.domNode.innerHTML = '<img width="100px" height="100px" src="https://placeimg.com/100/100/any" />';
		}
		return this.domNode;
	},
	getPosition: function() {
		return {
			position: {
				lineNumber: 7,
				column: 8
			},
			preference: [monaco.editor.ContentWidgetPositionPreference.ABOVE, monaco.editor.ContentWidgetPositionPreference.BELOW]
		};
	}
};
editor.addContentWidget(contentWidget);



var output = document.getElementById('output');
function showEvent(str) {
	while(output.childNodes.length > 6) {
		output.removeChild(output.firstChild.nextSibling.nextSibling);
	}
	output.appendChild(document.createTextNode(str));
	output.appendChild(document.createElement('br'));
}

[qiufeihong2018]

@ry7791 You are using images as widgets, which I have already implemented, but it is not what I want.
What I want is something similar to the markText https://codemirror.net/doc/manual.html#api_constructor in codemirror, where I can add an image instead of an image name by putting an image into view-lines, which I can edit as a value.

[geyang]

@ry7791 You are using images as widgets, which I have already implemented, but it is not what I want.
What I want is something similar to the markText https://codemirror.net/doc/manual.html#api_constructor in codemirror, where I can add an image instead of an image name by putting an image into view-lines, which I can edit as a value.

@qiufeihong2018 Your original issue was one sentence, and when the maintainer asked you to clarify you send one message back. You are clearly capable of explaining the issue clearly, why not doing it from the beginning?

Please be respectful of the maintainer's time and try to be more thorough with your writing so that the maintainers do not have to try to guess what you mean and waste time responding to the wrong issue.

[qiufeihong2018]

@geyang Sorry,There are a lot of things going on and the requirements are not spelled out clearly.

[yyxy]

Any news ?

[gvcode1]

Any news, I also tried the content widget and it is not the feature we want, from @qiufeihong2018 's explaination, I think it is the feature we also required. current content widget is always overlay my text actually, it is better to make it floating with text together.

Thanks & Best Regards,

[lpeter218065]

@geyang @ry7791 is it possible to leverage codefont in the monaco-editor?

for example, the image or icon in HTML could be rendered as <i className='xxx'> </i>