我正在构建一个具有编辑器(html 编辑器)freetextbox 或 ckeditor 的系统,无论
我的问题 !
是否可以让编辑器在将链接粘贴到编辑器后识别链接?例如:如果我复制并粘贴以下链接
http://www.youtube.com/watch?v=uI40vztICwM&feature=g-logo
然后编辑器将播放 youtube 视频
如果不 !请问在编辑器中粘贴任何内容后,我可以在 javascript 中处理任何事件吗?
我正在构建一个具有编辑器(html 编辑器)freetextbox 或 ckeditor 的系统,无论
我的问题 !
是否可以让编辑器在将链接粘贴到编辑器后识别链接?例如:如果我复制并粘贴以下链接
http://www.youtube.com/watch?v=uI40vztICwM&feature=g-logo
然后编辑器将播放 youtube 视频
如果不 !请问在编辑器中粘贴任何内容后,我可以在 javascript 中处理任何事件吗?
在 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';
});
请在代码下方:
<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>
No need to scratch head anymore. There is already a plugin called autolink
available for this for ckeditor
. Please follow below link