富文本框wangEditor

个人觉的官网文档写的还是非常详细的

官网地址: https://www.kancloud.cn/wangfupeng/wangeditor3/332599

富文本框wangEditor功能相对于百度等其他的一些富文本框来说, 功能相对来说少了一点, 但是能够满足一些基本

的开发需要, 毕竟我们开发中遇到的富文本框不需要像Word或者wps功能这么齐全.  功能齐全的富文本框配置必然

也是复杂一点,例如UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器, 开源基于MIT协议，

允许自由使用和修改代码,官网地址:http://ueditor.baidu.com/website/

  /*个人项目中wangEditor富文本框的简单配置*/
                function editor() {
                    var E = window.wangEditor
                    var editor = new E('#img_detail_box');
                    var $text1 = $('#text1')
                    editor.customConfig.onchange = function (html) {
                        // 监控变化，同步更新到 textarea
                        $text1.val(html)
                    }

                    editor.customConfig.lang = {
                        '设置标题': 'title',
                        '正文': 'p',
                        '链接文字': 'link text',
                        '链接': 'link',
                        '上传图片': 'upload image',
                        '上传': 'upload',
                        '创建': 'init'
                        // 还可自定添加更多
                    }
                    editor.customConfig.linkImgCallback = function (url) {
                        console.log(url) // url 即插入图片的地址
                    }

                    // editor.customConfig.linkImgCheck = function (src) {
                    //     console.log(src) // 图片的链接
                    //
                    //     return true // 返回 true 表示校验成功
                    //     return '验证失败' // 返回字符串，即校验失败的提示信息
                    // }
                    editor.customConfig.onfocus = function () {
                        // alert('jinru ')
                    }
// 自定义配置颜色（字体颜色、背景色）
                    editor.customConfig.colors = [
                        '#000000',
                        '#eeece0',
                        '#1c487f'
                        // '#4d80bf',
                        // '#c24f4a',
                        // '#8baa4a',
                        // '#7b5ba1',
                        // '#46acc8',
                        // '#f9963b',
                        // '#ffffff'
                    ]

// 下面两个配置，使用其中一个即可显示“上传图片”的tab。但是两者不要同时使用！！！
                    editor.customConfig.uploadImgShowBase64 = true   // 使用 base64 保存图片
// editor.customConfig.uploadImgServer = '/upload'  // 上传图片到服务器
                    editor.create()
                    // 禁用编辑功能
                    editor.$textElem.attr('contenteditable', true)


                }