TINYMCE solution that cannot be plugged into a media player

Source: Internet
Author: User
Tags json sin

When inserting media code with TINYMCE, the original HTML is replaced with an IMG tag, and the raw data is converted to JSON-formatted data, for example:

Raw HTML fragment:

<p><object width= "height=" "Data=" http://www.sin.com/sss.swf "type=" Application/x-shockwave-flash ">
<param name=" src "value=" http://www.sin.com/sss.swf "/></object></p>

TINYMCE Formatted HTML fragment:

To the official website and StackOverflow Check for a long time, similar problem solution seems to be configured TinyMCE valid_elements attribute, but I tried not to work.

The ultimate solution is to adopt a curve to save the nation's way, the general idea is as follows:

Htmlagilitypack is used to resolve the contents of the acquired editor.

Extract the matching video elements

Replace the element with the standard HTML media element that is formatted, such as <object>

Key points:

1,xpath expression//img[@class = "Mceitemmedia Mceitemflash"]

2,json string to. NET object conversion, do not want to define separately, tried the JSON to dynamic type, it is OK, it seems json. NET This class library is very powerful.

Paste the conversion part of the code, in the case of a number of matching elements, the way to traverse Htmlagilitypack.htmlnode has not been successful, do not know if I am not used to, or htmlagilitypack problem, the end is the use of the method of string replacement.

private String Handlemediacontent (string content)


        {


var restr = string. Empty;


restr = content;


           


String template = "&lt;object width=" {0} "height=" {1} "align=" middle "data=" {2} "type=" Application/x-shockwave-flash " &gt;&lt;param name= "src" value= "{3}"/&gt;&lt;param name= "allowFullScreen" value= "true"/&gt;&lt;param name= "quality" Value= "High"/&gt;&lt;param name= "allowscriptaccess value=" always "/&gt;&lt;/object&gt;";


htmlagilitypack.htmldocument doc = new htmlagilitypack.htmldocument ();


Doc. loadhtml (content);


var vnodes = doc. Documentnode.selectnodes ("//img[@class =" Mceitemmedia Mceitemflash "]");


if (vnodes = null)


return content;


for (var i=0;i&lt;vnodes.count;i++)


            {


//var parent = vnodes[i]. ParentNode;


               


var attr = vnodes[i]. Attributes.firstordefault (t =&gt; t.name = = "Data-mce-json");


var width = vnodes[i]. Attributes.firstordefault (t =&gt; t.name = "width");


var height = vnodes[i]. Attributes.firstordefault (t =&gt; t.name = "height");


var obj = newtonsoft.json.jsonconvert.deserializeobject&lt;dynamic&gt; (attr. Value);


               


var newnodedocument = new Htmlagilitypack.htmldocument ();


newnodedocument.loadhtml (String. Format (template,width. Value,height. Value,obj. @params. src,obj. @params. src));





Parent. InsertBefore (Newnodedocument.documentnode, vnodes[i]);


//parent. RemoveChild (Vnodes[i]);





restr = Restr.replace (vnodes[i). outerHTML, newNodeDocument.DocumentNode.OuterHtml);


               


            }


//return Doc. documentnode.outerhtml;


return restr;


        }

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.