jhollingworth / bootstrap-wysihtml5

Simple, beautiful wysiwyg editor
http://jhollingworth.github.com/bootstrap-wysihtml5/
MIT License
4.14k stars 1.01k forks source link

editor.on("newword:composer") question #221

Open violacase opened 11 years ago

violacase commented 11 years ago

I'm trying to extend wysihtml5 so it can be used as a 'bridge'-(the card game) editor.

Goal: If the user types a 2-characters combination like ' /h ' the phrase should automagically being converted to a red heart card suit symbol. With editor.on("newword:composer") I know a word has been typed so I should be able to filter the combinations I would like to act on.

I studied all the documentation but can't find the answers for the following questions: How do I get the instance of that last typed word? How do I replace that with my own HTML?

(Lot's of I's... Sorry)

violacase commented 11 years ago

Hi, Thanks for your answer!

After some trying I now have the following working code.

editor = new $('textarea').wysihtml5({
    "events": {
           "newword:composer": function() {
            text = editor.val();
        myfilter = text.indexOf('/h');
        if (myfilter>-1) {
           text = text.replace ('/h', 'my HTML ');
          this.clear().composer.commands.exec("insertHTML", text');
        }
       }
    }
});
violacase commented 11 years ago

I closed this issue too soon...

A new problem has arrived:

After running the above code the input cursor (the carot) is being placed at the end of the entire textarea string. This is not what I want because input typing and pasting can occur anywhere in the textarea. Any idea how we can place/focus the cursor directly after the inserted substring?

germanotm commented 11 years ago

I had the same problem too. I checked and there are a similar error with CTRL+Z feature. I don't solve it yet. https://github.com/xing/wysihtml5/issues/81

violacase commented 11 years ago

That's a pitty germanotm... What we need is a better focus() function. It's easy to calculate where the offset is before/after inserting or deleting text. A function like FocusMouseCursor(index) or just focus(bool[,index]) is all we need... Maybe it's possible to hack some behaviour? https://gist.github.com/mathiasbynens/326491

violacase commented 11 years ago

Back to the basics.

What we need is this: The event 'newword:composer' should give the offset index of the 'new word' in the textarea string.

For taking action on this event we should be able to use the following commands :

myHTML = "

Hello world

"; onNewWord.deleteNewWord(); onNewWord.insert(myHTML); index += strlen(myHTML); onNewWord.focus(bool, index);