summernote富文本编辑器

本文介绍了如何在项目中使用Summernote富文本编辑器存储文章,强调了其简洁、灵活的特点,并展示了如何自定义工具栏以去除表格、图片和超链接功能。
摘要由CSDN通过智能技术生成

在项目中,想要用一个字段,存储类似World格式一样的文章,最终选择了 summernote富文本编辑器 。Summernote 是一个简单,灵活,所见即所得(WYSIWYG)的编辑器,基于 jQuery 和 Bootstrap 构建。Summernote 所有主要的操作都支持快捷键,有一个功能强大的 API,它提供了大量的自定义选项的设计和功能。

前期准备
首先在官网下载 CSS 和 JavaScript 的预编译和缩小版本。然后需要在HTML 页面的区域中包含以下代码2项引用 summernote.css 和summernote.min.js
1、例子一
$('#summernoteAct').summernote({
                    lang: 'zh-CN',
                    height: 100,
                    minHeight: null,
                    maxHeight: null,
                    width: '100%',
                    labelAlign: 'right'
                });

使用上面的例子,显示的是一个最全的工具栏

但是在我们此次的项目中是不允许插入表格和图片影像和超链接,所以需要自定义工具栏,将不需要的去掉
2、例子二
$('#summernoteAct').summernote({
            lang: 'zh-CN',// 语言
            height: 100,                 // set editor height
            minHeight: null,             // set minimum height of editor
            maxHeight: null,             // set maximum height of editor
            width: '100%',
            labelAlign: 'right',
            toolbar: [
                ['style', ['style']],
                ['font', ['bold', 'italic', 'underline', 'clear']],
                ['fontname', ['fontname']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['height', ['height']],
                //['table', ['table']],
                //['insert', ['link', 'picture', 'hr']],
                ['view', ['fullscreen', 'codeview']],
                //['help', ['help']]
            ],
        });
  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值