Full WYSIWYG support, add additional methods for HTML tags

[yarekc]

Hi, This is not a bug, but a request:

Is there a function to add a new image inside the emojionearea (like an animated gif) ?

[mervick]

Actually no, currently EmojioneArea works only with text and emojis

[yarekc]

I think I expressed badly. You already do insert images into the EmojioneArea

<img alt="" class="emojioneemoji" src="https://cdnjs.cloudflare.com/ajax/libs/emojione/2.1.4/assets/png/1f644.png">

My question is: how can I insert for instance my own image inside EmojioneArea like:

<img alt="" class="emojioneemoji" src="https://myOwnGig.gif">

[mervick]

You can't, EmojioneArea not supports images by default

[mervick]

EmojioneArea filters output and removes all images except emojis

[yarekc]

and what about HTML ? looks like setText parses HTML content: is there a way to insert HTML content ?

[mervick]

EmojiOne Area is a small jQuery plugin that allows you to transform any html element into simple WYSIWYG editor with ability to use Emojione icons. The end result is a secure text/plain in which the image icons will be replaced with their Unicode analogues.

[mervick]

And I repeat:

EmojioneArea works only with text and emojis

[yarekc]

that's not really TRUE: {saveEmojisAs:'image' } : will INSERT HTML IMAGES and not UNICODE

[mervick]

https://github.com/mervick/emojionearea#saveemojisas

[mervick]

it works only for emojis and only for save emojis as html images

[mervick]

Currently EmojioneArea not supports HTML at all, but actually it will be a good proposal to add this feature

[yarekc]

yes: that's what I say. there is a way to insert HTML content as you do when saveEmojisAs is set to 'image' I tried with 'paste' event: it does paste the image (good) AND also the html source of image (bad), even when I try to prevent the default event:

$('[contenteditable]').on('paste', function (e) {
    e.stopPropagation();
    e.preventDefault();
    document.execCommand('inserthtml', false, '<img class="gifAnimated" src="https://media2.giphy.com/media/zU4MLqeDvGA0M/100.gif" title="google STICKER">');
});

Would be great to have a setHTML function

[mervick]

Anyway getHtml() currently not exists, only getText() and it removes all extra html tags. It require to add custom options and methods for this and review all the code

[mervick]

Also currently it removes all html tags from source input

[hacknlove]

I would love this feature too.

I just have added a new strategy to the textcomplete, to insert usernames when user inserts a @ like here in github for instance.

  const emojioneArea = $('textarea').emojioneArea({
    events: {
      onLoad () {
        setTimeout(function () {
          const textComplete = that2.editor.data().textComplete
          textComplete.strategies.push({
            $el: textComplete.strategies[0].$el,
            cache: textComplete.strategies[0].cache,
            context () { return true },
            template (a) { return a },
            replace (a) { return `<address>@${a}</address>&nbsp;` },
            id: 'emojionearea',
            index: 2,
            match: /\B@(\w*)$/,
            search (term, c) {
                return ['foo', 'bar', 'buz']
            }
          })
        }, 1000)
      }
    }
  })

It shows the textcomplete popup and works as it should, but after a short while, the address tag is removed.

May be, just adding a whitelist of allowed tags will do de trick.

[maulik1211]

Currently EmojioneArea not supports HTML at all, but actually it will be a good proposal to add this feature

if it does not support html at all then why the description on this plugin says EmojioneArea is a small jQuery plugin that allows you to transform any html element into simple **WYSIWYG editor**

Still this feature is not added