I am using a text area and i want to display html content inside it. User can make changes to content and save it also. But i am not able to achieve it.
<textarea class="msgbox"
name='testimonailNew'
ng-model='testimonial'
required></textarea>
testimonial has escaped data like
<b>hello prad"s</b>
I want to show user proper text like
hello prad"s
and then allow him to change it also. I already have function to unescape the string.
var escapestring = function(data)
{
var decoded = angular.element('<p>').html(data).text();
return $sce.trustAsHtml(decoded);
}
Related
I have React frontend and strapi backend.
When inserting data into my strapi backend, the resulting output in my frontend contains html elements.
How can I show the output without the HTML elements? I have the following Gatsby code block,
import ReactMarkdown from "react-markdown"
<ReactMarkdown children={info_} />
The data within {info_} is outputted with the HTML elements, how can I use Dangerously Set innerHTML in my code or is there some other way to achieve this?
If you display an html node within the dangerouslySetInnerHTML property, you put your application at risk for XSS attacks. Long story short, the html could contain malicious code that would harm the user. If you do it, you need to sanitize the content before displaying it. The best option would be to use a battle-tested library such as sanitize-html-react.
You can use DOMParser to create a document from your HTML input and then extract the text like this:
new DOMParser().parseFromString(info_, 'text/html').body.textContent;
Here's an example using a functional form:
I tried putting this into a snippet demo, but the Stack Overflow snippet environment doesn't like something about the syntax. 🤷 ☹️ You can copy and paste it in your JS console to try it.
Note that the embedded script never runs, but its source text is included in the output. If you want just part of the created document's text, you can use a method like Document.querySelector on the created document rather than its body.
function getTextFromHtml (html) {
const doc = new DOMParser().parseFromString(html, 'text/html');
return doc.body.textContent ?? '';
}
// Use:
// assuming `info_` is a string of valid HTML like this:
const info_ = `
<div>
<p>Some text</p>
<p>Some more text</p>
<script>console.log('This script executed!')</script>
</div>
`;
const textContent = getTextFromHtml(info_);
console.log(textContent);
Afterward, you'll have plain text, so you won't need dangerouslySetInnerHTML.
How to make the quill editor field required? The editor gets rendered into a div, but it isn't clear if there is a way to make the field/editor required when the form submits.
As you wrote, Quill works with a div and not with a form element so it can't help you with form validation.
You'll need to check manually if the editor's content is empty, prevent the user from submitting the form and show a message that this field is required.
You can copy quill contents to a hidden input element before submitting the form as shown in this example.
A custom form control is also a good way to go. You can try to workaround with Quill's event handler and getting the value of the form.
Then a custom form validator is also possible.
Check : https://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html
I've been trying to work around exactly this problem too today, using Python for back-end and a hidden form-field (name='editor') to get the value from the quill container to the back-end. Ended up with not actually really a validator but working about the same:
if request.form['editor'] == '\"<p><br></p>\"':
flash("You cannot send in empty posts!")
return redirect(CURRENT PAGE)
else:
CODE EXECUTED IF EDITOR IS NOT EMPTY
Not sure what you're doing with the input on the editor or whether you're even using Python for backend but I hope this helps. "<p><br></p>" is what the console told me the standard input on empty submission was when getting the information out of the editor.
Good luck!
const yourText = '<div><br></div>';
const htmlTagsToRemove = ['<div>', '</div>', '<br>'];
function removeHtmlTags(data) {
let text = data;
htmlTagsToRemove.forEach(it => {
text = text.replace(it, '');
});
return text;
}
const newText = removeHtmlTags(yourText);
console.log(newText);
If I try to use both ng-sanitize's linky filter with ng-bind-html directive, it will transform initial string
Well, <b>this is bold</b>, but this should become link http://www.example.com Lets test it!
to one having link transformed to html link, but not having bold text - it will be outputed as text having tags in it.
Here's [DEMO]
My question is how do I get in result both bold text and normal html link if initialy I have just as string having some text surrounded by tags and text that looks like a link??
Plunkr Demo
You could write a custom filter to do the work of linky and put the tags back in... (this probably isn't super robust and I'm not the best at regexes, but if it works for everything you need it to, then it gets the job done.)
module.filter('linkyWithHtml', function($filter) {
return function(value) {
var linked = $filter('linky')(value);
var replaced = linked.replace(/\>/g, '>').replace(/\</g, '<');
return replaced;
};
});
Usage:
<div ng-bind-html="expr | linkyWithHtml"></div>
I am using the Aloha editor on my website. I have been able to use it successfully and users can create HTML and save it to my database. However I am having problems in pre-loading HTML content into the editor so that users can edit existing HTML.
Here is the Javascript that initialises the editor:
<script type="text/javascript">
Aloha.ready(function () {
Aloha.jQuery('#richTextEditor').aloha();
Aloha.bind('aloha-smart-content-changed', function (event, editable) {
$(".hiddenTextArea").val(Aloha.getActiveEditable().getContents());
$("#btnSave").click();
});
var obj = "";
Aloha.activeEditable().setContents($(".hiddenTextArea").val(), obj);
});
</script>
I have tried to use Aloha.activeEditable().setContents() as I saw this mentioned on another site but I get an error in my browsers saying
Error: TypeError: Aloha.activeEditable is not a function
Aloha!
It's
/**
* Set the contents of this editable as a HTML string
* #param content as html
* #param return as object or html string
* #return contents of the editable
*/
Aloha.activeEditable.setContents('your html string', true);
not
Aloha.activeEditable().setContents();
Have you seen this example: http://aloha-editor.org/howto-store-data-with-aloha-editor-ajax.php
You don't need to write the content to a textarea. You could also submit it directly via AJAX or just .aloha() the textarea directly if you need the content with other values in a form (attention when using a textarea: if the html id of the textarea is "xy" then the id for the editable within Aloha Editor will be "xy-aloha")
Do you really want the send the form on each 'aloha-smart-content-changed' event? Maybe use 'aloha-editable-deactivated'? 'aloha-smart-content-changed' will not be fired when eg something is formatted bold...
Rene's answer is correct but I discovered there is a second way to pre-fill the Aloha editor with data. You can simply add text to the HTML element that you target the Aloha editor to (in my case #richTextEditor) and then call Aloha.bind() afterwards.
Just a quick question..
I am trying to generate an text input where the default value is nested in tag with an inline css..just to make it look smaller and grayer than the normal input.
echo $this->Form->input( 'address', array('div'=>false, 'label'=>'', 'default'=>'<span style="font-size: 0.6em;color:#e3e3e3;">put your address here</span>', 'size'=>'50' ) );
after the user would click, the default value would be erased leaving it blank.
However cakephp generates the input with the value containing the html tags, i.e. .
How do I make cakephp unfilter the html in the default value?
I forgot what option to use in this situation and I tried everything that I can think of. I remember that I can do this by just adding some sort of value in the option array like 'html'=>false.
Put your helper text in your labels. If you put the default value as a HTML string the Input will display the HTML as it does not render HTML inside of it.
If you add the additional HTML to your label, you could use this http://trevordavis.net/blog/jquery-inline-form-labels to overlay the labels over the inputs.
echo $this->Form->input( 'address', array('div'=>false, 'label'=>'put your address here','size'=>'50' ) );
Also, this method allows you to apply the css externally instead of inline -- which is always best.
I am not aware of any way to get an input box to render html inside itself. There is also nothing in the API to suggest what you want. It is possible to embed it within a div, and to include things before, after, and between the label and input. I think you need to use javascript to accomplish what you want to do.
<style>
.default {font-size: 0.6em;color:#e3e3e3;}
.normal {color:black;}
</style>
<script language='javascript'>
function change(input)
{
input.classList.add("normal");
if (input.value == "enter text here")
input.value = "";
}
</script>
<form>
<input id='test' class='default' type='text' value='enter text here' onfocus='change(this);'>
</form>