如何将HTML字符串集成到经典编辑器中,以格式化字符串的形式显示?

iswrvxsc  于 2023-03-06  发布在  其他
关注(0)|答案(1)|浏览(133)

如何使用经典文本编辑器将html字符串转换为格式化字符串这里我使用了Html.raw()方法,但它不起作用:

<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>

图片卡中的字符串来自数据库中的Html元素。我想把它转换成应用HTML字符串。就像在给定的片段:

w51jfk4q

w51jfk4q1#

更新

我找到了原因,我们不能在文本区域中渲染带有html标签的字符串。我找到了一个很好的解决方案,我们可以使用

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

更多详情,请点击此链接:
∮ ∮ ∮ ∮

@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>

    }
    }

如下所示更改函数createEditor

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

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

然后问题将得到解决。

    • 可选**

我不认为这个问题与Html.raw有关,你可以发现我的代码工作得很好。如果你仍然认为与Html.raw有关。你可以在你的. cshtml中尝试下面的代码

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

测试代码和结果

  • 1.测试页源代码 *
@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.测试结果 *

相关问题