下载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

              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富文本编辑器的更多相关文章

  1. summernote富文本编辑器的使用

    最近在开发一个微信公众号的后台,微信公众号编辑的文章一直没有得到很好地适应,大多数人也是在其他的编辑软件中编辑好之后直接去复制到微信公众平台中,考虑到复制后会排版出现问题,所以给大家推荐一款很不错的W ...

  2. summernote富文本编辑器配合validate表单验证无法进行表单提交的问题

    1.使用summernote富文本编辑器提交图片到服务器 在使用bootstrap中,我们用到了summernote富文本编辑器,使用summernote将图片上传到服务器中,参考我的上篇文章http ...

  3. SummerNote 富文本编辑器 - Rails 集成

    使用官方提供的CDN服务 将下面一段加入layout文件中 <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css ...

  4. summernote 富文本编辑器限制输入字符长度

    项目中需要一个比较简单的富文本编辑器,于是选中了summernote .虽然比较轻量,但是在开发中也遇到了几个问题,在此记录一下. 1:样式和bootstrap冲突,初始化之后显示为: .note-e ...

  5. summernote(富文本编辑器)将附件与图片上传到自己的服务器（vue项目）

    1.上传图片至自己的服务器(这个官方都有例子,重点介绍附件上传)图片上传官方网址 // onChange callback $('#summernote').summernote({ callback ...

  6. 【实践】简洁大方的summernote 富文本编辑器插件的用发——小技巧

    前面说到summernote 的上传,可是我要知道怎么获取内容呀,很简单调用一下函数便可: 获取内容: $("#user-work-content").summernote(&qu ...

  7. 超好用的富文本编辑器Summernote的使用

    官网地址 中文文档 源码下载地址 Summernote依赖于jquery和bootstrap3/4   所以用时记得引入这俩依赖 奉上引入方法(官网说的很清楚,api也很详细): <!-- in ...

  8. 在 Vue 项目中引入 tinymce 富文本编辑器

    项目中原本使用的富文本编辑器是 wangEditor,这是一个很轻量.简洁编辑器 但是公司的业务升级,想要一个功能更全面的编辑器,我找了好久,目前常见的编辑器有这些: UEditor:百度前端的开源项 ...

  9. vue中引入Tinymce富文本编辑器

    最近想在项目上引入一个富文本编辑器,之前引入过summernote,感觉并不太适合vue使用, 然后在网上查了查,vue中使用Tinymce比较适合, 首先,我们在vue项目的components文件 ...

随机推荐

  1. vue组件传值

    组件的传值(组件之间的通讯) 1.父子通信 1)父传子 传递:当子组件在父组件中当做标签使用的时候,通过给子组件绑定一个自定义属性,值为需要传递的数据 接收:在子组件内部通过props进行接收 接收的 ...

  2. Eclipse中Tomcat v8.0 Server at localhost右键选择Properties详情页中Server Locations变灰无法编辑

    Eclipse中Tomcat v8.0 Server at localhost右键选择Properties详情页中Server Locations变灰无法编辑解决办法:1.首先将Servers中部署的 ...

  3. liteos 从入门到放弃

    这两天收到一份sdk,hisi 3516cv200 liteos的sdk 正好手头有硬件,就随便编译玩玩. 解压sdk. Hi3518E_SDK_V5.0.5.0 ll@ubuntu:~/work20 ...

  4. 使用OwnerDraw改变ListView的ColumnHeader

    当我使用了OwnerDraw改变ListView的ColumnHeader的颜色之后,发现行无法显示内容了.其原因就是OwnerDraw属性设置为True造成了,也就是说,这个属性需要我们重画List ...

  5. 剑指offer（22）从上往下打印二叉树

    题目描述 从上往下打印出二叉树的每个节点,同层节点从左至右打印. 题目分析 从下打印就是按层次打印,其实也就是树的广度遍历. 一般来说树的广度遍历用队列,利用先进先出的特点来保存之前节点,并操作之前的 ...

  6. Codeforces 438E The Child and Binary Tree - 生成函数 - 多项式

    题目传送门 传送点I 传送点II 传送点III 题目大意 每个点的权值$c\in {c_{1}, c_{2}, \cdots, c_{n}}$,问对于每个$1\leqslant s\leqslant ...

  7. 论文笔记：A Structured Self-Attentive Sentence Embedding

    A Structured Self-Attentive Sentence Embedding ICLR 2017 2018-08-19 14:07:29 Paper:https://arxiv.org ...

  8. Learning-Python【32】：进程理论基础

    什么是进程 进程就是一个程序在一个数据集上的一次动态执行过程.是用来描述程序执行过程的虚拟概念.进程的概念起源于操作系统,进程是操作系统最核心的概念,操作系统其它所有的概念都是围绕进程来的.进程一般由 ...

  9. 【搬运】Wget 命令详解

    用过 Linux 系统的对于 wget 不陌生吧,从网上下载资源等操作都是少不了它,它体积小但功能集全,支持 FTP HTTP HTTPS 协议下载方式,支持断点续传 代理服务器. 现在 Window ...

  10. 6_linux用户及权限(1)

    ------------用户管理: useradd,userdel,usermod,passwd,chsh,chfn,finger,id,chage组管理: groupadd,groupdel,gro ...