Tag: tinymce
Nabin Nepal (Starx) caret javascript position tinymce wysiwyg
February 24, 2013

Tinymce – Is it possible to get caret position of textarea corresponding to WYSIWYG Editor?

Question by user1643156

user1643156user1643156

I’m wondering if we can get the real caret position of textarea when the fake cursor is in certain position under WYSIWYG Editor?

To better understand the question, please see the image below

enter image description here
Under WYSIWYG mode, when the cursor is after s, we get position 53. and when the cursor is after t, we get position 79.

The code would be something like…

function getRealCaretPosition() {
    // all the dirty work goes here
}

// Ctrl + Q
if(e.ctrlKey && e.which == 81) {
    var pos = getRealCaretPosition();
    alert(pos);
}

Is this possible to be achieved, in theory?

Answer by Starx

StarxStarx

Yes, there is a topic covered on tinyMCE illustrating this:

var inst = getInstanceById('editor/elementid');
var myBookmark = inst.getBookmark();

// do something, move the cursor position
inst.moveToBookmark(myBookmark);

Source: Check other solution from here, if these dont work.

Nabin Nepal (Starx) javascript moodle tinymce
March 19, 2012

fire keyPressEvent in tinyMce

Question by MartinM

MartinMMartinM

I’m customizing tinyMCE in Moodle (e-learning). I’ve added a toolbar button which sets focus into a text area and adds two dollar signs in it.
What I need is to place cursor between those signs, so that user can start typing between them.
Probably the best approach is just to press left arrow programaticlly, isn’t it? But I can’t figure out how to do that.
Here is the code:

tinyMCE.init({
mode : "textareas",
theme : "advanced",
theme_advanced_buttons1 : "mybutton,bold,italic,underline,separator,strikethrough,justifyleft,justifycenter,justifyright, justifyfull,bullist,numlist,undo,redo,link,unlink",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
plugins : 'inlinepopups',
setup : function(ed) {
    // Add a custom button
    ed.addButton('mybutton', {
        title : 'My button',
        image : 'img/example.gif',
        onclick : function() {
            ed.focus();
            ed.selection.setContent('$$');
        }
    });
}

});
Thanks

Answer by Thariama

ThariamaThariama

This should do what you desire:

ed.addButton('mybutton', {
    title : 'My button',
    image : 'img/example.gif',
    onclick : function() {  
        ed.focus();
        ed.selection.setContent('$<span id="my_marker">u200b</span>$');
        var $marker = $(ed.getBody()).find('#my_marker');
        ed.selection.select($marker.get(0));
        $marker.remove();
    }
});

Answer by Starx

StarxStarx

You can fire a keypress event using the following snippet.

var e = jQuery.Event('keypress');
e.keyCode = 37; //Left arrow keycode 
$(document).trigger(e);

Usage might be something like

onclick : function() {
    ed.focus();
    ed.selection.setContent('$$');
    var e = jQuery.Event('keypress');
    e.keyCode = 37; //Left arrow keycode 
    $(document).trigger(e);
}
Nabin Nepal (Starx) jquery jquery-validate tinymce
June 2, 2010

How to get TinyMCE and Jquery validate to work together?

Question by chobo2

chobo2chobo2

I am using jquery validate and the jquery version of tinymce.

I found this piece of code that makes tinymce to validate itself every time something changes in it.

Hi

I am using the jquery validate with my jquery tinymce so I have this in my code

    // update validation status on change
    onchange_callback: function (editor)
    {
        tinyMCE.triggerSave();
        $("#" + editor.id).valid();
    },

This works however there is one problem. If a user copies something from word it brings all that junk styling with it what is usually over 50,000 characters. This is way over my amount of characters a user is allowed to type in.

So my jquery validation method goes off telling me that they went over the limit. In the mean time though tinymce has cleaned up that mess and it could be possible now the user has not gone over the limit.

Yet the message is still there.

So is there a better function call I can put this in? Maybe tell tinymce to delay the valid when a paste is happening, or maybe a different callback?

Anyone got any ideas?

Answer by Starx

StarxStarx

Oh yeah, I also faced this problem.

So, I fixed it by calling the validation on the click event of a button instead. 

$("#buttontosave").click(function() {
         tinyMCE.triggerSave();
         var status;
         status = $("#myform").valid(); //Validate again
         if(status==true) { 
             //Carry on
         }
         else { }
});

This works try it.

For additional resources try

http://blog.rebeccamurphey.com/2009/01/12/jquery-validation-and-tinymce/

http://tinymce.moxiecode.com/punbb/viewtopic.php?id=21588

http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/Q_23941005.html

...

Please fill the form - I will response as fast as I can!