富文本编辑器的使用

https://cloud.tencent.com/developer/article/1141421 几种富文本编辑器

 

默认情况下CKEditor是没有上传图片功能的，可以在编辑器中粘贴图片，这样的话保存在数据库中的是图片的源文件，这很容易出现问题，即使字段是text格式的也很容易就超出最大范围了，所以要配合kcfinder来上传文件。一个是ck一个是kc真实一对好兄弟。

 

总体看了下,最简洁明了的叫做wangEditor

 

加在easyui中是这样的:

<script>
    // CKEDITOR.replace('editor1');
    //wangEditor
    var E = window.wangEditor;
    var editor = new E("#wangEditor");
    // 下面两个配置，使用其中一个即可显示“上传图片”的tab。但是两者不要同时使用！！！
    // editor.customConfig.uploadImgShowBase64 = true   // 使用 base64 保存图片
    editor.customConfig.uploadImgServer = 'http://test91.ykmimi.com/upload/newspic/0';  // 上传图片到服务器
    //设定上传文件名字
    editor.customConfig.uploadFileName = 'uploadFile';
    // 显示"网络图片"tab
    editor.customConfig.showLinkImg = true;
    //跨域传递 cookie
    // editor.customConfig.withCredentials = true;
    editor.customConfig.linkImgCallback = function (url) {
        console.log(url) // url 即插入图片的地址
    };
    editor.customConfig.linkCheck = function (text, link) {
        console.log(text); // 插入的文字
        console.log(link); // 插入的链接
        return true // 返回 true 表示校验成功
        // return '验证失败' // 返回字符串，即校验失败的提示信息
    };
    editor.customConfig.linkImgCheck = function (src) {
        console.log(src); // 图片的链接
        return true // 返回 true 表示校验成功
        // return '验证失败' // 返回字符串，即校验失败的提示信息
    };
    editor.customConfig.onfocus = function () {
        // console.log("onfocus"); //onfocus事件
    };
    editor.customConfig.onblur = function (html) {
        // html 即编辑器中的内容
        console.log('onblur', html);
    };
    // 自定义配置颜色（字体颜色、背景色）
    editor.customConfig.colors = [
        '#000000',
        '#eeece0',
        '#1c487f',
        '#4d80bf',
        '#c24f4a',
        '#8baa4a',
        '#7b5ba1',
        '#46acc8',
        '#f9963b',
        '#ffffff'
    ];
    // 表情面板可以有多个 tab ，因此要配置成一个数组。数组每个元素代表一个 tab 的配置
    editor.customConfig.emotions = [
        {
            // tab 的标题
            title: '默认',
            // type -> 'emoji' / 'image'
            type: 'image',
            // content -> 数组
            content: [
                {
                    alt: '[坏笑]',
                    src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/50/pcmoren_huaixiao_org.png'
                },
                {
                    alt: '[舔屏]',
                    src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/40/pcmoren_tian_org.png'
                }
            ]
        },
        {
            // tab 的标题
            title: 'emoji',
            // type -> 'emoji' / 'image'
            type: 'emoji',
            // content -> 数组
            content: ['😀', '😃', '😄', '😁', '😆']
        }
    ];
    editor.create();
    var url;
    function newUser() {
        //打开添加新闻 窗口
        $('#dlg').dialog('open').dialog('setTitle', '插入数据');
        //把form表单的内容给清空
        $('#fm').form('clear');
        editor.txt.html('');
        //给url赋值
        url = 'http://test91.ykmimi.com/news/addNews';
    }
    function editUser() {
        alert("开启编辑")
        //获得 选中的行
        var row = $('#dg').datagrid('getSelected');
        // 是否选中
        if (row) {
            //打开窗口
            $('#dlg').dialog('open').dialog('setTitle', '信息修改');
            //让from 表单去加载 选中行的数据
            $('#fm').form('load', row);
            editor.txt.html($("#content").val());
            //修改的地址
            url = 'http://test91.ykmimi.com/news/updateNews'; //TODO 改为更改新闻接口
        }
    }
    $("#publish").click(newsFormAjax);
    // 新增新闻
    function newsFormAjax() {
        alert("url:"+url)
        $("#content").val(editor.txt.html());
        $.ajax({
            url: url,
            data: $("#fm").serializeJSON(),
            dataType: 'json',
            type: 'POST',
            success: function (result) {
                if (result.success) {
                    $.messager.alert('操作结果', '成功');
                    //关闭添加新闻窗口
                    $('#dlg').dialog('close');        // close the dialog
                    //重新加载数据
                    $('#dg').datagrid('reload');    // reload the data
                } else {
                    $.messager.alert('操作结果', '失败');
                }
            }
        });
    }
</script>