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. :)
Related
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.
Two text editors are appearing on the page, the basic one and the more updated version. I don't know what I'm doing wrong. Can anybody help?
<script src="../../assets/js/ckeditor5/ckeditor.js"></script>
<script>
ClassicEditor.create(document.getElementById('body'));
</script>
<div>
<label>Body</label>
<textarea name="body" id="body"><?php echo $body ?></textarea>
</div>
The second text editor (the updated version) isn't saving the content I put into it, only the top editor sends through the data to my database. Proper confused, apologies if it's a simple fix, head is mashed.
Cheers!
I want to add dynamic content in ckeditor I have also used CKEDITOR.instances or some another thinks which I get from Stack Overflow but I can't get output.
<script type="text/javascript" src="<?php echo base_url();?>js/ckeditor/ckeditor.js"></script>
<textarea class="ckeditor form-control" name="Content" id="emailcontent" >
<?php echo $valuedata[0]['email']; ?>
</textarea>
i am using ck-editor java script and text area.
You can do this in jquery by assigning value to editor like
CKEDITOR.instances['emailcontent'].setData(data)
Here you can populate data. Find below detail here
How to add extra data to the ckeditor using jquery?
If you want to replace the entire editor content, use setData(), for example:
CKEDITOR.instances[Name].setData(Data)
If you want append data into the editor window, you can use insertHtml() and insertText() methods
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>
I am using ckeditor version 3.6.4 in my MVC3 Application.
1) I have included both js in my application
<script src="../../Scripts/ckeditor/ckeditor.js" type="text/javascript"></script>
<script src="../../Scripts/ckeditor/adapters/jquery.js" type="text/javascript"></script>
2) Below code is my textarea and i am binding viewdata to textarea.
<textarea id="txtAreaBody" name="txtAreaBody" rows="15" cols="220"><%= ViewData["Body"]%> </textarea>
3) To call ckeditor , i have written below code.
<script type="text/javascript"> $("#txtAreaBody").ckeditor(); </script>
That's it.
and i have html content in my Viewdata.
As you can see from below screenshot, when i am running my application , my textarea is blank. and i am not able to see my content.
Can anyone please help me ..?
You do not say whether your textarea is in a partial view or full full, if its in a partial view, Viewdata will not work, you would have to use #tempdata, if in full view, try removing ckeditor() and see if textarea is populated with any data.
Hope it helps or points you in the right direction
Yep, another cause of this is if you use #Html.TextBoxFor() instead of #Html.TextAreaFor() then CKEditor will not pick it up, and you will see an empty WYSIWYG Editor with no text, despite the data being passed through the model.