我正在尝试自己制作 tinymce 的媒体插件,该插件会将视频网址转换为iframe。
我已经在onInit()
中进行了此操作,现在我想在onpaste()
事件中进行申请。
我正在尝试粘贴或添加内容后获取编辑器的文本。但是它给出的是以前的文本,该文本是在粘贴或添加新文本(或其他任何东西)之前保存的。
tinymce.init({
selector: "textarea.mceEditor",
theme: "modern",
image_caption: true,
plugins: [
"searchreplace visualblocks visualchars wordcount code fullscreen table directionality image link insertdatetime emoticons advlist autolink lists link image charmap print preview hr anchor pagebreak nonbreaking save contextmenu template paste textcolor colorpicker textpattern directionality spellchecker"
],
spellchecker_rpc_url: '<?=base_url()?>admin/spell_checker',
paste_as_text: true,
spellchecker_languages : "+English=en",
setup: function(editor) {
editor.on('init', function(e) {
var videoEmbed = {
invoke: function(){
var html = document.getElementById('news_content').textContent;
//console.log(html);
var new_html = videoEmbed.convertMedia(html);
tinyMCE.activeEditor.setContent(new_html);
},
convertMedia: function(html){
var vimeo_anchor_pattern = /[^<p>]*(<a href="([^"]+))(?:http?s?:\/\/)?(?:www\.)?(?:vimeo\.com)\/(\d+)\/?([^<]+)<\/a>/g;
var vimeo_text_pattern = /(?:http?s?:\/\/)?(?:www\.)?(?:vimeo\.com)\/(\d+)\/?/g;
var youtube_anchor_pattern = /[^<p>]*(<a href="([^"]+))(?:http?s?:\/\/)?(?:www\.)?youtu(?:be\.com\/watch\?v=|\.be\/)([\w\-\_]*)(&(amp;)?[\w\?=]*)?([^<]+)<\/a>/g;
var youtube_text_pattern = /(?:http?s?:\/\/)?(?:www\.)?youtu(?:be\.com\/watch\?v=|\.be\/)([\w\-\_]*)(&(amp;)?[\w\?=]*)?/g;
var dailymotion_anchor_pattern = /[^<p>]*(<a href="([^"]+))(?:http?s?:\/\/)?(?:www\.)?(?:dailymotion\.com(?:\/video|\/hub)|dai\.ly)\/([0-9a-z]+)(?:[\-_0-9a-zA-Z]+#video=([a-z0-9]+))?([^<]+)<\/a>/g;
var dailymotion_text_pattern = /(?:http?s?:\/\/)?(?:www\.)?(?:dailymotion\.com(?:\/video|\/hub)|dai\.ly)\/([0-9a-z]+)(?:[\-_0-9a-zA-Z]+#video=([a-z0-9]+))?/g;
// var facebook_anchor_pattern = /[^<p>]*(<a href="([^"]+))(?:http?s?:\/\/)?(?:www\.|web\.|m\.)(?:facebook\.com(?:\/video.php\?v=\d+)|(?:facebook\.com\/\S+)\/videos\/(\d+))\/?([^<]+)<\/a>/g;
var facebook_text_pattern = /(?:http?s?:\/\/)?(?:www\.|web\.|m\.)(?:facebook\.com(?:\/video.php\?v=\d+)|(?:facebook\.com\/)(\S+)\/videos\/(\d+))\/?/g;
if(vimeo_anchor_pattern.test(html)){
var replacement = '<iframe width="420" height="236" src="https://player.vimeo.com/video/$3" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>';
var html = html.replace(vimeo_anchor_pattern, replacement);
}
if(vimeo_text_pattern.test(html)){
var replacement = '<iframe width="420" height="236" src="https://player.vimeo.com/video/$1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>';
var html = html.replace(vimeo_text_pattern, replacement);
}
if(youtube_anchor_pattern.test(html)){
var replacement = '<iframe width="420" height="236" src="http://www.youtube.com/embed/$3" frameborder="0" allowfullscreen></iframe>';
var html = html.replace(youtube_anchor_pattern, replacement);
}
if(youtube_text_pattern.test(html)){
var replacement = '<iframe width="420" height="236" src="http://www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe>';
var html = html.replace(youtube_text_pattern, replacement);
}
if(dailymotion_anchor_pattern.test(html)){
var replacement = '<iframe width="420" height="236" src="https://www.dailymotion.com/embed/video/$3" frameborder="0" allowfullscreen></iframe>';
var html = html.replace(dailymotion_anchor_pattern, replacement);
}
if(dailymotion_text_pattern.test(html)){
var replacement = '<iframe width="420" height="236" src="https://www.dailymotion.com/embed/video/$1" frameborder="0" allowfullscreen></iframe>';
var html = html.replace(dailymotion_text_pattern, replacement);
}
// if(facebook_anchor_pattern.test(html)){
// var replacement = '<iframe width="420" height="236" src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2F$2%2Fvideos%2F$3" frameborder="0" allowfullscreen></iframe>';
// var html = html.replace(facebook_anchor_pattern, replacement);
// }
if(facebook_text_pattern.test(html)){
var replacement = '<iframe width="420" height="236" src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2F$1%2Fvideos%2F$2" frameborder="0" allowfullscreen></iframe>';
var html = html.replace(facebook_text_pattern, replacement);
}
// console.log(html);
return html;
}
}
setTimeout(function(){
videoEmbed.invoke();
},500);
});
},
paste_preprocess: function(pl , html) {
//provinging the pasted content only
var paste_html = tinymce.activeEditor.getContent({format: 'text'});
console.log(paste_html);
//giving the previous content which was saved before paste or add anything in editor.
var html = document.getElementById('news_content').textContent;
console.log(html);
},
我希望在粘贴后输出,或者在编辑器中添加新文本/任何内容,其中包含这两个事件的更新内容,然后在粘贴上添加和粘贴。