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.
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);
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);
}
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'm trying to create a simple time picker directive. http://plnkr.co/edit/VYGqhPbHf1yqXLpemGEP
When user click on input field I want to display the content of my template html as a dropdown below the input (will take care of css later) so that user can select a time from the list. I'm not sure how to get hold of the template (something like angular.element(template).show())
Thanks!
Edit: I managed to come up with this: http://plnkr.co/edit/zAplNKVfohXLbIzwjhy4?p=preview
Everything works except when I click any of the list, it does not set the correct model value.
Try the following:
Embed the the HTML for the date picker list
Hide the list from the html
If the input gets focus change the visibility.
Pseudo code:
HTML:
<ul ng-show="listVisible">
<li> .... </li>
</ul>
JavaScript
scope.listVisible = false;
element.$on('focus', function() {
scope.listVisible = true;
});
Do something similar in reverse.
I managed to get it working. I had to create a new scope for the dropdown element. http://plnkr.co/edit/zAplNKVfohXLbIzwjhy4?p=preview