summernote富文本编辑器

下载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">{$data['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
              width: 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>

　　具体还有哪些操作可到官网查阅

summernote富文本编辑器

猜你喜欢