2011-01-20 3 views
0

당신이 변환 얼마나 PHP를 사용 ...AS3의 CSS3에 HTML 다시

<P ALIGN="LEFT"> 
      <FONT FACE="Helvetica" SIZE="25" COLOR="#000000" LETTERSPACING="0" KERNING="0"> 
       <B> 
        <I>Cras id sapien odio. Vestibulum </I> 
       </B> 
        <FONT COLOR="#006633"> 
         <B> 
          <I>ante</I> 
         </B> 
         <FONT SIZE="19"> 
          ipsum primis in faucibus orci luctus et <I>ante ultrices</I> posuere cubilia Curae; 
          <FONT COLOR="#000000"></FONT> 
         </FONT> 
        </FONT> 
      </FONT> 
     </P> 
내가 평평하고 DOM에서 재귀를 줄이기 위해 노력하고

<p><font style="etc">Cras id sapien odio. Vestibulum</font><font style="etc">ante</font><font style="etc">ipsum primis in faucibus orci luctus et ante ultrices posuere cubilia Curae</font></p> 

같은 뭔가

하고, 다음 html 1.0으로 다시 전환해야합니다. 내가 쓰고있는이 코드는 플래시와 CSS3 사이에서 HTML을 움직이면 iOS 사용자가 HTML 애니메이션을 볼 수 있고 다른 모든 사람들은 플래시를보고있다. 불행히도 첫 번째 HTML은 플래시 출력입니다. 나는 DOMDocument, 어떤 아이디어로 장난하고 있습니까?

+0

당신이 "플래시 출력 HTML"무슨 뜻인지 명확히 할 수 있습니까? – horatio

+0

HTML 형식의 플래시 텍스트 필드에서 텍스트를 저장하고 있습니다. 플래시는 HTML 1.0 사양 만 허용하므로 플래시에서 요청한 데이터입니다. – mconnors

+0

style = "etc"는 무엇인가요? 그것들은 소스 html에 맞지 않는 것처럼 보입니다. –

답변

1

좋아요, 지금 생각합니다. 조금 더 오래 걸렸지 만, 기대했던 것보다 조금 깔끔 해 보이지만 플래시 글꼴에서 HTML 로의 "번역"을 처리 할 정적 유틸리티 클래스를 작성했습니다. 다음과 같이 작동합니다.

  1. 모든 텍스트를 <![CDATA[]]> 태그로 줄 바꿈하십시오. 이것이 ignoreWhitespace=false에 관계없이 XML.normalize()이 단지 공백을 버리는 것을 알아 내는데 거의 3 시간이 걸린 XML 변환을 사용할 때 공백을 안전하게 보존하는 유일한 방법입니다.
  2. 모든 글꼴 정보를 <style> 노드로 표준화합니다. 이것은 모든 <b>, <u> 태그 등을 대체하지만 DOM 계층 구조는 유지합니다. 모든 스타일 정보는 Flash가 내부적으로 CSS 구문 분석에 사용하는 동일한 이름의 속성으로 변환됩니다.
  3. 모든 <style> 노드를 <span style="...">으로 바꾸고 결합 된 스타일 속성을 포함합니다. 귀하의 예는 <font> 개의 태그가 있지만 HTML5에서는 지원되지 않습니다.
  4. <![CDATA[]]> 요소를 푸십시오.

결과는 여전히 평평하지만, <span> 요소가 허용되는 중첩, 그리고 그것은 일을하지 않는 : 나는 간단한 HTML 페이지에 출력을 붙여 넣기하고 플래시에서와 같이 거의 동일 보인다.

참고 : 플래시의 허용 된 HTML 요소 (<img> 등)를 모두 테스트하지는 않았으므로 모든 기능이 작동한다고 보장 할 수는 없지만 귀하의 모든 요소에 대해 정상적으로 작동해야합니다. 예.

여기에 여러분의 의견과 비판을 기대하고, 내 수업의 :

사용법 : var html:String = XMLTextUtil.flashTextToHtml (textField.htmlText);

package 
{ 
    public class XMLTextUtil 
    { 
     private static var mapping : Array = [ {html:"align", xml:"stageAlign"}, 
      {html:"face", xml:"fontFamily"}, 
      {html:"size", xml:"fontSize"}, 
      {html:"blockindent", xml:"marginLeft"}, 
      {html:"indent", xml:"textIndent"}, 
      {html:"leftmargin", xml:"marginLeft"}, 
      {html:"rightmargin", xml:"marginRight"}, 
      {html:"letterspacing", xml:"letterSpacing"} ]; 
     private static var typeMapping : Array = [ {attribute:"letterSpacing", type:"px"}, 
      {attribute:"fontFamily", type:""}, 
      {attribute:"fontSize", type:"px"}, 
      {attribute:"fontStyle", type:""}, 
      {attribute:"fontWeight", type:""}, 
      {attribute:"textAlign", type:""}, 
      {attribute:"textIndent", type:"px"}, 
      {attribute:"textDecoration", type:""}, 
      {attribute:"marginLeft", type:"px"}, 
      {attribute:"marginRight", type:"px"} ]; 


     private static function applyStyles (html : XML) : XML 
     { 
      var root : XML = applyTag(html); 
      for each (var child:XML in html.children()) 
      { 
       var kind : String = child.nodeKind(); 
       if (kind == "element") 
       { 
        var next : XML = applyStyles(child); 
        if (next.name() != "span" || next.children().length() > 0) 
        { 
         root.appendChild(next); 
        } 
       } 
       else if (kind == "text") root.appendChild(child.copy()); 
      } 

      return root; 
     } 

     private static function applyTag (html : XML) : XML 
     { 
      var root : XML; 
      switch (html.name().toString()) 
      { 
       case "style": 
        root = createElement("span"); 
        [email protected] = styleElementToString(html); 
        break; 

       case "p": 
        root = createElement("p"); 
        break; 

       default: 
        root = cloneElement(html); 
        break; 
      } 
      return root; 
     } 

     private static function cloneElement (html : XML) : XML 
     { 
      var node : XML = createElement(html.name()); 
      for each (var attr:XML in html.attributes()) 
      { 
       node["@" + attr.name()] = html["@" + attr.name()]; 
      } 
      return node; 
     } 

     private static function createElement (str : String) : XML 
     { 
      return new XML("<" + str + " />"); 
     } 

     public static function flashTextToHtml (str : String) : String 
     { 
      XML.prettyPrinting = false; 
      XML.ignoreWhitespace = true; 

      var wrap : String = wrapTextInCdata("<text>" + str + "</text>"); 
      var html : XML = new XML(wrap); 
      html = normalizeStyleTags(html); 

      var newHtml : XML = transformToHtml5(html); 
      return unwrapTextFromCdata(newHtml); 
     } 

     private static function getCssName (str : String) : String 
     { 
      return str.replace(/[A-Z]/g, "-$&").toLowerCase(); 
     } 

     private static function getStyleName (str : String) : String 
     { 
      for each (var map:Object in mapping) 
      { 
       if (str == map.html) return map.xml; 
      } 
      return str; 
     } 

     private static function getCssType (str : String) : String 
     { 
      for each (var map:Object in typeMapping) 
      { 
       if (str == map.attribute) return map.type; 
      } 
      return ""; 
     } 

     private static function normalizeStyleTags (xmlElement : XML) : XML 
     { 
      var xml : XML; 
      var child : XML; 
      var style : XML = new XML("<style />"); 
      var name:String = xmlElement.name().toString().toLowerCase(); 
      switch (name) 
      { 
       case "font": 
       case "textformat": 
        xml = style; 
        break; 
       case "b": 
        xml = style; 
        [email protected] = "bold"; 
        break; 
       case "i": 
        xml = style; 
        [email protected] = "italic"; 
        break; 
       case "u": 
        xml = style; 
        [email protected] = "underline"; 
        break; 
       case "p": 
        xml = new XML("<p />"); 
        xml.appendChild(style); 
        xml = style; 
       default: 
        xml = new XML("<" + name + " />"); 
        break; 
      } 

      for each (child in xmlElement.attributes()) 
      { 
       var attname : String = getStyleName(child.name().toString().toLowerCase()); 
       xml["@" + attname] = xmlElement["@" + child.name()]; 
       switch (xml["@" + attname].toString()) 
       { 
        case "LEFT": 
        case "RIGHT": 
        case "CENTER": 
         xml["@" + attname] = xml["@" + attname].toLowerCase(); 
       } 
      } 

      for each (child in xmlElement.children()) 
      { 
       var kind : String = child.nodeKind(); 
       if (kind == "element") xml.appendChild(normalizeStyleTags(child)); 
       else if (kind == "text") 
        xml.appendChild(new XML("<![CDATA[" + child.valueOf() + "]]>")); 
      } 

      return xml; 
     } 

     private static function styleElementToString (styleElement : XML) : String 
     { 
      var style : Object = {}; 
      var name : String = ""; 
      var string : String = ""; 

      for each (var attribute:XML in styleElement.attributes()) 
      { 
       name = attribute.name().toString(); 
       style[name] = styleElement.attribute(name).valueOf(); 
      } 

      for (name in style) 
      { 
       if (style[name] != null) 
        string += getCssName(name) + ":" + style[name] + getCssType(name) + ";"; 
      } 
      return string; 
     } 

     private static function transformToHtml5 (xmlText : XML) : XML 
     { 
      var root : XML = new XML("<text />"); 
      for each (var p:XML in xmlText.p) 
      { 
       root.appendChild(applyStyles(p)); 
      } 
      return root; 
     } 

     public static function unwrapTextFromCdata (xmlText : XML) : String 
     { 
      return xmlText.toXMLString().replace(/(\<\!\[CDATA\[)|(\]\]\>)/g, ""); 
     } 

     public static function wrapTextInCdata (htmlText : String) : String 
     { 
      return htmlText.replace(/(?:\>)([\s|\w]+)(?:\<)/g, "><![CDATA[$1]]><"); 
     } 
    } 
} 
+0

정말 대단합니다. 많은 개발자에게 도움이 될 것입니다. – mconnors