zoukankan      html  css  js  c++  java
  • 富文本编辑器

    1. wangEditor

    https://www.kancloud.cn/wangfupeng/wangeditor3/332599

    2. summernote

    https://summernote.org

    3. yii2-redactor

    https://github.com/yiidoc/yii2-redactor

    错误:

    1. 复制内容添加到数据库,取出填充到富文本,报错
    -- 解决:将内容中所有单引号转换成双引号,并将换行等去掉
    $data['content'] = str_replace("'", """, $data['content']);
    $data['content'] = preg_replace("/[ ]+/", '', $data['content']);

     wangEditor操作:

    <div class="form-group row">
                <label class="col-sm-2 col-form-label">内容</label>
                <div class="col-sm-10">
                    <div id="editor"></div>
                    <textarea hidden name="content" id="text" style=" 100%;height: 200px;"></textarea>
                </div>
            </div>
    
    <!-- wangeditor====================== -->
    <script src="/resources/static/wangEditor/release/wangEditor.min.js"></script> -->
    <script>
    var E = window.wangEditor;
    var editor = new E('#editor');
    var $text = $('#text');
    // 带样式粘贴
    editor.customConfig.pasteFilterStyle = false;
    // editor.customConfig.pasteIgnoreImg = true
    // 图片上传
    editor.customConfig.uploadImgServer = '/recentimgtext/addfpic';
    editor.customConfig.uploadFileName = 'pic';
    // 自定义配置颜色(字体颜色、背景色)
    editor.customConfig.colors = [
        '#FFB6C1',
        '#FFC0CB',
        '#DC143C',
        '#FFF0F5',
        '#DB7093',
        '#FF69B4',
        '#FF1493',
        '#C71585',
        '#DA70D6',
        '#D8BFD8',
        '#DDA0DD',
        '#EE82EE',
        '#FF00FF',
        '#FF00FF',
        '#8B008B',
        '#800080',
        '#BA55D3',
        '#9400D3',
        '#9932CC',
        '#4B0082',
        '#8A2BE2',
        '#9370DB',
        '#7B68EE',
        '#6A5ACD',
        '#483D8B',
        '#E6E6FA',
        '#F8F8FF',
        '#0000FF',
        '#0000CD',
        '#191970',
        '#00008B',
        '#000080',
        '#4169E1',
        '#6495ED',
        '#B0C4DE',
        '#778899',
        '#708090',
        '#1E90FF',
        '#F0F8FF',
        '#4682B4',
        '#87CEFA',
        '#87CEEB',
        '#00BFFF',
        '#ADD8E6',
        '#B0E0E6',
        '#5F9EA0',
        '#F0FFFF',
        '#E1FFFF',
        '#AFEEEE',
        '#00FFFF',
        '#00FFFF',
        '#00CED1',
        '#2F4F4F',
        '#008B8B',
        '#008080',
        '#48D1CC',
        '#20B2AA',
        '#40E0D0',
        '#7FFFAA',
        '#00FA9A',
        '#F5FFFA',
        '#00FF7F',
        '#3CB371',
        '#2E8B57',
        '#F0FFF0',
        '#90EE90',
        '#98FB98',
        '#8FBC8F',
        '#32CD32',
        '#00FF00',
        '#228B22',
        '#008000',
        '#006400',
        '#7FFF00',
        '#7CFC00',
        '#ADFF2F',
        '#556B2F',
        '#6B8E23',
        '#FAFAD2',
        '#FFFFF0',
        '#FFFFE0',
        '#FFFF00',
        '#808000',
        '#BDB76B',
        '#FFFACD',
        '#EEE8AA',
        '#F0E68C',
        '#FFD700',
        '#FFF8DC',
        '#DAA520',
        '#FFFAF0',
        '#FDF5E6',
        '#F5DEB3',
        '#FFE4B5',
        '#FFA500',
        '#FFEFD5',
        '#FFEBCD',
        '#FFDEAD',
        '#FAEBD7',
        '#D2B48C',
        '#DEB887',
        '#FFE4C4',
        '#FF8C00',
        '#FAF0E6',
        '#CD853F',
        '#FFDAB9',
        '#F4A460',
        '#D2691E',
        '#8B4513',
        '#FFF5EE',
        '#A0522D',
        '#FFA07A',
        '#FF7F50',
        '#FF4500',
        '#E9967A',
        '#FF6347',
        '#FFE4E1',
        '#FA8072',
        '#FFFAFA',
        '#F08080',
        '#BC8F8F',
        '#CD5C5C',
        '#FF0000',
        '#A52A2A',
        '#B22222',
        '#8B0000',
        '#800000',
        '#FFFFFF',
        '#F5F5F5',
        '#DCDCDC',
        '#D3D3D3',
        '#C0C0C0',
        '#A9A9A9',
        '#808080',
        '#696969',
        '#000000',
    ]
    // 内容插入到textarea,用于表单提交
    editor.customConfig.onchange = function (html) {
        // 监控变化, 同步更新到textarea
        $text.val(html);
    }
    editor.create();
    // 初始化的值
    editor.txt.html('<?=$data['content'] ? htmlspecialchars_decode($data['content']) : ""?>');
    $text.val(editor.txt.html());
    </script>

    summernote操作:

    <script src="/resources/static/jquery.3.3.1.js"></script>
        <link rel="stylesheet" href="/resources/static/bootstrap.min.css">
        <script src="/resources/static/bootstrap.bundle.min.js"></script>
        <link rel="stylesheet" href="/resources/static/layout.css">
        <link href="/resources/static/summernote/dist/summernote-bs4.css" rel="stylesheet">
    
    <textarea id="editor" name='content'></textarea>
    
    <script src="/resources/static/summernote/dist/summernote-bs4.js"></script>
    <script src="/resources/static/summernote/dist/lang/summernote-zh-CN.min.js"></script>
    <script>
    $(document).ready(function() {
      $('#editor').summernote({
          placeholder: 'Hello Janbin, There is fulltext for content.',
          tablesize: 2,
          height: 300,
          lang: 'zh-CN'
      });
      
      $('#editor').summernote('insertText', '<?=$data['content'] ? htmlspecialchars_decode($data['content']) : ""?>');
    });
    </script>
  • 相关阅读:
    【C#进阶系列】06 类型和成员基础
    纪中5日T1 1564. 旅游
    纪中17日T1 2321. 方程
    纪中17日T2 2322. capacitor
    纪中10日T1 2313. 动态仙人掌
    纪中14日听课小结 图论 最短路 二分图 差分约束
    一个抓猫的游戏 消遣GAME 持续更新中!
    洛谷P1464 Function  HDU P1579 Function Run Fun
    洛谷P1976 鸡蛋饼
    纪中12日T1 2307. 选择
  • 原文地址:https://www.cnblogs.com/maoriaty/p/10000675.html
Copyright © 2011-2022 走看看