I am trying to have multi-coloured textarea on my page.
So basically I am planing have one textarea input and one <p>
object. When user type in textarea, the <p>
will be updated with jQuery, as soon as user type any letters in textarea.
Similar to Stackoverflow.
When the user finishes typing, he will select a text from the textarea and click the red or blue button. The system will read the selected text, find the index of starting text and append
<span> style='color:red;'>
at the end of the text add
</span>
To be honest, I am not sure this is the best way to do it. I have seen lots of RichText editor but they don't have any save button.
Anyway. So far what I did:
<div class="row">
<a href="#" name="BtnRed" id="BtnRed" class="btn btn-danger">Red</a>
<a href="#" name="BtnBlue" id="BtnBlue" class="btn btn-primary">Blue</a>
<form asp-action="Save" method="post">
<textarea rows="10" style="width:100%" id="DetailText" name="DetailText">
This email and any files whom this email is addressed. <span> style='color:red;'>This suppose to be red</span>
Any unauthorised use, retention, distribution, copying or disclosure is strictly prohibited.
If you have received this email in error)
</textarea>
</form>
<hr />
@Html.Raw("<p id='viewText'></ p >");
<script src="~/lib/jquery/dist/jquery.js"></script>
<script>
$(document).ready(function () {
$("#viewText").text($("#DetailText").val());
$("#DetailText").on('input',function () {
$("#viewText").text( $("#DetailText").val());
});
});
ISSUE Html.Raw() doesn't complie the text and shows HTML code instead. style='color:red;'>This suppose to be red