zoukankan      html  css  js  c++  java
  • 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"></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>
    

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

  • 相关阅读:
    oracle执行.sql文件
    rematch的基本用法
    dva的基本用法
    redux-saga基本用法
    react-redux的基本用法
    redux的基本概念
    mobx基本概念
    centos 编译安装Apache 2.4
    javascript动态添加一组input
    php配置文件语法
  • 原文地址:https://www.cnblogs.com/huanghanyi/p/9088406.html
Copyright © 2011-2022 走看看