😆先来点表情镇楼..😅🤩🦊🍸😓😡,本文使用ckeditor版本为4.11.1 👽 

之前就想给ckeditor添加表情的，一直没空下来，刚好最近抓到点时间，搞搞，

结果这里倒是发现了一个大坑.

不过一番折腾，反而对cheditor的插件机制 及emoji 相关更了解了一点。

而且后面还引发出了prerender的问题，折腾了一晚上加一早上，还学会了用vs code调试nodejs，还好找到问题了。

好吧，这就是后话了，反正引出了好多东西，感觉不会的东西更多了。。😥

Ckeditor版本及插件.

之前使用的ckeditor为4.8，而Eomji是从ckeditor4.10开始引入的，必须要更新下版本呢，

本来想换位ckeditor5的，但是发现改动比较大，有些东西不好调,而且与目前的一些字段定义插件不兼容，

那就罢了.直接更新4.11吧。

之前的ckeditor都有点忘了是怎么下下来的，反正捣鼓了一堆插件也没用上。自己修改了config.js简化不少，

4.11 ckeditor更新

现在直接下一个完整版的4.11下来发现按钮各种多。。🙄，

而且发现plugins目录下的插件都没有js,原来直接在官网build下来的插件，js都会集成压缩到ckeditor.js 中，

这样虽然方便使用，但是及其不方便修改和查看。

比如整合CKAwesome时，插件里面引用了select2,与我页面上的有冲突，非得改下代码才好。

在官方这个在线build界面发现右边点击每个插件，可以直接查看插件自己的网页，

后来就一个个的把需要的插件下下来，在config.js中自己整合，

整合了Emoji,smile,CKAwesome 三个。当然都有些小修改，这就是单独下载的好处了，可以随意修改。

这里增加了preview,可以预览.

整合

https://ckeditor.com/cke4/addon/emoji

下载集成就好，当然需要把依赖的其他插件 autocomplete,textmatch,ajax,panelbutton,floatpanel

都一个个下好。

	CKEDITOR.plugins.add( 'emoji', {
		requires: 'autocomplete,textmatch,ajax,panelbutton,floatpanel',
		lang: 'en', // %REMOVE_LINE_CORE%
		icons: 'emojipanel',
		hidpi: true,

Emoji问题

乱码

插件配置好后，编辑一点问题没有，cool~😉

保存，然后查看首页。。

好家伙，直接乱码，显示 小方块，但是再编辑的时候是正常的。

原因

研究一番后发现网上说的都不适用。

本blog存储使用的unicode，所有文字输入都会escape转码存储.，数据库直接存储的

😀,是没有问题的.

在Controller中取出来就是😀符号了。但是到页面上就是乱码了。

再研究一番发现，html中显示需要转化为对应的html实体 转义符号，例如 😀 这样。

其实就是&#x +符号的unicode 16进制编码。

Emoji符号说明 unicode.org 

解决

就是页面显示的时候需要拼接&#x+16进制unicode，那么为了方便统一处理，后台存储的时候肯定不能直接存储成😀 这样了。

其实也简单，存储的时候匹配所有的Emoji符号， 计算出 符号的 unicode 编码， 用统一标准存储，

 比如😀 --》统一加前缀 &#x和后缀;   变成  😀;

前台呈现的时候,将&#x 统一替换为 &#x即可。 即  😀  

这样就是可以自动转换了。

问题点

那么问题也来了，怎么检查Emoji符号，怎么用js转化为 emoji对应的 unicode符号？

Emoji符号基本上是两位16进制字符组成，根据unicode emoji网站说明及google的结果，我这里使用了如下的匹配

/(?:[\u2700-\u27bf]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff]|[\u0023-\u0039]\ufe0f?\u20e3|\u3299|\u3297|\u303d|\u3030|\u24c2|\ud83c[\udd70-\udd71]|\ud83c[\udd7e-\udd7f]|\ud83c\udd8e|\ud83c[\udd91-\udd9a]|\ud83c[\udde6-\uddff]|[\ud83c\ude01-\ude02]|\ud83c\ude1a|\ud83c\ude2f|[\ud83c\ude32-\ude3a]|[\ud83c\ude50-\ude51]|\u203c|\u2049|[\u25aa-\u25ab]|\u25b6|\u25c0|[\u25fb-\u25fe]|\u00a9|\u00ae|\u2122|\u2139|\ud83c\udc04|[\u2600-\u26FF]|\u2b05|\u2b06|\u2b07|\u2b1b|\u2b1c|\u2b50|\u2b55|\u231a|\u231b|\u2328|\u23cf|[\u23e9-\u23f3]|[\u23f8-\u23fa]|\ud83c\udccf|\u2934|\u2935|[\u2190-\u21ff])/g;

关于计算 两位16进制Emoji字符转成 32位的unicode的方法，

我这里参考了JDK中的Character.class 里面codePointAt 方法来实现。

 // Optimized form of:
        // return ((high - MIN_HIGH_SURROGATE) << 10)
        //         + (low - MIN_LOW_SURROGATE)
        //         + MIN_SUPPLEMENTARY_CODE_POINT;

如下：

function KChar(options){
		
		this.default={
				    MIN_SUPPLEMENTARY_CODE_POINT : 0x010000,
				     MIN_HIGH_SURROGATE : '\uD800'.charCodeAt(0),
				     MIN_LOW_SURROGATE  : '\uDC00'.charCodeAt(0),
				     MAX_HIGH_SURROGATE : '\uDBFF'.charCodeAt(0),
				     MAX_LOW_SURROGATE  : '\uDFFF'.charCodeAt(0),
				     MIN_CODE_POINT : 0x000000,
				     MAX_CODE_POINT:0X10FFFF,
		};
	
		
	} ;
	
	KChar.prototype.isHighSurrogate=function(ch){
		var me=this;
		 return ch >= me.default.MIN_HIGH_SURROGATE && ch < (me.default.MAX_HIGH_SURROGATE + 1);
	}
	
	KChar.prototype. isLowSurrogate=function( ch) {
		var me=this;
	        return ch >= me.default.MIN_LOW_SURROGATE && ch < (me.default.MAX_LOW_SURROGATE + 1);
	    }

	KChar.prototype.codePointAt=function(seq,index) {
		var me=this;
	        var c1 = seq.charCodeAt(index);
	        if (me.isHighSurrogate(c1) && ++index < seq.length) {
	            var c2 = seq.charCodeAt(index);
	            if (me.isLowSurrogate(c2)) {
	                return me.toCodePoint(c1, c2);
	            }
	        }
	        return c1;
	    }
	
	KChar.prototype.toCodePoint=function(high,low) {
		var me=this;

		 var codept= ((high << 10) + low) + ( me.default.MIN_SUPPLEMENTARY_CODE_POINT
	             - ( me.default.MIN_HIGH_SURROGATE << 10)
	             -  me.default.MIN_LOW_SURROGATE);
	        return codept;
	    }

然后将转化的数字转为16进制显示即可

// 返回emoji表情的 unicoe 数字
	window.$kchar.codePointAt=function(str){
		
		return kchar.codePointAt(str,0).toString(16);
		
	};

，

这里我封装了一个JS，比较方便。

下载  点击这里下载

使用如下：

	
var withemojihtml= $kchar. replaceEmoji(inputhtmldata);

github:

https://github.com/kxjl168/kchar

其他插曲

本来昨天就想写这个文章的，但是

回家搞google验证搞了一晚上，没搞定！😱。。

google站点的认证，使用html认证，怎么返回的都是 带 <html><head>...的数据。

今天发现妈蛋的被prerender拦截了，prerender调用 chorme 来加载网页的时候，会与大部分浏览器一样自动加上

<html><head>。。。。😭😠。。

不过总算搞定了！

而且发现nodejs 直接用vscode 打开就可以直接运行，调试，不得不说牛的一米，😏

------------------------

附录mysql utf8mb4

普通mysql，使用utf8mb4存储 emoji

mysql ,my.conf配置 服务器utf8mb4格式。

[client]
default-character-set = utf8mb4
[mysql]
default-character-set = utf8mb4


[mysqld_safe]
socket          = /var/run/mysqld/mysqld.sock
nice            = 0

[mysqld]
character-set-server = utf8mb4
collation-server = utf8mb4_unicode_ci

数据库设置为utf8mb4格式。

-- 修改库
ALTER DATABASE database_name CHARACTER SET = utf8mb4 COLLATE = utf8mb4_unicode_ci; 

--修改字段
ALTER TABLE sys_operlog CHANGE data data text  CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci  COMMENT '操作数据';