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?
Related
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.
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'm trying to use Highcharts with my web application, which is written in React. Highcharts is rendered via a div tag.
I'm rendering everything on my page (i.e. the panels, input fields, buttons, tables, dropdowns, etc) from my JSX file.
When I try to stick a div tag into my JSX with an id or class to link it to the Highcharts JavaScript, I get an error message in my console (Highcharts error #13) that the rendering div is not found.
render() {
return ( <div>
<div id="container"></div>
</div>
);
}
}
However, when I stick a div tag into my HTML with an id or class linking it to my Highcharts JavaScript, I can get the chart to show up on the page, but I want it inside my JSX so I can place it inside the panels, containers, etc I have in my JSX.
To answer my own question here, the problem was that the render function is called after highcharts attempts to look for the div. You can either put the chart rendering code in the componentDidMount() section, put a timer on it, or render the highcharts code directly using dangerouslySetInnerHTML.
I'm programming interactive html editor using Ace editor
and Vue Js. Code from Ace editor is automatically rendered as html preview using Vue. Now i would like to add interactions, such as click on rendered element should highlight exact line of code in Ace, where the code of selected element begins.
It would be easiest to handle if each rendred element would have attribute like data-ace-line="47" or data-uid="B7a91Nmd", then i would store lines coresponding to each uniqueID somewhere.
I'm taking a looking at bootstrap tags found here: http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/
I'd like to be able to hook into the HTML that's being rendered to add additional anchors/links to the tags being generated. There is an event named: beforeItemAdd() that allows you to see the item before it's added, but you can't necessarily interact with it other than prevent it from being rendered.
Is there a way to customize the HTML output here so I can add additional links besides the 'x' to my tag? Just applying a CSS class won't work, I need to be able to modify the actual markup being rendered so I can add content to the tags.
Alternatively, I'm open to a solution with tagging that allows for the customizing of tag HTML rendering.
Without digging really deep into the plugin source ( I've never used this plugin), or figuring out what data is stored, one way would be to use this in the event callback to traverse to the main container the plugin wraps everything in and then find the tag elements.
Add a class each time and then you know what you have already modified and the one without that class would be your new one
$('input').on('itemAdded', function(event) {
var $cont = $(this).siblings('.bootstrap-tagsinput'),
$tag = $cont.find('.tag').not('.modified').addClass('modified');
$tag.doSomeStuff();
});