We Keep Coding

How to render emoji by entring symbol through text input in div block

I am developing social networking application using angular technology
I used CKEditor for creating posts and created a separate emoji function
Image to create new post
Render page
I couldn't find the way to convert symbols ;) :( :) to emojis in HTML div tag
If anyone knows please let me guide on it
Thanks

If I understand your question clearly, you want to display emoticons on the webpage when users enter their symbol in the textarea.
This can be done using an inbuilt text editor plugin like TinyMCE.
But if you want to try the native way, the simple funda here is:
These emoticon characters are available as Unicode decimal or hexadecimal codepoints when used with UTF-8, a default charset used on webpages.
To get a list of smileys hexadecimal code points, refer to this:
https://www.unicode.org/charts/PDF/U1F600.pdf
To display any special character on the webpage, we use '&#x<hexa_code_point>' or '&#<dec_code_point>'.
For eg,
🙂 = 🙂
&#x1F612 = 😒
&#x1F634 = 😴
so you will need a map between a string entered in your textarea and this code.
For eg,
{
':|': "1F610"
}
and then corresponding to that code point, we can display smiley.
For reference,
https://codesandbox.io/s/vibrant-lehmann-ibvncy?file=/index.html

The new ckeditor emoji plugin allows you to add emoji. It also auto detectsband filter the relevant emoji based on keywords. e.g.
:thumbs_up
Add the following line to your congiurations:
config.emoji_emojiListUrl
And the following link contains demo
https://ckeditor.com/docs/ckeditor4/latest/examples/mentions.html

Using regexp to match pattern not in img tag

I want to do an online chatting application, its sending emoji ability like this:
So I use an div whose contentEditable is true as input area. And all of the message would be saved in database in this way:
"Hello, Cathy<img src="/public/face/Mazes_Mini_017.png"><img src="/public/face/Mazes_Mini_017.png">"
All of these above works well, but at that time I want to do a search ability, highlighting the key word I search, I met a problem when I want to use string.replace method to replace myKeyWord with <span class='highlight'>myKeyWord<span>, but it would match some characters in <img> tag...
eg. <img src="/public/face/Mazes_Mini_017.png">112233test112233</img>123test123
keyword is test
expected result is:
<img src="test.png">112233test112233</img>123test123
So I really want to use regExp to matched some characters not in a specify tag like <img>, I have tried a lot but no one worked...

Here is an example
You could try this: (?<!<\/)test(?![^<]*<\/img>)

placehold.it print non-English words

The link below will print "hello world" on a place holder image provided by http://placehold.it
http://placehold.it/200&text=hello+world
Is it possible to print non-English words on it, say Chinese or Japanese? If it cannot, are there any service available to do so?

You can create images printed non-English words. See here.
Here is such a sample.

The place holder images can be easily emulated by a div with the same size (set in .css). I then can add any text on it.

Make my textbox understand html img tag

When inserting a new emoji inside my textbox i want to be displayed as the emoji image and not the emoji symbol how can i do that like instead of ( ':)'--> put the image represent it inside my textbox )

One way: Instead of a text box, use a <div contenteditable="true"></div>. As the user types, change occurrences of the smiley for the image. When the form is submitted, your javascript needs to translate the contents of that div back into plain text and put it into a field for submission.

If you want to use images, then it would require you to change your HTML significantly. You would need to make use of the Content Editable functionality on something like a <span>, rather than a regular input box. You'd then need JavaScript code to monitor keypress events and whenever it sees a :) (or whatever), it replaces the code with the appropriate <img>.
A quick-and-dirty solution that sticks with your text box, however, would be to use the same approach, but use the Unicode emoji characters (rather than images). This will only work on platforms with the appropriate font glyphs -- although the common smilies are more widely supported -- but it gives you the idea:
HTML:
<input class="emojify" type="text" />
JavaScript (using jQuery, to make everyone's life easier):
$(document).ready(function() {
// Map plaintext smilies to Unicode equivalents
var emoji = {
':)': '\u263a',
':(': '\u2639'
},
// Function to escape regular expressions
reEscape = function(s) {
return s.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
};
$('input.emojify').keyup(function() {
var text = $(this).val();
// See if any of our emoji exist in the text and replace with Unicode
$.each(emoji, function(plaintext, unicode) {
text = text.replace(new RegExp(reEscape(plaintext), 'g'), unicode);
});
// Replace text with new values
$(this).val(text);
});
});
Here's a working demo on jsFiddle. Note that the caret position will be reset every time the keyup event is triggered. I'm sure you can work around that somehow, but this code suffices to illustrate the process.

How to create a textbox to accept emoticon in QML?

i am trying to create a textbox which will accept a emoticon image as part of its text.
Any sugestions?

Tell your textbox that you want it to display rich text. When you write text, replace your emoticons with HTML <img> tags pointing to the emoticon picture.
Edit : example with a smiley example (:-))
In your text box, you want to replace the :-) smiley with this picture : . Assume that the picture is in a file called "smile.jpg". When you write text, replace :-) by <img src="my/path/to/smile.jpg" alt=":-)"/>. When you write a backspace to erase the smiley, you can replace the whole HTML <img> tag by :- (:-) without the final ))