话多说直接看效果:
<!-- 动态创建的一个富文本,请注意本人是为了方便所以把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>
注:该动态生成仅在已有富文本的页面创建,因为我没有引入😅