TextFieldに複数のCSSクラスを指定できますか？

Question

TextFieldにhtmlテキストを追加しています。私はそれにStyleSheetを適用しています。私はそう

<span class='classOne classTwo'>my text </span> 

のように私のhtml要素に複数のクラスを適用するか、私はこれを試してみましたが、フラッシュはこれを扱うことができないようにそれがどのように見えるか

、それはどんなスタイルにせずにテキストをレンダリングします。

Answer 1

これはおそらく、FlashがHTMLをどのように解釈するか、大半のベンダーのブラウザがHTMLを解釈する方法の違いによるものです。私の推測では、この例ではhttp://help.adobe.com/en_US/ActionScript/3.0_ProgrammingAS3/WS2AEF3551-BB6C-4e20-8865-83CD7E685263.htmlを使用し、フラッシュテキストエンジンで使用されているスタイルの複数のクラスを読み込むことができるようにするために、よりきめの細かいコントロールが必要です。

あなたが期待するクラス属性を解釈するhtmlを表示するには、通常のフラッシュコンポーネントの外で何らかのhtmlラッパーを使用しているということだけです。結局

Answer 2

この意志の内訳は、しかし、あなただけのスタイルのカップルを組み合わせたい場合、あなたはこのような何かを行うことができ、上記の提案として、FTEまたはTLFを使用する必要はありません。

巣<スパン>第2のスタイルを有する別の<スパンの第1のスタイル>である。内部スパンのスタイルプロパティは、CSS継承と同様に、外側スパンのスタイルプロパティをオーバーライドします。

package 
{ 
    import flash.display.Sprite; 
    import flash.text.StyleSheet; 
    import flash.text.TextField; 

    public class CSSTEst extends Sprite 
    { 
     public function CSSTEst() 
     { 
      var style:StyleSheet = new StyleSheet(); 
      var redStyle:Object = {}; 
      redStyle.color = "#FF0000"; 
      style.setStyle(".darkRed", redStyle); 
      var bigStyle:Object = {}; 
      bigStyle.fontWeight = "bold"; 
      bigStyle.fontSize = 36; 
      style.setStyle(".big", bigStyle); 
      var greenStyle:Object = {}; 
      greenStyle.color = "#00FF00"; 
      style.setStyle(".green", greenStyle); 
      var tf:TextField = new TextField(); 
      tf.styleSheet = style; 
      tf.htmlText = "<span class='darkRed'><span class='big'>Red</span></span> apple, Granny's <span class='big'>big <span class='green'>green</span> apple</span>"; 
      tf.width = tf.textWidth + 10; 
      addChild(tf); 
     } 
    } 
} 

Answer 3

スタイルシートは空白で名前を保持することができますので、例えば「classOne classTwoは、」有効な識別子である - あなたがしなければならないすべては、組み合わせの名前で新しいスタイルに参照するスタイルを兼ね備えている、とあなたのテキストが意志正しく表示されます。

package 
{ 
    import flash.text.StyleSheet; 
    import flash.text.TextField; 


    public class MyWildTextField extends TextField 
    { 
     private var _combinedStyleSheet:StyleSheet = new StyleSheet(); 
     private var _styleSheet : StyleSheet; 

     override public function set htmlText(text:String) : void { 
      combineStyles(text); 
      super.styleSheet = _combinedStyleSheet; 
      super.htmlText = text; 
     } 

     private function combineStyles(text:String):void { 
      for each (var name : String in styleSheet.styleNames) 
       _combinedStyleSheet.setStyle(name, styleSheet.getStyle(name)); 

      var styles:Array = extractStyleNames(text); 
      for each(var style:String in styles) addCombinedStyle(style); 
     } 

     private function extractStyleNames(text:String):Array { 
      var xml:XML = XML(text); 
      var styles:Array = []; 
      var allNodes:XMLList = xml..*; 
      var allAttributes:XMLList = allNodes.attributes(); 
      styles = addStyleNames (allAttributes, styles); 
      styles = addStyleNames (xml.attributes(), styles); 
      return styles; 
     } 

     private function addCombinedStyle(style:String):void { 
      if(style.indexOf(" ") > -1) 
       _combinedStyleSheet.setStyle("."+style, getCombinedStyle(style)); 
     } 

     private function addStyleNames (attributes:XMLList, arr:Array) : Array { 
      for each(var node:XML in attributes) 
       if(node.name() == "class") 
        arr.push(node.valueOf().toString()); 
      return arr; 
     } 

     private function getCombinedStyle(style:String):Object { 
      var combined:Object = {}; 
      for each(var name:String in style.split(" ")) 
       combined = addStyleProperties(combined, name); 
      return combined; 
     } 

     private function addStyleProperties(combined:Object, name:String):Object { 
      var style:Object = styleSheet.getStyle("."+name); 
      for(var prop:String in style) 
       combined[prop] = style[prop]; 
      return combined; 
     } 

     override public function get styleSheet() : StyleSheet { 
      return _styleSheet; 
     } 

     override public function set styleSheet (styleSheet:StyleSheet) : void { 
      _styleSheet = styleSheet; 
     } 
    } 
}