s

src/RichTextEditor.js

@@ -446,6 +446,10 @@ export default class RichTextEditor extends Component {
     this._sendAction(actions.insertImage, url);
   }
 
+  insertEmoji(url) {
+    this._sendAction(actions.insertEmoji, url);
+  }
+
   setSubscript() {
     this._sendAction(actions.setSubscript);
   }

src/WebviewMessageHandler.js

@@ -62,6 +62,8 @@ export const MessageConverter = (action) => {
       return `zss_editor.updateLink('${action.data.url}, ${action.data.title}');`;
     case `${actions.insertImage}`:
       return `zss_editor.insertImage('${action.data}');`;
+    case `${actions.insertEmoji}`:
+        return `zss_editor.insertEmoji('${action.data}');`;
     case `${actions.setSubscript}`:
       return `zss_editor.setSubscript();`;
     case `${actions.setSuperscript}`:

src/const.js

@@ -34,6 +34,7 @@ export const actions = {
   insertLink: 'INST_LINK',
   updateLink: 'UPDATE_LINK',
   insertImage: 'INST_IMAGE',
+  insertEmoji: 'INST_EMOJI',
   setSubscript: 'subscript',
   setSuperscript: 'superscript',
   setStrikethrough: 'strikeThrough',

src/editor.html

@@ -1352,6 +1352,12 @@
 				zss_editor.enabledEditingItems();
 			}
 
+			zss_editor.insertEmoji = function(url) {
+				zss_editor.restorerange();
+				document.execCommand('insertHTML', false, '<img class="emoji" src="' + encodeHtmlEntities(url) + '"/>');
+				zss_editor.enabledEditingItems();
+			}
+
 			zss_editor.insertImageBase64String = function(imageBase64String, alt) {
 				zss_editor.restorerange();
 				var html = '<img src="data:image/jpeg;base64,'+encodeHtmlEntities(imageBase64String)+'" alt="'+encodeHtmlEntities(alt)+'" />';
@@ -1683,11 +1689,12 @@
 			#zss_editor_content {
 				font-family: Arial, Helvetica, sans-serif;
 				color: #000;
-				width: 95%;
+				width: calc(100% - 20px);
 				-webkit-overflow-scrolling: touch;
 				overflow:auto;
 				padding-left: 10px;
 				padding-right: 10px;
+				line-height: 20px;
 			}
 
 			#zss_editor_title {
@@ -1722,6 +1729,14 @@
 				padding-right: 10px;
 				display: none;
 			}
+
+			.emoji {
+				height: 19.5px;
+				width: 19.5px;
+				line-height: 19.5px;
+				display: inline-block;
+				vertical-align: top;
+			}
 		</style>
 
 		<style type="text/css">