Layui框架Summernote富文本编辑器使用

Summernote 是一个简单灵活的所见即所得的 HTML 在线编辑器，基于 jQuery 和 Bootstrap 构建，支持快捷键操作，提供大量可定制的选项。

官网        你需要下载 Summernote 的核心 JavaScript 文件和样式文件。你可以从 Summernote 的官方网站（https://summernote.org）或者 GitHub 页面（https://github.com/summernote/summernote）上找到并下载这些文件。选择一个适合你的版本的压缩包或源代码。//效果图

 summernote依赖于jQuery和Bootstrap。所以，请先引入jQuery和Bootstrap再引入summernote。

	<link rel="stylesheet" href="../lib/bootstrap/bootstrap-3.3.4.css" />
//引入 Bootstrap 的样式文件是为了确保 Summernote 编辑器能够正确地显示和运行。Summernote 编辑器是基于 Bootstrap 构建的，因此它依赖于 Bootstrap 的样式和布局
	<link href="../lib/summernote/summernote.css" rel="stylesheet" />
	<script type="text/javascript" src="../lib/bootstrap/bootstrap-3.3.4.js"></script>

	<script src="../lib/summernote/summernote.js"></script>
	<script src="../lib/summernote/lang/summernote-zh-CN.js"></script>
.... //你其他需要引入的文件 jquery 或者其他

倒数第二行代码引入了 Summernote 编辑器的核心文件 summernote.js，它包含了编辑器的所有功能和特性。

倒数第一行代码引入了 Summernote 编辑器的中文语言包 summernote-zh-CN.js，它提供了将编辑器界面翻译为中文的功能。

一.

//html
	<div class="layui-form-item " style="width:calc(100% - 55px)">
						<label class="layui-form-label">规划内容:</label>
						<div class="layui-input-block">
							//直接使用summernote命名的div 其他包裹的是我表单里样式不重要
							<div class="summernote">
                            
                            </div>
						</div>
					</div>

二.

初始化富文本编辑器 并开局调用

//初始化富文本编辑器
function initSummernote() {
    // initEditor("editor_id");
    $('.summernote').summernote({
//样式 格式一类
        height: 300,
        maxHeight: 300,
        tabsize: 1,
        lang: 'zh-CN',
        focus: false
    });
}

然后就是使用了 上面初始化完之后就可以正常使用了 剩下的就是取值发送给后台 赋值给表单回显功能了 

 // 获取富文本编辑器内容
    var content = $('.summernote').summernote('code');

 //同一页面多个summernote时，取第二个的值 
 
 var  
 sHTML = $( 
 '.summernote' 
 ).eq(1).code(); 

获取到的数据是这样的

"<p><img src=\"data:image/jpeg;base64,/9j/4AA...图片链接我省略了...imB/9k=\" data-filename=\"OIP-C.jpg\" style=\"width: 262px;\">c这是<b>测试数据,</b><span style=\"background-color: rgb(255, 239, 198);\">测试一下效果</span></p>"

 直接发送给后台就行了 回显的话

第一种

          //data.content是后台返回的数据 并html渲染到页面就行了
          var content = data.content;
          $('.note-editable').html(content);

第二种

$(".summernote").code(content)