富文本编辑器的使用

约定不等于承诺〃 2021-12-14 12:13 424阅读 0赞

[https://cloud.tencent.com/developer/article/1141421][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

[https_cloud.tencent.com_developer_article_1141421]: https://cloud.tencent.com/developer/article/1141421%20

发表评论取消回复

表情：

评论列表（有 0 条评论，424人围观）

还没有评论，来说两句吧...

相关阅读

相关富文本编辑器Quill的使用

需求来源于产品和UI 快速开始  <link href="https://cdn.quilljs.

今天药忘吃喽~/ 2022年10月07日 13:55/ 0 赞/ 149 阅读

相关 vue中使用富文本编辑器

> 前端使用富文本编辑器的插件有很多，今天献上wangeditor的使用教程，教你如何在vue中使用富文本编辑器先敬上官网：[http://www.wangeditor.c

柔情只为你懂/ 2022年09月12日 07:56/ 0 赞/ 228 阅读

相关富文本编辑器的使用

富文本编辑器在系统中经常会用到，具体用法如下：一、引入css，js： <linkhref="/js/kindeditor-4.1.10/themes/defa

比眉伴天荒/ 2022年06月03日 03:42/ 0 赞/ 240 阅读

相关富文本编辑器NicEdit的使用

调用nicEdit.js和一张nicEdit所需要的icon图 <script type="text/javascript" src="/js/nicEdit.js"

你的名字/ 2022年05月21日 00:19/ 0 赞/ 254 阅读

相关 kindeditor富文本编辑器的使用

百度下载kindeditor 解压放至项目中可以删除一些不必要的文件夹然后在页面引入 <link href="kindeditor-4.1.10/themes/

深藏阁楼爱情的钟/ 2022年05月17日 09:40/ 0 赞/ 324 阅读

相关 HTML富文本编辑器wangEditor的使用

文章目录官网项目结构源码全屏插件 CSS JS 效果

叁歲伎倆/ 2022年04月03日 05:45/ 0 赞/ 414 阅读

相关富文本编辑器

（1）[UEditor][] （2）[kindEditor][] （3）[summernote][] 另本篇文章有更多富文本编辑器推荐： [https://www

你的名字/ 2022年03月19日 05:52/ 0 赞/ 374 阅读

相关富文本编辑器的使用

[https://cloud.tencent.com/developer/article/1141421][https_cloud.tencent.com_developer_

约定不等于承诺〃/ 2021年12月14日 12:13/ 0 赞/ 425 阅读

相关 Vue - 全局使用富文本编辑器

1. vue 安装 vue-quill-editor npm install vue-quill-editor --save 2. main.js中全局引入，注册为

ゞ浴缸里的玫瑰/ 2021年07月25日 16:06/ 0 赞/ 524 阅读

相关富文本编辑器Editormd的配置使用

我们经常可以看到各个博客网站中用于编辑文章的富文本编辑器，在富文本编辑器中，我们可以对我们的编辑内容样式进行设置。富文本编辑器一般是通过插件来实现的，我们只需要在页面中配置一下

落日映苍穹つ/ 2021年06月10日 20:38/ 0 赞/ 726 阅读