前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >只需三步:在CKEditor4富文本编辑器中集成错别字在线检测

只需三步:在CKEditor4富文本编辑器中集成错别字在线检测

原创
作者头像
田春峰-JCJC错别字检测
修改2019-11-27 10:41:19
1.2K0
修改2019-11-27 10:41:19
举报

在CKEditor4中集成错别字在线检测功能

JCJC错别字检测已经可以集成在各种编辑器中了,这篇文章主要用来讲解如何与:CKEditor编辑器集成错别字在线检测功能。

第一步,增加一个错别字检测按钮:

代码语言:html
复制
<input type="submit" id="btn_click_submit" value="JcJc检查错别字">

第二步,给该按钮增加响应函数:

代码语言:javascript
复制

    $("#btn_click_submit").click(function(){
     
            var content_raw ;
            content_raw =  CKEDITOR.instances.editor.getData();
            var http_host = "";
            
            http_host = "http://​api.cuobiezi.net";
            //http_host = "http://​127.0.0.1:8235";
     
            //--------------------------
            var gb_endpoint = http_host + "/spellcheck/json_check/json_phrase";
     
            /**
            字段一:"content", 填写需要检查的文字内容 
            字段二:"mode", 固定值,填写:"advanced"  预留参数,固定值 字段三:"biz_type", 固定值,填写:"show"  预留参数,固定值 字段四:"username", 固定值,填写:"tester"  预留参数,固定值 
     
            "Cases":[{"Error":"新李","Tips":"\u003c拼音检查\u003e","Sentence":"\u003cp\u003e有一位\u003cstrong\u003e新李\u003c/strong\u003e咨询师说,","ErrInfo":"","Pos":14,"MarkType":44,"ErrLevel":1,"WordsLen":2}
     
            */
     
    ...
    ...
    ...
     
    全部的函数内容请参考:  http://jcjc.ac.cn
     

第三步,对返回的json结果进行解析处理:

代码语言:javascript
复制

    function __process_cases(json_obj,len_total,content_raw){
     
        if (json_obj.successed == false){
                return
            }
            
        if ( isString( json_obj ) ){
                json_obj = JSON.parse( json_obj );
            }
            

 

最后一步:是高亮处理,替换原始的内容:

代码语言:javascript
复制
         CKEDITOR.config.font_defaultLabel = 'Arial';
            CKEDITOR.config.fontSize_defaultLabel = '16px';
     
            CKEDITOR.on( 'instanceReady', function( ev ) {
            ev.editor.window.$.document.body.style.fontFamily = "Arial";
            ev.editor.window.$.document.body.style.fontSize = "16px";
     
            });
     
     
            CKEDITOR.instances.editor.setData(new_conent_raw);

通过以上四步,就可以给 CKEditor 4 增加上错别字检测功能了。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 第一步,增加一个错别字检测按钮:
  • 第二步,给该按钮增加响应函数:
  • 第三步,对返回的json结果进行解析处理:
  • 最后一步:是高亮处理,替换原始的内容:
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档