富文本编辑器

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>