首页 > 其他 > 详细

富文本编辑器的使用

时间:2019-04-09 23:40:01      阅读:209      评论:0      收藏:0      [点我收藏+]

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>

 

富文本编辑器的使用

原文:https://www.cnblogs.com/ukzq/p/10680573.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!