Possible to let the editor Recognize the link

Question

I m building a system which have editor ( html editor ) freetextbox or ckeditor no matter

my Question !

Its Possible to let the editor Recognize the link after paste it in the editor ? for example : if i copy and paste the following link
http://www.youtube.com/watch?v=uI40vztICwM&feature=g-logo

then the editor shall play youtube video

if not ! please there are any events that i can handle in javascript after paste any content in the editor ?

Any input in html have onchange event. Try use it, but i think you must create your own recognize function. — Burlak Ilia, Dec 04 '12 at 06:48
i could create the recognize function its easy but i need the event which can tell me the paste content — user1860403, Dec 04 '12 at 06:49

score 2 · Answer 1 · answered Dec 04 '12 at 09:40

In CKEditor you have paste event of editor instance. It's much more reliable than native paste because not every browser fires it in the same way (Opera doesn't that at all). Also, cool thing about CKEditor's paste event is that you can modify data that were pasted before they will be inserted into selection in document.

Here's documentation of this event: http://docs.ckeditor.com/#!/api/CKEDITOR.editor-event-paste

Note: New version of CKEditor has been released week ago and this event had been modified, so ensure that you're using CKEditor 4.

Example usage (you can get editor instance from e.g. CKEDITOR.instances object or if you're using CKEDITOR.replace()/append() then editor instance is returned by these methods):

editor.on( 'paste', function( evt ) {
   var data = evt.data;
   data.dataValue = data.dataValue.replace(
       /(http:\/\/[^\s]+)/gi, '<a href="$1">$1</a>' );
   // Text could be pasted, but you transformed it into HTML so update that.
   data.type = 'html';
});

score 1 · Accepted Answer · answered Dec 17 '12 at 20:47

Please Have Below the code :

<script>

    CKEDITOR.on('instanceReady', function(e){
     var editor = e.editor;
     editor.on('paste', function(evnt){

     var data = evnt.data;

      // youtube recognize 
       data.dataValue = data.dataValue.replace(/(?:http:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/g, '<iframe width="420" height="345" src="http://www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe>');

      //image recognize

         data.dataValue = data.dataValue.replace(/(https?:\/\/.*\.(?:png|jpg))/i,'<img src="$1" width="450" height="199" alt="alt description" title="image title" class="image_classes" />');

       alert(data);
       data.type = 'html';


     });
     });


        </script>

score 0 · Answer 3 · answered Dec 20 '16 at 12:08

0

No need to scratch head anymore. There is already a plugin called autolink available for this for ckeditor. Please follow below link

autolink

answered Dec 20 '16 at 12:08

Imamudin Naseem

1,604
18
21

Possible to let the editor Recognize the link

3 Answers3