tinymce - adding a custom code / change value of a html element, when any of buttons is clicked

问题

I am using inline tinymce for editing the current content. I would like to check if the user really editing some thing before I ajax save it. I kept a hidden input and changed its value on keypress when the user updated the content. And on blur the ajax works fine.

But if the user selects a line and bolds it then I need to update the same hidden input such that I pull the ajax save again on blur, which is currently not happening, I tried tinymce onclick event but it reacts when I focus on content and not on the button click.

sample code I have used.

jscode:

tinymce.init({
    selector: ".edit_me_textimg",
    inline: true,
    menubar: false,
    plugins: [
        "advlist autolink lists link image charmap print preview anchor",
        "searchreplace visualblocks fullscreen",
        "insertdatetime media table contextmenu paste jbimages"
    ],
    toolbar: "undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify |  link image jbimages",
    contextmenu: "preview",
    setup : function(ed) {
        ed.on("click",function() {
            alert("aiyo");
        });
    }

});

html:

<input type="hidden" id="edi_feature_changed_1>" value="no"/>
        <div id="comp1" class="col-md-4 col-sm-4 edit_me_textimg edi_feature" data-comp = "">
                Some content here with image
            </div>

On keypress I chnage the value of the hidden to "yes". I need this to happen when the user clicks on bold, italic or any button in the editor.

If there is any other easier way to achieve this, I am ready to use it too. I just need a solution for this.

Let me know if you have anymore questions. Thanks.

回答1:

Seem like you need to check this:

DEMO

and after check this - link

http://www.tinymce.com/wiki.php/api4:class.tinymce.CommandEvent

Ok i think now you have got some idea about CommandEvent.

So, All you need to do is just replace this :

setup : function(ed) {
        ed.on("click",function() {
            alert("aiyo");
        });
    }

with this -

setup : function(ed) {
       ed.on('ExecCommand',function(e){
           alert(e.command, e.ui, e.value);        
        })
    }

来源：https://stackoverflow.com/questions/24801549/tinymce-adding-a-custom-code-change-value-of-a-html-element-when-any-of-but