Question

我正在构建一个具有编辑器（html编辑器）freetextbox或ckeditor的系统

我的问题！

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

然后编辑器将播放youtube视频

如果没有！请在编辑器中粘贴任何内容后，我可以在javascript中处理任何事件吗？

Answer 1

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

Answer 2

请在代码下面：

<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 3

不再需要刮头了。 autolink已经有一个名为ckeditor的插件。请点击以下链接

autolink

可以让编辑器识别链接

3 个答案: