master

分支 (1)

管理

管理

master

light-year-admin-using-v5-for-example
/
lyear_js_summernote.html

<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<meta name="keywords" content="LightYear,LightYearAdmin,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="Light Year Admin V5是一个基于Bootstrap v5.1.3的后台管理系统的HTML模板。">
<title>富文本编辑器summernote - 光年(Light Year Admin V4)后台管理系统模板</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<link rel="stylesheet" type="text/css" href="css/materialdesignicons.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="js/summernote/summernote-bs4.min.css">
<link rel="stylesheet" type="text/css" href="css/style.min.css">
<style>

</style>
</head>

<body>
<div class="container-fluid">

  <div class="row">

  	<div class="col-lg-12">
  	  <div class="card">
  	    <header class="card-header">
  	      <div class="card-title">富文本编辑器 summernote</div>
  	    </header>
  		<div class="card-body">

  		  <p>插件使用summernote 0.8.18，官网地址：<a href="https://summernote.org/" target="_blank">https://summernote.org/</a></p>
          <p><strong>默认使用</strong></p>
          <p>给 &lt;textarea&gt; 加上 <code>data-provide="summernote"</code>。您可以使用数据属性应用 summernote 的选项。例如，要设置高度选项，请将 <code>data-height="150"</code> 添加到 <code>&lt;textarea&gt;</code> 中，对于 <code>minHeight</code> 选项，请使用 <code>data-min height="150"</code>。</p>
          <form action="#!" method="post" id="example-from">
            <div class="mb-3">
              <textarea data-provide="summernote" data-min-height="150"></textarea>
            </div>
          </form>

          <p><strong>简单工具栏</strong></p>
          <textarea data-provide="summernote" data-toolbar="slim"></textarea>

          <p><strong>完整工具栏</strong></p>
          <textarea data-provide="summernote" data-toolbar="full"></textarea>

          <p><strong>浮空模式</strong></p>
          <p>给需要的元素加上 <code>data-air-mode="true"</code>，选择文本以查看编辑器。</p>
          <div data-provide="summernote" data-air-mode="true">
            <p>富家女逃难托乳母 贫穷汉有幸配淑女</p>
            <ul>
              <li>举金狮叔宝伤力 见白虎仁贵倾家</li>
              <li>大王庄薛仁贵落魄 怜勇士柳金花赠衣</li>
            </ul>
            <p>射鸿雁薛礼逢故旧 赠盘缠周青同投军</p>
          </div>

          <hr/>
          <p><strong>单击可编辑</strong></p>
          <div id="summernote-element">这里是文字信息</div>

          <br>
          <button class="btn btn-primary" data-summernote-edit="#summernote-element">修改</button>
          <button class="btn btn-primary" data-summernote-save="#summernote-element">保存</button>

  	    </div>
  	  </div>
    </div>

  </div>

</div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/main.min.js"></script>
<script type="text/javascript" src="js/summernote/summernote-bs4.min.js"></script>
<script type="text/javascript" src="js/summernote/lang/summernote-zh-CN.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('[data-provide="summernote"]').each(function() {
        var options = {
            dialogsInBody: true,
            lang: 'zh-CN',
            dialogsFade: true
        };

        var config = {};
        $.each( $(this).data(), function(key, value){
            key = key.replace(/-([a-z])/g, function(x){return x[1].toUpperCase();});

            if ( key == 'provide' ) {
                return;
            }

            config[key] = value;
        });

        options = $.extend(options, config);

        if ( options.toolbar ) {
            switch( options.toolbar.toLowerCase() ) {
              case 'slim':
                options.toolbar = [
                  // [groupName, [list of button]]
                  ['style', ['bold', 'underline', 'clear']],
                  ['color', ['color']],
                  ['para', ['ul', 'ol']],
                  ['insert', ['link', 'picture']]
                ];
                break;

              case 'full':
                options.toolbar = [
                  // [groupName, [list of button]]
                  ['para_style', ['style']],
                  ['style', ['bold', 'italic', 'underline', 'clear']],
                  ['font', ['strikethrough', 'superscript', 'subscript']],
                  ['fontsize', ['fontname', 'fontsize', 'height']],
                  ['color', ['color']],
                  ['para', ['ul', 'ol', 'paragraph', 'hr']],
                  ['table', ['table']],
                  ['insert', ['link', 'picture', 'video']],
                  ['do', ['undo', 'redo']],
                  ['misc', ['fullscreen', 'codeview', 'help']]
                ];
                break;
            }
        }
        $(this).summernote(options);
    });

    $(document).on('click', '[data-summernote-edit]', function(){
        var target = $(this).data('summernote-edit');
        $(target).summernote({focus: true});
    });


    $(document).on('click', '[data-summernote-save]', function(){
        var target = $(this).data('summernote-save');
        var markup = $(target).summernote('code');
        $(target).summernote('destroy');
        alert('修改完成');
    });
});
</script>
</body>
</html>