HTML中嵌套summernote编辑器

最新推荐文章于 2023-02-16 14:13:01 发布

乐享极致

最新推荐文章于 2023-02-16 14:13:01 发布

阅读量484

点赞数

分类专栏： python HTML

本文链接：https://blog.csdn.net/weixin_44313745/article/details/97925496

版权

python 同时被 2 个专栏收录

50 篇文章 1 订阅

订阅专栏

HTML

10 篇文章 0 订阅

订阅专栏

summernote 编辑器灵活、好用、易安装

只需要加入summernote.css和summernote.js就可以实现简单的编辑器；配合bootstrap更加客观
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Summernote</title>
  <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
  <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
  <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote.css" rel="stylesheet">
  <script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote.js"></script>
</head>
<body>

    <!-- 方法一：
        <script>
            $(document).ready(function() {

                // $('#summernote').summernote({
                //     placeholder:' write here...',
                //
                //     toolbar: [
                //         /* 字体样式：加粗、斜体、下划线、清楚样式*/
                //         ['style', ['bold', 'italic', 'underline', 'clear']],
                //         /* 字体样式：删除线、上标、下标*/
                //         ['font', ['strikethrough', 'superscript', 'subscript']],
                //         /* 字体大小 */
                //         ['fontsize', ['fontsize']],
                //         /*设置字体系列*/
                //         ['fontname', ['fontname']],
                //         /* 字体颜色*/
                //         ['color', ['color']],
                //         /* 段落的样式 */
                //         ['para', ['style', 'ul', 'ol', 'paragraph', 'height']],
                //         /*  insert  表示：需要插入的东西。例如（图片、视频、超链接、表格、水平线） */
                //         ['insert', ['picture', 'link', 'video', 'table', 'hr']],
                //         /*文本的取消、重做、帮助、codeView、全屏 */
                //         ['view', ['fullscreen', 'codeview', 'undo', 'redo', 'help']]
                //     ]
                //
                //     /* 将文本编辑器的窗口弹出浮空，， 不随这内容的扩张而拉伸 */
                //
                //     // popover: {
                //     //   image: [
                //     //     ['image', ['resizeFull', 'resizeHalf', 'resizeQuarter', 'resizeNone']],
                //     //     ['float', ['floatLeft', 'floatRight', 'floatNone']],
                //     //     ['remove', ['removeMedia']]
                //     //   ],
                //     //   link: [
                //     //     ['link', ['linkDialogShow', 'unlink']]
                //     //   ],
                //     //   table: [
                //     //     ['add', ['addRowDown', 'addRowUp', 'addColLeft', 'addColRight']],
                //     //     ['delete', ['deleteRow', 'deleteCol', 'deleteTable']],
                //     //   ],
                //     //   air: [
                //     //     ['color', ['color']],
                //     //     ['font', ['bold', 'underline', 'clear']],
                //     //     ['para', ['ul', 'paragraph']],
                //     //     ['table', ['table']],
                //     //     ['insert', ['link', 'picture']]
                //     //   ]
                //     // }
                // });


                $('#summernote').summernote({
                  fontNames: ['Arial', 'Arial Black', 'Comic Sans MS',
                      'Courier New', 'Merriweather', '宋体', '楷体', '黑体', '微软雅黑'],
                   fontNamesIgnoreCheck: ['Merriweather']
                });


            });
        </script>

        <div id="summernote"></div>
        <div id="show"></div>
        <button id="preview">预览



        <script>
            var show = $('#show');
            $('#preview').click(function () {
                show.html($('#summernote').summernote('code'))
            })
        </script>


    -->




    <!-- 方法二: 点击出现编辑器

        <div class="click2edit"></div>
        <button id="edit" class="btn btn-primary" onclick="edit()" type="button">添加编辑</button>
        <button id="save" class="btn btn-primary" onclick="save()" type="button">保存</button>



        <script>
            /* 此处使用方法：点击添加编辑*/
            var edit = function() {
              $('.click2edit').summernote({
                  // 此处可以添加对编辑器的修改
                  focus: true
              });
            };

            var save = function() {
              var markup = $('.click2edit').summernote('code');
              $('.click2edit').summernote('destroy');
            };
        </script>
    -->
</body>
</html>

乐享极致

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML中嵌套summernote编辑器

summernote 编辑器灵活、好用、易安装只需要加入summernote.css和summernote.js就可以实现简单的编辑器；配合bootstrap更加客观<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Summern...
复制链接

扫一扫