富文本編輯器的使用

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>