0

我正在构建一个具有编辑器(html 编辑器)freetextbox 或 ckeditor 的系统,无论

我的问题 !

是否可以让编辑器在将链接粘贴到编辑器后识别链接?例如:如果我复制并粘贴以下链接
http://www.youtube.com/watch?v=uI40vztICwM&feature=g-logo

然后编辑器将播放 youtube 视频

如果不 !请问在编辑器中粘贴任何内容后,我可以在 javascript 中处理任何事件吗?

4

3 回答 3

2

在 CKEditor 你有paste编辑器实例的事件。它比原生更可靠,paste因为并非每个浏览器都以相同的方式触发它(Opera 根本不是这样)。此外,CKEditor 的粘贴事件很酷的一点是,您可以修改已粘贴的数据,然后再将它们插入到文档中的选择中。

这是此事件的文档:http ://docs.ckeditor.com/#!/api/CKEDITOR.editor-event-paste

注意: CKEditor 的新版本已于一周前发布,此事件已被修改,因此请确保您使用的是 CKEditor 4。

示例用法(您可以从例如CKEDITOR.instances对象获取编辑器实例,或者如果您正在使用CKEDITOR.replace()/append(),则这些方法返回编辑器实例):

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';
});
于 2012-12-04T09:40:07.830 回答
1

请在代码下方:

<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>
于 2012-12-17T20:47:56.733 回答
0

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

autolink

于 2016-12-20T12:08:10.870 回答