话多说直接看效果:
 
<!-- 动态创建的一个富文本,请注意本人是为了方便所以把js放在了这里,使用者可以结合自身需求修改 -->
 <div class="form-group">
     <!-- 这里博主使用临时路径,需要自行修改 -->
     <script src="http://cdn.staticfile.org/jquery/1.11.3/jquery.min.js"></script>
     <!-- 创建一个按钮,点击后会动态添加富文本编辑器 -->
     <label class="control-label col-xs-12 col-sm-2" id="dynamicCreateEditorBtn">创建富文本</label>
     <!-- 容器,用于存放动态生成的 Summernote 编辑器 -->
     <div id="dynamicCreateEditor" class="col-xs-12 col-sm-8"></div>
     <script>
         $(document).ready(function () {
             // 监听点击按钮事件
             $('#dynamicCreateEditorBtn').click(function () {
                 // 动态创建一个textarea,并将其插入到#editor-container中
                 const textarea = $(`<textarea textarea id="dynamicSummernote" name="row[dynamicEditor]" class="form-control editor" rows="10" ></textarea >`);
                 // 将textarea添加到容器中
                 $('#dynamicCreateEditor').append(textarea);
                 // 初始化 Summernote 编辑器
                 textarea.summernote({
                     height: 300,
                     lang: 'zh-CN',
                     fontNames: [
                         'Arial', 'Arial Black', 'Serif', 'Sans', 'Courier',
                         'Courier New', 'Comic Sans MS', 'Helvetica', 'Impact', 'Lucida Grande',
                         "Open Sans", "Hiragino Sans GB", "Microsoft YaHei",
                         '微软雅黑', '宋体', '黑体', '仿宋', '楷体', '幼圆',
                     ],
                     fontNamesIgnoreCheck: [
                         "Open Sans", "Microsoft YaHei",
                         '微软雅黑', '宋体', '黑体', '仿宋', '楷体', '幼圆'
                     ],
                     toolbar: [
                         ['style', ['style', 'undo', 'redo']],
                         ['font', ['bold', 'underline', 'strikethrough', 'clear']],
                         ['fontname', ['color', 'fontname', 'fontsize']],
                         ['para', ['ul', 'ol', 'paragraph', 'height']],
                         ['table', ['table', 'hr']],
                         ['insert', ['link', 'picture', 'video']],
                         ['select', ['image', 'attachment']],
                         ['view', ['fullscreen', 'codeview', 'help']],
                     ],
                 })
             });
         });
     </script>
 </div>
 
注:该动态生成仅在已有富文本的页面创建,因为我没有引入😅



















