CODEWITHSUNDEEP
javascriptjquerytinymce
littleghost76
littleghost76

Reputation: 41

tinyMCE and insertAtCaret(), alternative to tinyMCE?

I have a text area with an insertAtCaret() function that allows the users to drag and drop from a list into the text area, that's all good and dandy. My boss asked me to put tinyMCE on it, so that the users didn't see the html formatting. When I did that, my drag and drop function broke.

I understand that tinyMCE has a built-in function that allows for drag and drop, but it is not in a form we want for the system. So if anything, I also need to disable that feature (any clues on that note?)

My question is, is there an alternative to tinyMCE that will play nice with insertAtCaret? I've been searching non-stop in google, but haven't found anything really useful. Only a few posts from other people having the same issue.

Thanks in advance -V

Upvotes: 1

Views: 1411

Answers (2)

Thariama
Thariama

Reputation: 50832

Additional to what uadrive answered:

insertAtCaret won't play with any realtime editor cause they all use a contenteditable iframe. The underlying teaxtarea (or other html elment) gets hidden on initialization.

uadrive is right, you will have to add handlers to that iframe in order to do any action when you need to. If you use the the tinymce configuration parameter "paste_block_drop", you won't be able to do any drag & drop action cause if you set this parameter to true all drag and drop events will bwe blocked.

To insert code at the caret position in tinymce there is a command to use:

tinyMCE.execCommand('mceInsertContent', false, 'my new content to be added');

Here is some code to play with (that is an action i do on drop in the editor i reconstruct the inserted content and then according to my need add/filter it and insert it back into the editor).

setup : function(ed)
{
  ed.onInit.add(function(ed){
    $(ed.getDoc()).bind('drop', function(event){

        ed.content_pre = ed.getContent();
        ed.drag_content_html = event.originalEvent.dataTransfer.getData('text/html');
        ed.drag_content_plain1 = event.originalEvent.dataTransfer.getData('text/plain');
        //console.log('x', ed.content_pre, ed);
        tinymce.activeEditor = ed;
        setTimeout(function(){
            var ed = tinymce.activeEditor;
            var content_post = ed.getContent();
            var diff_front = 0;
            for (var i=0; i < ed.content_pre.length; i++) {
                if (ed.content_pre.charCodeAt(i) !== content_post.charCodeAt(i)) {
                    diff_front = i;
                    break;
                }
            }               

            if (ed.content_pre.substr(diff_front-2, 2) == '<p') diff_front -= 2;
            if (ed.content_pre.substr(diff_front-1, 1) == '<') diff_front -= 1;

            ed.setContent( ed.content_pre.substr(0, diff_front) + ed.drag_content_plain1 + ed.content_pre.substr(diff_front) );

        },0);
    });
  });
},

Upvotes: 0

uadrive
uadrive

Reputation: 1269

I too have run into this issue. The problem is that most of these editors use an iframe to display the html and just hide the input field. So you need to find and bind the draggable droppable to the iframe and fire an event to detect and handle that.

I did something similar with CKEditor, but instead of dragging, I just do an onclick event that places some html at the caret. Sample below:

<ul class="dis-tags">
    <li title="Id of the soo. This is useful for links and reference.">[SooID]</li>
    <li title="The user first name.">[FirstName]</li>
    <li title="The user last name.">[LastName]</li>
</ul>

// used to set the drag/drop of the tags
$('.dis-tags li').click(function () {
   CKEDITOR.instances.Message.insertHtml($(this).text());
   return false
});

Upvotes: 1

Related Questions