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 ?

Answer 1

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>

Answer 2

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';
});

Answer 3

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

autolink