下载summernote官方demo,解压,把文件夹中的summernote.js,summernote.css和font整个文件夹都放到服务器对应的项目目录里
引入summernote 所需要的bootstrap,jquery等文件,具体不知道需要引入那些文件,可以去以下网址查看,看不懂英文的话,用谷歌浏览器打开网址,右键翻译
网址:https://summernote.org/getting-started/
以下是我本地测试正常的demo
<!doctype html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"> <link rel="stylesheet" href="__STATIC__/layui/css/layui.css"> <!-- summernote富文本编辑器 --> <link href="__STATIC__/summernote/summernote.css" rel="stylesheet"> <link href="__STATIC__/summernote/bootstrap.css" rel="stylesheet"> </head> <body> {include file="public/header"} <div class="content"> <div class="main-wrap"> <form action="{:url('admin/index/roll_edit')}" class="parsley-validate" enctype="multipart/form-data" method="post"> <input type="text" name="id" value="{$data['id']}" class="form-control form-boxed" style="display: none;" /> <div class="form-group-col-2"> <div class="form-label">编号</div> <div class="form-cont"> <input type="text" name="rid" value="{$data['rid']}" placeholder="编号" class="form-control form-boxed" /> <span>*此编号对应举报信息编号*</span> </div> </div> <div class="form-group-col-2"> <div class="form-label">描述</div> <div class="form-cont"> <textarea id="summernote" name="content"></textarea> </div> </div> <div class="form-group-col-2"> <div class="form-label"></div> <div class="form-cont"> <input type="submit" class="btn btn-primary" value="保存"/> </div> </div> </div> </div> <!--form validation js --> <script src="__STATIC__/js/common/jquery.js"></script> <script src="__STATIC__/js/parsley.js"></script> <script src="__STATIC__/js/zh_cn.js"></script> <script src="__STATIC__/layui/layui.js"></script> <!-- summernote富文本编辑器 --> <script src="__STATIC__/summernote/summernote.js"></script> <!-- <script src="__STATIC__/summernote/jquery-3.3.1.min.js"></script> --> <script src="__STATIC__/summernote/bootstrap.js"></script> <script> $('#summernote').summernote({ height: 300, // set editor height 800, toolbar: [ // [groupName, [list of button]] ['style', ['bold', 'italic', 'underline', 'clear']], ['font', ['strikethrough', 'superscript', 'subscript']], ['fontsize', ['fontsize']], ['color', ['color']], ['para', ['ul', 'ol', 'paragraph']], ['height', ['height']] ], minHeight: null, // set minimum height of editor maxHeight: null, // set maximum height of editor focus: true // set focus to editable area after initializing summernote }); </script> </body> </html>
具体还有哪些操作 可到官网查阅