插入媒体插件时如何防止tinymce删除url源前缀？
Posted
技术标签:
【中文标题】插入媒体插件时如何防止tinymce删除url源前缀？【英文标题】：How to prevent tinymce remove url source prefix when insert media plugin? 【发布时间】：2017-03-14 01:10:30 【问题描述】：我想使用媒体插件添加这个“https://www.youtube.com/embed/EWiMBUWyrqo”youtube 链接。但是链接被转换为“//www.youtube.com/embed/EWiMBUWyrqo” 如何解决问题。谢谢
【问题讨论】：
【参考方案1】：在tinymce文档中搜索，发现http://archive.tinymce.com/wiki.php/Configuration3x:convert_urls
通过此链接https://www.tinymce.com/docs/demo/url-conversion/
无法测试它，但也许它会为你工作
【讨论】：
【参考方案2】：tinyMCE 在媒体插件 (plugin.js) 中使用转换 url (urlPattern) 在文件 plugin.js（第 455 行）中：
之前：
regex: /youtu\.be\/([\w\-.]+)/,
type: 'iframe', w: 560, h: 314,
url: '//www.youtube.com/embed/$1',
allowFullscreen: true
,
之后：
regex: /youtu\.be\/([\w\-.]+)/,
type: 'iframe', w: 560, h: 314,
url: 'https://www.youtube.com/embed/$1',
allowFullscreen: true
,
请注意，如果您在“npm i”或“npm update”时从 node_modules 安装插件，所有这些都会被删除。将插件添加到资产/
【讨论】：
【参考方案3】：我确实遇到了这些问题，我通过编辑 tinymce_5.2.2\plugins\media\plugin.min.js
H=[regex:/youtu\.be\/([\w\-_\?&=.]+)/i,type:"iframe",w:560,h:314,url:"https://www.youtube.com/embed/$1",allowFullscreen:!0,
regex:/youtube\.com(.+)v=([^&]+)(&([a-z0-9&=\-_]+))?/i,type:"iframe",w:560,h:314,url:"https://www.youtube.com/embed/$2?$4",allowFullscreen:!0,
regex:/youtube.com\/embed\/([a-z0-9\?&=\-_]+)/i,type:"iframe",w:560,h:314,url:"https://www.youtube.com/embed/$1",allowFullscreen:!0,
tinymce_5.2.2\plugins\media\plugin.min.js 固定版本的完整代码
是
!function()
"use strict";var e,t,r,n,i=tinymce.util.Tools.resolve("tinymce.PluginManager"),o=tinymce.util.Tools.resolve("tinymce.Env"),v=tinymce.util.Tools.resolve("tinymce.util.Tools"),w=function(e)return e.getParam("media_scripts"),b=function(e)return e.getParam("audio_template_callback"),y=function(e)return e.getParam("video_template_callback"),a=function(e)return e.getParam("media_live_embeds",!0),u=function(e)return e.getParam("media_filter_html",!0),s=function(e)return e.getParam("media_url_resolver"),m=function(e)return e.getParam("media_alt_source",!0),d=function(e)return e.getParam("media_poster",!0),h=function(e)return e.getParam("media_dimensions",!0),f=function(e)var t=e,r=function()return t;returnget:r,set:function(e)t=e,clone:function()return f(r()),c=function(),l=function(e)return function()return e,p=l(!1),g=l(!0),x=function()return O,O=(e=function(e)return e.isNone(),n=fold:function(e,t)return e(),is:p,isSome:p,isNone:g,getOr:r=function(e)return e,getOrThunk:t=function(e)return e(),getOrDie:function(e)throw new Error(e||"error: getOrDie called on none."),getOrNull:l(null),getOrUndefined:l(undefined),or:r,orThunk:t,map:x,each:c,bind:x,exists:p,forall:g,filter:x,equals:e,equals_:e,toArray:function()return[],toString:l("none()"),Object.freeze&&Object.freeze(n),n),j=function(r)var e=l(r),t=function()return i,n=function(e)return e(r),i=fold:function(e,t)return t(r),is:function(e)return r===e,isSome:g,isNone:p,getOr:e,getOrThunk:e,getOrDie:e,getOrNull:e,getOrUndefined:e,or:t,orThunk:t,map:function(e)return j(e(r)),each:function(e)e(r),bind:n,exists:n,forall:n,filter:function(e)return e(r)?i:O,toArray:function()return[r],toString:function()return"some("+r+")",equals:function(e)return e.is(r),equals_:function(e,t)return e.fold(p,function(e)return t(r,e));return i,_=x,S=function(e)return null===e||e===undefined?O:j(e),k=Object.hasOwnProperty,N=function(e,t)return M(e,t)?S(e[t]):_(),M=function(e,t)return k.call(e,t),T=tinymce.util.Tools.resolve("tinymce.dom.DOMUtils"),z=tinymce.util.Tools.resolve("tinymce.html.SaxParser"),A=function(e,t)if(e)for(var r=0;r<e.length;r++)if(-1!==t.indexOf(e[r].filter))return e[r],C=T.DOM,$=function(e)return e.replace(/px$/,""),P=function(a,e)var c=f(!1),u=;return z(validate:!1,allow_conditional_comments:!0,special:"script,noscript",start:function(e,t)if(c.get());else if(M(t.map,"data-ephox-embed-iri"))c.set(!0),i=(n=t).map.style,o=i?C.parseStyle(i):,u=type:"ephox-embed-iri",source1:n.map["data-ephox-embed-iri"],source2:"",poster:"",width:N(o,"max-width").map($).getOr(""),height:N(o,"max-height").map($).getOr("");elseif(u.source1||"param"!==e||(u.source1=t.map.movie),"iframe"!==e&&"object"!==e&&"embed"!==e&&"video"!==e&&"audio"!==e||(u.type||(u.type=e),u=v.extend(t.map,u)),"script"===e)var r=A(a,t.map.src);if(!r)return;u=type:"script",source1:t.map.src,width:r.width,height:r.height"source"===e&&(u.source1?u.source2||(u.source2=t.map.src):u.source1=t.map.src),"img"!==e||u.poster||(u.poster=t.map.src)var n,i,o).parse(e),u.source1=u.source1||u.src||u.data,u.source2=u.source2||"",u.poster=u.poster||"",u,F=tinymce.util.Tools.resolve("tinymce.util.Promise"),D=function(e)var t=mp3:"audio/mpeg",wav:"audio/wav",mp4:"video/mp4",webm:"video/webm",ogg:"video/ogg",swf:"application/x-shockwave-flash"[e.toLowerCase().split(".").pop()];return t||"",L=tinymce.util.Tools.resolve("tinymce.html.Schema"),E=tinymce.util.Tools.resolve("tinymce.html.Writer"),J=T.DOM,R=function(e)return/^[0-9.]+$/.test(e)?e+"px":e,U=function(e,t)for(var r in t)var n=""+t[r];if(e.map[r])for(var i=e.length;i--;)var o=e[i];o.name===r&&(n?(e.map[r]=n,o.value=n):(delete e.map[r],e.splice(i,1)))else n&&(e.push(name:r,value:n),e.map[r]=n),W=function(e,c,u)var s,l=E(),m=f(!1),d=0;return z(validate:!1,allow_conditional_comments:!0,special:"script,noscript",comment:function(e)l.comment(e),cdata:function(e)l.cdata(e),text:function(e,t)l.text(e,t),start:function(e,t,r)if(m.get());else if(M(t.map,"data-ephox-embed-iri"))m.set(!0),n=c,o=(i=t).map.style,(a=o?J.parseStyle(o):)["max-width"]=R(n.width),a["max-height"]=R(n.height),U(i,style:J.serializeStyle(a));elseswitch(e)case"video":case"object":case"embed":case"img":case"iframe":c.height!==undefined&&c.width!==undefined&&U(t,width:c.width,height:c.height)if(u)switch(e)case"video":U(t,poster:c.poster,src:""),c.source2&&U(t,src:"");break;case"iframe":U(t,src:c.source1);break;case"source":if(++d<=2&&(U(t,src:c["source"+d],type:c["source"+d+"mime"]),!c["source"+d]))return;break;case"img":if(!c.poster)return;s=!0var n,i,o,a;l.start(e,t,r),end:function(e)if(!m.get())if("video"===e&&u)for(var t=1;t<=2;t++)if(c["source"+t])var r=[];r.map=,d<t&&(U(r,src:c["source"+t],type:c["source"+t+"mime"]),l.start("source",r,!0))if(c.poster&&"object"===e&&u&&!s)var n=[];n.map=,U(n,src:c.poster,width:c.width,height:c.height),l.start("img",n,!0)l.end(e),L()).parse(e),l.getContent(),
H=[regex:/youtu\.be\/([\w\-_\?&=.]+)/i,type:"iframe",w:560,h:314,url:"https://www.youtube.com/embed/$1",allowFullscreen:!0,
regex:/youtube\.com(.+)v=([^&]+)(&([a-z0-9&=\-_]+))?/i,type:"iframe",w:560,h:314,url:"https://www.youtube.com/embed/$2?$4",allowFullscreen:!0,
regex:/youtube.com\/embed\/([a-z0-9\?&=\-_]+)/i,type:"iframe",w:560,h:314,url:"https://www.youtube.com/embed/$1",allowFullscreen:!0,
regex:/vimeo\.com\/([0-9]+)/,type:"iframe",w:425,h:350,url:"https://player.vimeo.com/video/$1?title=0&byline=0&portrait=0&color=8dc7dc",allowFullscreen:!0,regex:/vimeo\.com\/(.*)\/([0-9]+)/,type:"iframe",w:425,h:350,url:"https://player.vimeo.com/video/$2?title=0&byline=0",allowFullscreen:!0,regex:/maps\.google\.([a-z]2,3)\/maps\/(.+)msid=(.+)/,type:"iframe",w:425,h:350,url:'//maps.google.com/maps/ms?msid=$2&output=embed"',allowFullscreen:!1,regex:/dailymotion\.com\/video\/([^_]+)/,type:"iframe",w:480,h:270,url:"https://www.dailymotion.com/embed/video/$1",allowFullscreen:!0,regex:/dai\.ly\/([^_]+)/,type:"iframe",w:480,h:270,url:"https://www.dailymotion.com/embed/video/$1",allowFullscreen:!0],I=function(r,e)var n=v.extend(,e);if(!n.source1&&(v.extend(n,P(w(r),n.embed)),!n.source1))return"";n.source2||(n.source2=""),n.poster||(n.poster=""),n.source1=r.convertURL(n.source1,"source"),n.source2=r.convertURL(n.source2,"source"),n.source1mime=D(n.source1),n.source2mime=D(n.source2),n.poster=r.convertURL(n.poster,"poster");var t,i,o=(t=n.source1,0<(i=H.filter(function(e)return e.regex.test(t))).length?v.extend(,i[0],url:function(e,t)for(var r=e.regex.exec(t),n=e.url,i=function(e)n=n.replace("$"+e,function()return r[e]?r[e]:""),o=0;o<r.length;o++)i(o);return n.replace(/\?$/,"")(i[0],t)):null);if(o&&(n.source1=o.url,n.type=o.type,n.allowFullscreen=o.allowFullscreen,n.width=n.width||o.w,n.height=n.height||o.h),n.embed)return W(n.embed,n,!0);var a=A(w(r),n.source1);a&&(n.type="script",n.width=a.width,n.height=a.height);var c,u,s,l,m,d,h,f,p=b(r),g=y(r);return n.width=n.width||300,n.height=n.height||150,v.each(n,function(e,t)n[t]=r.dom.encode(e)),"iframe"===n.type?(f=(h=n).allowFullscreen?' allowFullscreen="1"':"",'<iframe src="'+h.source1+'" '+f+"></iframe>"):"application/x-shockwave-flash"===n.source1mime?(d='<object data="'+(m=n).source1+'" type="application/x-shockwave-flash">',m.poster&&(d+='<img src="'+m.poster+'" />'),d+="</object>"):-1!==n.source1mime.indexOf("audio")?(s=n,(l=p)?l(s):'<audio controls="controls" src="'+s.source1+'">'+(s.source2?'\n<source src="'+s.source2+'"'+(s.source2mime?' type="'+s.source2mime+'"':"")+" />\n":"")+"</audio>"):"script"===n.type?'<script src="'+n.source1+'"><\/script>':(c=n,(u=g)?u(c):'<video '+(c.poster?' poster="'+c.poster+'"':"")+' controls="controls">\n<source src="'+c.source1+'"'+(c.source1mime?' type="'+c.source1mime+'"':"")+" />\n"+(c.source2?'<source src="'+c.source2+'"'+(c.source2mime?' type="'+c.source2mime+'"':"")+" />\n":"")+"</video>"),q=,V=function(t)return function(e)return I(t,e),B=function(e,t)var r,n,i,o,a,c=s(e);return c?(i=t,o=V(e),a=c,new F(function(t,e)var r=function(e)return e.html&&(q[i.source1]=e),t(url:i.source1,html:e.html?e.html:o(i));q[i.source1]?r(q[i.source1]):a(url:i.source1,r,e))):(r=t,n=V(e),new F(function(e)e(html:n(r),url:r.source1))),G=function(e)return q.hasOwnProperty(e),K=function(t)return function(e)return e?e.style[t].replace(/px$/,""):"",Q=function(n)return function(e,t)var r;e&&(e.style[n]=/^[0-9.]+$/.test(r=t)?r+"px":r),X=getMaxWidth:K("maxWidth"),getMaxHeight:K("maxHeight"),setMaxWidth:Q("maxWidth"),setMaxHeight:Q("maxHeight"),Y=function(e,t)e.state.set("oldVal",e.value()),t.state.set("oldVal",t.value()),Z=function(e,t)var r=e.find("#width")[0],n=e.find("#height")[0],i=e.find("#constrain")[0];r&&n&&i&&t(r,n,i.checked()),ee=function(e,t,r)var n=e.state.get("oldVal"),i=t.state.get("oldVal"),o=e.value(),a=t.value();r&&n&&i&&o&&a&&(o!==n?(a=Math.round(o/n*a),isNaN(a)||t.value(a)):(o=Math.round(a/i*o),isNaN(o)||e.value(o))),Y(e,t),te=function(e)Z(e,ee),re=function(e)var t=function()e(function(e)te(e));returntype:"container",label:"Dimensions",layout:"flex",align:"center",spacing:5,items:[name:"width",type:"textbox",maxLength:5,size:5,onchange:t,ariaLabel:"Width",type:"label",text:"x",name:"height",type:"textbox",maxLength:5,size:5,onchange:t,ariaLabel:"Height",name:"constrain",type:"checkbox",checked:!0,text:"Constrain proportions"],ne=function(e)Z(e,Y),ie=te,oe=o.ie&&o.ie<=8?"onChange":"onInput",ae=function(r)return function(e)var t=e&&e.msg?"Media embed handler error: "+e.msg:"Media embed handler threw unknown error.";r.notificationManager.open(type:"error",text:t),ce=function(i,o)return function(e)var t=e.html,r=i.find("#embed")[0],n=v.extend(P(w(o),t),source1:e.url);i.fromJSON(n),r&&(r.value(t),ie(i)),ue=function(e,t)var r=e.dom.select("img[data-mce-object]");e.insertContent(t),function(e,t)var r,n,i=e.dom.select("img[data-mce-object]");for(r=0;r<t.length;r++)for(n=i.length-1;0<=n;n--)t[r]===i[n]&&i.splice(n,1);e.selection.select(i[0])(e,r),e.nodeChanged(),se=function(n)var i,t,e,r,o,a=[name:"source1",type:"filepicker",filetype:"media",size:40,autofocus:!0,label:"Source",onpaste:function()setTimeout(function()B(n,i.toJSON()).then(ce(i,n))["catch"](ae(n)),1),onchange:function(e)var r,t;B(n,i.toJSON()).then(ce(i,n))["catch"](ae(n)),r=i,t=e.meta,v.each(t,function(e,t)r.find("#"+t).value(e)),onbeforecall:function(e)e.meta=i.toJSON()],c=[];if(m(n)&&c.push(name:"source2",type:"filepicker",filetype:"media",size:40,label:"Alternative source"),d(n)&&c.push(name:"poster",type:"filepicker",filetype:"image",size:40,label:"Poster"),h(n))var u=re(function(e)e(i),t=i.toJSON(),i.find("#embed").value(W(t.embed,t)));a.push(u)r=(e=n).selection.getNode(),o=r.getAttribute("data-ephox-embed-iri"),t=o?source1:o,"data-ephox-embed-iri":o,width:X.getMaxWidth(r),height:X.getMaxHeight(r):r.getAttribute("data-mce-object")?P(w(e),e.serializer.serialize(r,selection:!0)):;var s=id:"mcemediasource",type:"textbox",flex:1,name:"embed",value:function(e)var t=e.selection.getNode();if(t.getAttribute("data-mce-object")||t.getAttribute("data-ephox-embed-iri"))return e.selection.getContent()(n),multiline:!0,rows:5,label:"Source";s[oe]=function()t=v.extend(,P(w(n),this.value())),this.parent().parent().fromJSON(t);var l=[title:"General",type:"form",items:a,title:"Embed",type:"container",layout:"flex",direction:"column",align:"stretch",padding:10,spacing:10,items:[type:"label",text:"Paste your embed code below:",forId:"mcemediasource",s]];0<c.length&&l.push(title:"Advanced",type:"form",items:c),i=n.windowManager.open(title:"Insert/edit media",data:t,bodyType:"tabpanel",body:l,onSubmit:function()var t,e;ie(i),t=n,(e=i.toJSON()).embed=W(e.embed,e),e.embed&&G(e.source1)?ue(t,e.embed):B(t,e).then(function(e)ue(t,e.html))["catch"](ae(t))),ne(i),le=function(e)returnshowDialog:function()se(e),me=function(e)e.addCommand("mceMedia",function()se(e)),de=tinymce.util.Tools.resolve("tinymce.html.Node"),he=function(o,e)if(!1===u(o))return e;var a,c=E();return z(validate:!1,allow_conditional_comments:!1,special:"script,noscript",comment:function(e)c.comment(e),cdata:function(e)c.cdata(e),text:function(e,t)c.text(e,t),start:function(e,t,r)if(a=!0,"script"!==e&&"noscript"!==e&&"svg"!==e)for(var n=t.length-1;0<=n;n--)var i=t[n].name;0===i.indexOf("on")&&(delete t.map[i],t.splice(n,1)),"style"===i&&(t[n].value=o.dom.serializeStyle(o.dom.parseStyle(t[n].value),e))c.start(e,t,r),a=!1,end:function(e)a||c.end(e),L()).parse(e),c.getContent(),fe=function(e,t)var r,n=t.name;return(r=new de("img",1)).shortEnded=!0,ge(e,t,r),r.attr(width:t.attr("width")||"300",height:t.attr("height")||("audio"===n?"30":"150"),style:t.attr("style"),src:o.transparentSrc,"data-mce-object":n,"class":"mce-object mce-object-"+n),r,pe=function(e,t)var r,n,i,o=t.name;return(r=new de("span",1)).attr(contentEditable:"false",style:t.attr("style"),"data-mce-object":o,"class":"mce-preview-object mce-object-"+o),ge(e,t,r),(n=new de(o,1)).attr(src:t.attr("src"),allowfullscreen:t.attr("allowfullscreen"),style:t.attr("style"),"class":t.attr("class"),width:t.attr("width"),height:t.attr("height"),frameborder:"0"),(i=new de("span",1)).attr("class","mce-shim"),r.append(n),r.append(i),r,ge=function(e,t,r)var n,i,o,a,c;for(a=(o=t.attributes).length;a--;)n=o[a].name,i=o[a].value,"width"!==n&&"height"!==n&&"style"!==n&&("data"!==n&&"src"!==n||(i=e.convertURL(i,n)),r.attr("data-mce-p-"+n,i));(c=t.firstChild&&t.firstChild.value)&&(r.attr("data-mce-html",escape(he(e,c))),r.firstChild=null),ve=function(e)for(;e=e.parent;)if(e.attr("data-ephox-embed-iri"))return!0;return!1,we=function(i)return function(e)for(var t,r,n=e.length;n--;)(t=e[n]).parent&&(t.parent.attr("data-mce-object")||("script"!==t.name||(r=A(w(i),t.attr("src"))))&&(r&&(r.width&&t.attr("width",r.width.toString()),r.height&&t.attr("height",r.height.toString())),"iframe"===t.name&&a(i)&&o.ceFalse?ve(t)||t.replace(pe(i,t)):ve(t)||t.replace(fe(i,t)))),be=function(d)d.on("preInit",function()var t=d.schema.getSpecialElements();v.each("video audio iframe object".split(" "),function(e)t[e]=new RegExp("</"+e+"[^>]*>","gi"));var r=d.schema.getBoolAttrs();v.each("webkitallowfullscreen mozallowfullscreen allowfullscreen".split(" "),function(e)r[e]=),d.parser.addNodeFilter("iframe,video,audio,object,embed,script",we(d)),d.serializer.addAttributeFilter("data-mce-object",function(e,t)for(var r,n,i,o,a,c,u,s,l=e.length;l--;)if((r=e[l]).parent)for(u=r.attr(t),n=new de(u,1),"audio"!==u&&"script"!==u&&((s=r.attr("class"))&&-1!==s.indexOf("mce-preview-object")?n.attr(width:r.firstChild.attr("width"),height:r.firstChild.attr("height")):n.attr(width:r.attr("width"),height:r.attr("height"))),n.attr(style:r.attr("style")),i=(o=r.attributes).length;i--;)var m=o[i].name;0===m.indexOf("data-mce-p-")&&n.attr(m.substr(11),o[i].value)"script"===u&&n.attr("type","text/javascript"),(a=r.attr("data-mce-html"))&&((c=new de("#text",3)).raw=!0,c.value=he(d,unescape(a)),n.append(c)),r.replace(n))),d.on("setContent",function()d.$("span.mce-preview-object").each(function(e,t)var r=d.$(t);0===r.find("span.mce-shim",t).length&&r.append('<span class="mce-shim"></span>'))),ye=function(e)e.on("ResolveName",function(e)var t;1===e.target.nodeType&&(t=e.target.getAttribute("data-mce-object"))&&(e.name=t)),xe=function(t)t.on("click keyup",function()var e=t.selection.getNode();e&&t.dom.hasClass(e,"mce-preview-object")&&t.dom.getAttrib(e,"data-mce-selected")&&e.setAttribute("data-mce-selected","2")),t.on("ObjectSelected",function(e)var t=e.target.getAttribute("data-mce-object");"audio"!==t&&"script"!==t||e.preventDefault()),t.on("objectResized",function(e)var t,r=e.target;r.getAttribute("data-mce-object")&&(t=r.getAttribute("data-mce-html"))&&(t=unescape(t),r.setAttribute("data-mce-html",escape(W(t,width:e.width,height:e.height))))),Oe=function(e)e.addButton("media",tooltip:"Insert/edit media",cmd:"mceMedia",stateSelector:["img[data-mce-object]","span[data-mce-object]","div[data-ephox-embed-iri]"]),e.addMenuItem("media",icon:"media",text:"Media",cmd:"mceMedia",context:"insert",prependToContext:!0);i.add("media",function(e)return me(e),Oe(e),ye(e),be(e),xe(e),le(e))();【讨论】：
以上是关于插入媒体插件时如何防止tinymce删除url源前缀？的主要内容，如果未能解决你的问题，请参考以下文章