首页 > 解决方案 > Asp-net 3.1 如何使用summernote(或任何其他富文本编辑器)编辑字段

问题描述

我的数据库中有一些字段包含生成 html 的字符串,即“<p'>Hello world</p'>”。我正在尝试将这些内容带到 Summernote 富文本编辑器中,以便可以从那里对其进行编辑。我试过了

<html>
    <head>
        
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
            crossorigin="anonymous"></script>
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js" defer></script>
           <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
         <script defer src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>
    </head>
    <body>
        <div class="form-group row">
            <label asp-for="MainText" class="col-sm-2 col-form-label text-right"></label>
            <div class="col-sm-10">
                <div asp-for="MainText" id="summernote"></div>
                <span asp-validation-for="MainText" class="text-danger"></span>
            </div>
        </div>
       <script>
          $(document).ready(function () {
               $('#summernote').summernote();
           });
       </script>
    </body>
</html>

那是行不通的。有人对我如何解决这个问题有任何建议吗?

标签: javascriptc#asp.netasp.net-mvc

解决方案


好的!更新,因为我是个笨蛋。我阅读的文档说我需要使用 div 来放置 Summernote id 属性,但事实证明您也可以使用文本区域,如下所示。现在工作正常。

<html>
    <head>
        
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
            crossorigin="anonymous"></script>
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js" defer></script>
           <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
         <script defer src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>
    </head>
    <body>
        <div class="form-group row">
            <label asp-for="MainText" class="col-sm-2 col-form-label text-right"></label>
            <div class="col-sm-10">
                <textarea asp-for="MainText" id="summernote"></textarea>
                <span asp-validation-for="MainText" class="text-danger"></span>
            </div>
        </div>
       <script>
          $(document).ready(function () {
               $('#summernote').summernote();
           });
       </script>
    </body>
</html>

推荐阅读