I am new to using the trix editor in AngularJS. I have the editor in place and it is working correctly. But I am not sure how to then display the content correctly. I save the output of the trix editor but when I display it, its a string of html.
HTML:
<trix-editor class="trix-content" ng-model="trix" angular-trix placeholder="Write something.."></trix-editor>
but when I try to display it somewhere else with this:
HTML:
<div class="trix-content">{{trix}}</div>
it just puts the raw string with html tags in it and is not showing just the text formatted.
ex)
<div> hello </div>
when I wanted
hello
Angular has a directve for binding to rich text. Ex) <div ng-bind-html='trix'></div>
Related
I'm trying add a markdown editor to my nodejs express code and display the content of it in another page. I'm pretty new to this and can't figure out what I'm missing. I'm using EJS as my view engine. I have already added the simpleMDN WYSIWYG editor as below,
<label for="text">Description: </label>
<textarea id="file-input" type="text" name="description"></textarea>
<script>
var simplemde = new SimpleMDE({ element: document.getElementById("file-input") });
</script>
But when I try to display it in another page I can't get it done as I want. Below code is what i tried.
<script id="file-input">
simplemde.value()
</script>
<%= releasenote.description %>
By using this code this is the result i got. result is not displayed by the script tag. 'releasenote.description' shows this output.
# hello world ## hello world ### hello world * hello world hello world
I want it to display without # and *. and they should be displayed as headers, bold, list, etc.
This is something I'm struggling a bit. I have this textarea which can display text with HTML tags. I'm using Angular 10 and angular-material/#latest.
Here's the textarea that displays the HTML document.
<mat-form-field *ngIf="editStatement">
<textarea matInput [innerHTML]="statement.statement_description_html"></textarea>
</mat-form-field>
The form looks like this:
What I want is to not display the HTML tags but interpret it and show texts only in the textarea. Is that possible? Some in other SO posts suggests to do
<textarea [innerHTML]="getInnerHTML(name)" cols="" rows=""></textarea>
and in .ts file
getInnerHTML(val){
return val.replace(/(<([^>]+)>)/ig,'');
}
The problem with this approach is that it removes all the tags. I want to retain the tags but provide a way to edit the text - somewhat like some of the CMS systems like Wordpress, Wix etc.
Can I do this using Angular?
Maybe you are looking for a "WYSIWYG" HTML Editor (like TinyMCE) that you can embed into your page.
I am using TinyMCE in my HTML Textarea to format content and then save them in MySQL Database. All is working fine. But when I try to get the saved content from database in other page it is showing with all the HTML tags and CSS attributes. What I need is to show the content with same formatting as it was saved.
I am using following code to initilize the TinyMCE in my form.blade.php file.
<script>
tinymce.init({
selector: '#requestDescribe'
});
</script>
Below is the text area where I am using TinyMCE.
<textarea required name="requestDescribe" id="requestDescribe"
cols="30" rows="5" maxlength="600" class="form-control"
value="{{old('requestDescribe')}}">
After saving such type of content is being saved in database.
<p><strong>dfg <span style="text-decoration: underline;">fkjg gkjdfhgkfg </span> <em>gdfgf</em></strong></p>
When I get data in some other page it shows with all the html and css code like this:
I have used PHP stray_tags but it didnt work. Mybe because the code has both html and css. Please Help. TIA
Ok I have found the answer. If you are using PHP (Which is the case with me) so just use echo. :)
I am using summernote text editor. I want to get html formatted of text edited in editor. In summernote editor toolbar having a code view button. when click on the button we can see the html code of edited text. Now, I want html code to get as string or stored in variable. How it possible?
Please help me.
reference : github code is https://github.com/summernote/summernote
Add the below lines to index.html
<div class="container">
<div id="summernote" class="summernote"><p>Hello World</p></div>
<input type="submit" value="submit" onclick="myFunction()"/>
<script>
function myFunction() {
var MyDiv2 = document.getElementsByClassName('note-editable');
m = MyDiv2[0];
alert(m.innerHTML);
}
</script>
You have method summernote with argument 'code' for this.
Example:
<div class="summernote"></div>
<script>
$('.summernote').summernote();
</script>
Then Type something in field created from div and type in console:
$('.summernote').summernote('code')
You should see the same result as in example in #john answer
My code returns HTML data from ASP.NET as a response from an action method.
I am displaying this in a <textarea> element.
<textarea style="width: 85rem; height: 15rem;"
ng-disabled=true
ng-model="access.response"></textarea>
However when it displays I see the actual HTML.
How can I make it so the information displayed in the textbox or some other way is the same as in my browser window? Note that I do not want to edit the data but I would like the scrollbar type feature.
Is correct to say that you cannot display it in a textarea, but you can't use a simple div neither to display the parsed HTML.
Take a look at this Plunkr --> http://plnkr.co/edit/ld4Nte2KKIbgMkIWnRcP
You have to make use of the $sce service and the ng-bind-html directive, like this:
<div ng-controller="SimpleCtrl">
<!-- This will be parsed as HTML-->
<div ng-bind-html="to_trusted(someCode)"></div>
<!-- This will not -->
<div>{{someCode}}</div>
</div>
No way to do it with textarea.
If you want editable HTML content, consider this:
<div contenteditable="true"></div>