1

How to convert the html string into formatted string using classic text editor here I used the Html.Raw() method but it is not working:

How to convert the html string into formatted string using classic text editor here I used the Html.Raw() method but it is not working.

<textarea id="@areaId"  class="areacls" data-href="@item.Id" onclick="createEditor(@areaId)"  name="hoverC" style="background-color: rgb(221, 226, 237); width: 100%; overflow: hidden; border: none; box-shadow: none; text-overflow: ellipsis; " rows="3">@item.Description</textarea>

<script>
const editors = new Map();

 function createEditor( elementToReplace ) {
          //debugger;
        return ClassicEditor
        .create( elementToReplace )
        .then( editor => {
            editors.set( elementToReplace, editor );
                   
        })
        .catch( err => console.error( err.stack ) );
      }
</script>

The string in the image card is coming from the database with Html elements. I want to convert it into applied HTML string.Like in the given snip:
The string in the image card is coming from the database with Html elements. I want to convert it into applied HTML string.Like in the given snip

Markus Meyer
  • 3,327
  • 10
  • 22
  • 35
Ruman Ali
  • 11
  • 2
  • I have updated my answer, pls check it whether help you. – Jason Pan Mar 01 '23 at 08:28
  • @JasonPan Regex.Replace converts the html string into plain string. and I want it in formatted text like the html element i have applied on it. even the letters are bold, italic etc. I want when i click on the editor then the tools will be enable.Before that only text will see in the editor area. – Ruman Ali Mar 01 '23 at 08:53
  • Does my answer useful to you ? – Jason Pan Mar 17 '23 at 08:42
  • @JasonPan Yaa It helped me alot. – Ruman Ali Mar 26 '23 at 01:54

1 Answers1

0

UPDATE

I found the reason, we can't render string with html tags inside the textarea. And I found the good solution for you, we can use

<div contenteditable="true"></div>

enter image description here

For more details. please check this link:

Rendering HTML inside textarea

enter image description here

@using System.Net;
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@using System.Text.RegularExpressions;

@{
    ViewData["Title"] = "75599709 Page";
    string description = @"<i><strong>Virtual</strong></i>World ABC friend<strong>hii hello</strong>abc jitesh education<strong>hello all</strong>";
}
<script src="https://cdn.ckeditor.com/ckeditor5/29.2.0/classic/ckeditor.js"></script>

<textarea id="editor1" class="areacls" data-href="item1" onclick="createEditor('editor1')" name="hoverC" style="background-color: rgb(221, 226, 237); width: 100%; overflow: hidden; border: none; box-shadow: none; text-overflow: ellipsis; " rows="3">@Regex.Replace(description, "<.*?>", String.Empty)</textarea>

@section Scripts {
    @{

        await Html.RenderPartialAsync("_ValidationScriptsPartial");
        <script>
            const editors = new Map();

            function createEditor(elementToReplace) {
                //debugger;
                return ClassicEditor
                    .create(document.querySelector('#' + elementToReplace))
                    .then(editor => {
                        editors.set(elementToReplace, editor);

                    })
                    .catch(err => console.error(err.stack));
            }

        </script>

    }
    }

Change your function createEditor like below:

        function createEditor(elementToReplace) {
            //debugger;
            return ClassicEditor
                .create(document.querySelector('#' + elementToReplace))
                .then(editor => {
                    editors.set(elementToReplace, editor);

                })
                .catch(err => console.error(err.stack));
        }

Then the issue will be fixed.

Optional

I don't think this issue related to Html.Raw, you can find my code works well. If you still think related to Html.Raw. You can try below code in your .cshtml

@Html.Raw(@WebUtility.HtmlDecode(ViewBag.result))

Test Code And Result

1. Test Page source code

@using System.Net;
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    ViewData["Title"] = "75599709 Page";
    string description = @"<i><strong>Virtual</strong></i>World ABC friend<strong>hii hello</strong>abc jitesh education<strong>hello all</strong>";
}
<script src="https://cdn.ckeditor.com/ckeditor5/29.2.0/classic/ckeditor.js"></script>

<textarea id="editor1" class="areacls" data-href="item1" onclick="createEditor('editor1')" name="hoverC" style="background-color: rgb(221, 226, 237); width: 100%; overflow: hidden; border: none; box-shadow: none; text-overflow: ellipsis; " rows="3">@description</textarea>

@section Scripts {
    @{

        await Html.RenderPartialAsync("_ValidationScriptsPartial");
        <script>
            const editors = new Map();

            function createEditor(elementToReplace) {
                //debugger;
                return ClassicEditor
                    .create(document.querySelector('#' + elementToReplace))
                    .then(editor => {
                        editors.set(elementToReplace, editor);

                    })
                    .catch(err => console.error(err.stack));
            }

            
        </script>

    }
    }

2. Test Result

enter image description here

Jason Pan
  • 15,263
  • 1
  • 14
  • 29
  • The text with Html elements you see initially after run the code i.e Virtual World ABC friend hii hello abc jitesh education hello all. I want to remove that html tags from here before editor enable. My code also works upto this. thanks for your opinion. – Ruman Ali Mar 01 '23 at 08:10
  • @RumanAli Can you tell me what you need? What else can I do for you? – Jason Pan Mar 01 '23 at 08:13
  • Hi @RumanAli, I am using `@Regex.Replace(description, "<.*?>", String.Empty)` and it works fine. – Jason Pan Mar 01 '23 at 08:28
  • Hi @RumanAli, I figure out the reason why it not works, and I have update my answer with the best solution. – Jason Pan Mar 01 '23 at 10:10