Custom VSCode extension: embed native editor in webview - visual-studio-code

Goal
I want to have a webview, that embeds the native editor (see image).
The embedded part does not need to have a tabbing-feature. It would be enough to have the editor object, that I fill and update manually per Javascript.
Question
Is that possible? How would I do that?
Background
I want to show various file contents within my own webview. These contents should be editable and have all functionality, that the vscode editor has (e.g. syntax highlighting, multiple cursors, intellisense,...). At best, also 3rd party extensions should work within them.
I don't want to start implementing the whole editor again, so I'm searching for a way to embed the editor.

It is not possible to embed the native editor that comes with VS Code. The extension API simply does not support it.
The closest you can get is to import the code of the editor into your webview. The editor is called Monaco and is available via the npm package monaco-editor. It supports most (or all?) of the features offered by VS Code editor, such as IntelliSense.
However, since this editor would be unaware of the installed VS Code extensions, themes and configuration options, it will behave differently than native editors. You might be able to improve the user experience by manually propagating configuration options and themes, but this would require a significant amount of work and might not be possible for other things, such as support for language servers or third party extensions.

Related

possibility of creating an editor with custom markup

is it possible to create a new editor that includes custom markup? I went through the docs and couldn't find any extension to get it done.
My requirement is to develop an interactive graphical editor (with SVG) to manipulate text content in a file. I want to use third party css/js libs to implement the markup of the editor and at the same time using VS Code APIs fetch/update content of the current file, fire/listen to VS Code events, etc.
Extensions have very limited ability to manipulate the editor's UI. It seems to me that you have two choices:
If you need this capability to be unified with the editor, you will almost certainly need to fork VSCode.
If you don't mind your added functionality being external to VSCode, you could create an extension with a language server that implements your UI. The language server would run in a separate process, but would still be able to interact with VSCode through the extension.

Can I use the atto editor for my website?

Atto editor is an editor built specifically for moodle. It has the option to pick images from my own personal computer instead of choosing an image from the server.
Can I use this editor for my website? If yes, then how?
I have tried using tinyMCE and CKeditor but the image browsing function was not working. I have the atto editor plugin installed but it doesnt seem to work. Nothing much is available on the net for atto editor as a standalone, it is used in moodle only.
Atto was written for Moodle and is designed entirely to work within Moodle. It may be possible to rewrite it to work independently of Moodle, but I'm guessing it would be quite a lot of work to do so.

What tool can be used to create plugin/addon for bookmark requirement

I've to create plugin or add-on for my official community site.
Requirement
There should be a button at browser, which should extend a form, which can add the current url as a bookmark with interaction from user with some more inputs, in turn that should be recorded into excel sheet in local drive. I've VBA code to extract data from the community url to excel sheet. Now, I've to create browser control to enable user direct url to fetch the data.
My control should be activated (i.e. toolbar button) based on url, so what should i create, a plugin or add-on ? i want my control not to affect browser performance or user experience.
Based on reply for 2, what tool should i use to create plugin/add-on which should be compatible across browsers ?
I've gone thro' Fire-breath demo, code capability with Visual studio, which was nice, but still missing some knowledge about visual studio, what to package of visual studio install and what language to use, it would be better if it is Visual basic ?
At last, is it possible to place control (i.e. button) inside the webpage to activate my code, if so, which one is capable of doing it, add-on or plugin ? workflow in nutshell to achieve that...
Thanks a lot
First, a few things to understand:
A browser plugin is something that is instantiated in one of two ways:
Injected into the DOM in an object or embed tag
Instantiated by the browser to open a page with a specific mimetype
Browser plugins don't know anything about the browser, the URL bar, the bookmarks, the context menus, browser dialogs, browser chrome, browser events, etc. Browser plugins only know anything about the current page. Browser plugins cannot change browser settings
Browser plugins are DLLs; they can't easily be written in Visual Basic. While it might be possible, I've never seen one, and you'd have to learn a lot about NPAPI plugins before you could do that. You'd also probably have to write one for IE, one for IE, etc.
In other words, what you need is not a plugin. Firebreath is not going to help you much, if at all. Some extensions (also called add-ons) use a npapi plugin to provide functionality that they cannot do on their own. For more information see http://npapi.com/extensions
With that information, I recommend you think about it and create a new, more specific question for what you need to know next. I don't know extensions, I do plugins. Actually, once you break down what you need to do into some smaller questions you'll probably find others who have ask most of them and you can find the answers with simple searches. Your main problem is that you don't yet understand the technologies you need to use. Hopefully this has helped.

In the Eclipse HTML editor, is there an easy way to have custom tags available in content assist (autocomplete)?

I'm learning to use a new hosted e-commerce system at work which uses a proprietary markup/scripting language for its page templates. They are similar to JSP pages (although the server tags don't have a prefix, i.e. there is no "xsp:") and use ${expressions} similar to Expression Language. We are transitioning from a .Net system, so all of my fellow devs are very used to having thorough IntelliSense available in our editors.
So, my question is whether it is possible to make these custom tags available in content assist, and whether it is worth the hassle if there is any. (I'm aware the latter is subjective - I'm a reasonable guy and open to opinions.)
FYI, I'm more concerned with auto-completion of tags, but expressions would be great as well depending on how much work is involved. We are using eclipse for Java EE, Juno (core IDE v4.2.1) with WTP... Sorry I'm not really sure how or what to share as far as versions and components go! Let me know if any additional info would help.
Thanks in advance.
A decidedly non-hassle-free answer would be to create an Eclipse plug-in to support your proprietary template language. One place to start might be Veloeclipse, a HTML/XML/JSP/Velocity Editor for Eclipse, which claims to have the following features which you may find interesting:
Smart indentation of velocity directives (on pressing return or when using tabs)
Code folding
Code Formatting
Smart indentation of html tags (on pressing return or when using tabs)
Syntax highlighting for both html and velocity
Autocompletion and Content assist for tags, directives and references (Ctrl + space in html attribute values or when opening or closing tags)
Sources here: http://code.google.com/p/veloeclipse/source/checkout

Customizing UI elements in Eclipse default Java Editor via plugin

I'm trying to develop a plugin for Eclipse that will allow me to modify various elements within the default java text editor. I've found lots of tutorials for creating my own text editor for a different language, but nothing for editing the default java editor. Specifically, I want to be able to run a command and highlight certain areas of the code based on a different program. How do I develop this?
Thanks
You will need to implement your own type of markers and maybe associate annotations with them. Then you can associate the java editor with the annotations to show them. Your application will generate the markers.
Specifically you might want to start to read about org.eclipse.core.resources.marker extension point and IResource.createMarker() to create the markers.
Its doable. You need to find the right extension point that allows you to add functionality to the java editor.
See IBM tutorial. The example with the heading "How do you analyze Java code to apply modifications" seems to be what you want to do.