I am trying to figure out how to allow users to fill out their "About" field in their profile for the website I am making. The biggest drawback is that I want to allow users to be able to format their text like you can format it when you go to post on a forum, or the way Silverstripe users can format it when you go to admin panel.
I have tried making use of the HTML field that is in silverstripe. When I added the box it gave you this really bext text box that accepts anything, html, javscript, etc...
This was nice and dandy up to the point that I realized two twings. With the HTML field, there doesn't come any form of editor that users can use. They can't bold, change fonts, sizes, etc... The other problem is the fact that I entered some javascript in there and clicked save. Next time I open the page I was greeted with my javascript alerts I entered in the HTML field.
So here are my two questions:
How can I give the user an editor (of any kind) that will allow them to shape their about section.
How can I validate fields that allow you to do what I am asking in the first question? I am quite new to validating such inputs and I have been searching for quite some times with little to no answers.
EDIT:
I forgot to include that I did find this guide: https://docs.silverstripe.org/en/3.1/developer_guides/forms/field_types/htmleditorfield/
From what I did see here is how to include this on the back end (Admin Console) I can't though figure out how to include this on lets say AboutMe page. So www.mywebsite.com/AboutMe/edit/1
EDIT2:
Further research has led me a solution that allows me to showup the TinyMCE editor on my page. The document I listed above did not say that the init function was missing and I need to add it to the page in order to get the editor to work. Here is what was missing:
<script type="text/javascript">
tinyMCE.init({
theme : "advanced",
mode: "textareas",
theme_advanced_toolbar_location : "top",
theme_advanced_buttons1 : "bold,italic,underline,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,outdent,indent,separator,undo,redo",
theme_advanced_buttons2 : "forecolor",
theme_advanced_buttons3 : "",
height:"250px",
width:"400px"
});
</script>
My second question though still stands. How do I validate all the text that comes in here? The TinyMCE will do some validation for me via javascript but we can always find a way around that. What kind of back-end (php) validation would I do to ensure that the text entered is safe?
The only thing that I can think of is create a white list of every combination of characters allowed, but that just seems a little too wrong.