0

So basically I made a decent WYSIWYG editor and it works flawlessly. Last thing I need before publishing it is that if I press on text that is editable, and it already has tags (Bold/Italic/underline etc etc) then the Bold button should be marked.

Atm if I have a bolded word: BETY for example And I want to add a T, I will press where I want the T and type out T. (T will be automatically bolded the way I coded it). But I have no functionality regarding making the bold button marked so the user realises that bold is activated.

Is there any JS/jQuery event that triggers when I press at a word wrapped in tags?

4

2 回答 2

0

If you are using the contenteditable attribute for your WYSIWYG editor, or you are using JavaScript/JQuery code so the tags are inserted into the page (because it is WYSIWYG I think you do one of the mentioned) it seems to be a really trivial question and I will redirect you to the JQuery API selectors documentation http://api.jquery.com/category/selectors/ to catch your tags and the events doc to hook on the good event http://api.jquery.com/category/events/ http://api.jquery.com/click/

If your problem is more complicated and you think it can't be solved with those suggestions, please add some more informations.

Edit : Actual solution because op's editor is using execCommand

When the user release the mouse button on the text you are watching (release so it will be triggered when click and when he ended a selection), you test if one of the execCommand has been executed on the selection. In the toggle, you manually trigger this function so the button will be actualised. For more informations about the possible commands : http://msdn.microsoft.com/en-us/library/ms536679%28v=vs.85%29.aspx https://developer.mozilla.org/fr/docs/Rich-Text_Editing_in_Mozilla#Example.3A_a_simple_but_complete_Rich_Text_Editor

$('div.editable').mouseup(function() {
    if(document.queryCommandState('bold')){
        $('#toolbox #bold').wrap('<b></b>');
    } else {
        if($('#toolbox #bold').parent().is('b')) {
            $('#toolbox #bold').unwrap();
        }
    }
});

function ToggleBold() {
document.execCommand('bold',null,false);
        $('#colorpalette').fadeOut('fast');
    $('div.editable').trigger('mouseup');
}
于 2013-04-29T14:54:48.290 回答
0 
function ToggleBold() {
    document.execCommand('bold',null,false);
    $('b').on("click",function(){
        //make the B in toolbox bold
    });
}

Is how i solved it :P was quite easy

EDIT: NEVERMIND this does NOT work as intended =/

于 2013-04-30T10:26:14.337 回答