I want to inject the Monaco editor html code through javascript. However, the create function for the editor always asks for the container div.
monaco.editor.create(document.getElementById('container-div'),{options})
Is there an option to create the instance without providing the wrapper and storing it in a variable so that I can use it or inject it via javascript later on?
Not sure what the problem is. Just create a new HTML element as container and use that for injection.
Related
Overview
In the Blazor WebAssembly App, I would like to embed a Razor component in a div element newly added on the JavaScript side. Please let me know if there is a better way.
What I want to do
Prepare components such as Sample.razor in advance
Call JavaScript functions in response to button clicks on the initial page
Add div element by createElement in the called JavaScript function
Embed the Sample.razor component within the div element added above
What I tried
Use innerHTML for the div element added in 3. above, and include a call tag for the Razor component.(<Sample></Sample>)
-> Nothing is shown.
Add elements such as iframe/object/embed in innerHTML and include the path to the razor component. (src='/sample')
-> Not Found. (Because this is a WebAssembly app, component pages are not rendered if we request to a server.)
Environment
Visual Studio 2019
.NET 5
Project creation from Visual Studio using Blazor WebAssembly template
If you have prepared the Simple.Razor component in advance, one way you can achieve this is assign this component under if condition as follows,
#If(visible==true){<div><simple></simple></div>}
and on press of a button change visible variable in a function followed by,
StateHasChanged()
and it will do what you want this way you dont have to do JSInjection.
I am using ace editor with ng2-ace-editor in angular 7. I am trying to make an editor for some specific syntax. I want to recognize certain pattern before add content dynamically inside the Editor and replace with some kind of HTML. I want to display that HTML as rendered part, not as code. Currently when I add the content inside the ace is rendered as code.
I want to show as:
I am using #ViewChild to get the editor on my component
export class ViewAceEditorComponent {
#ViewChild('editor') aceComponent: AceEditorComponent;
Then, I use setTxt() method to assign the code to the editor dynamically.
this.aceComponent.setText(this.myTextWithHtmlCode);
Any ideas on how to render the HTML instead of the code?
I have tried CodeMirror for creating a simple code editor with syntax highlighting using simple javascript and html, but the problem is that in my project I have multiple html Tabs, and on for each tab I need a CodeMirror instance.
I don't have any problems creating multiple instances, the problem is that I have only one button that when is clicked needs to read the content of the CodeMirror instance that is in the current Tab and send its content to an Http service, so I can’t find the best way to find the correct CodeMirror instance when the button is clicked.
So I what recommendations could you give me ? or is a better idea to try with other libraries like Ace or Prism for code highlighting?. Thanks.
I have tried using localStorage to save instances of CodeMirror but it retrieves me an error of Converting circular structure to JSON.
Currently i'm trying to customize Ngx-Editor to add feature like Table in the editor.
the editor is base on textarea and i create table using document.createElement() and insert into textarea using document.execCommand('insertHTML').
but the problem is i want a popover on the table if click and right-click feature so that a popup can be raise to edit the existing table.
but using any interpolation or directive in table does not work.
like {{somecontent}} is printed as it is.
so is there any way to create Table with popover and context-menu outside angular context.
i'm using Angular 4.
It doesn't work because you're adding code to your application post-build.
Ask yourslef : is {{ someContent }} valid vanillaJS code ? If you write this in a Javascript file, will it work ?
No. Because this is an Angular syntax, and it's read by the compiler to be translated into vanillaJS.
Furthermore, you should not manipulate the DOM yourself when using Angular. The framework is supposed to handle that for you.
If you want a custom component, you have to create one from scratch (or fork an existing one). You can't extend a component on the fly.
I have a website using CKEditor. Now I want to customize the toolbar "live" during runtime, without having to create a new instance of the editor.
Is there a way to do that?
I have got solution.I am using ckeditor.replace and it works now.
I am destroy the existing instance and then try to use replace.Actually replace will create a new instance.