1

jQuery用のContentEditableプラグインを使用してブラウザウィンドウで編集可能なドキュメントを作成するFresherEditorというユーティリティを使用しています。次に、その出力を取得し、HTMLで管理されたスタイルをCSSに解析して取得したルールからSVGグラフィックを生成する必要があります。

freshereditorは、次のような出力を生成します。

<div>
  <p>
   <i>
    <u>
     <b>
      <font face="Verdana">
       Hello, World!
      </font>
     </b>
    </u>
   </i>
  </p>
</div>

私が好むのは次のようなものです。

<div>
 <p style="font-weight: bold; font-style: italic; text-decoration: underline; font-family: Verdana;">
  Hello, World!
 </p>
</div>

どんな提案も役に立ちます。

4

1 に答える 1

1

これはとても楽しい問題でした。ありがとう！html2style()以下は、style2html()メソッドを追加するスクリプトです。テストケースは、視覚的な変更なしに2つの間で変換できることを示しています（ただし、要素のネストの順序は、ラウンドトリップ後に異なる場合があります）。

これらの動作を示すテストケース

http://jsfiddle.net/GaPBS/

ネストされたHTMLフレーズ要素をスタイル属性に変換する

(function(scope){
  var HTML2CSS = {
    strong: function(e){ this.style.fontWeight = "bold";                  },
    b:      function(e){ this.style.fontWeight = "bold";                  },
    em:     function(e){ this.style.fontStyle = "italic";                 },
    i:      function(e){ this.style.fontStyle = "italic";                 },
    font:   function(e){ this.style.fontFamily = e.getAttribute('face');  },
    u:      function(e){ this.style.textDecoration += ' underline';       },
    strike: function(e){ this.style.textDecoration += ' line-through';    }
  };
  scope.html2style = function(root){
    for (var name in HTML2CSS){
      var elements = root.querySelectorAll(name);
      var styler   = HTML2CSS[name];
      for (var i=elements.length;i--;){
        var toKill = elements[i],
            parent = toKill.parentNode;
        // Only swap out nodes that are the sole element child of the parent
        if (!toKill.nextElementSibling && !toKill.previousElementSibling){
          parent.removeChild(toKill);
          // Move contents into the parent
          for (var kids=toKill.childNodes,j=kids.length;j--;){
            parent.insertBefore(kids[j],parent.firstChild);
          }
          // Merge existing styles from this node onto the parent
          parent.style.cssText += toKill.style.cssText;  
          // Hard set the style for this node onto the parent
          styler.call(parent,toKill);
        }
      }
    }
  }
})(this);

スタイル属性をネストされたHTMLフレーズ要素に変換する

(function(scope){
  var CSS2HTML = {
    "fontWeight:bold":             "b",
    "fontStyle:italic":            "i",
    "textDecoration:underline":    "u",
    "textDecoration:line-through": "strike",
    "font-family:*":                function(value){ var e=document.createElement('font'); e.setAttribute('face',value); return e; }
  };
  scope.style2html = function(root){
    var leaf = root;
    for (var style in CSS2HTML){
      var elName = CSS2HTML[style],
          parts  = style.split(':'),
          name   = parts[0],
          wild   = parts[1]=="*",
          regex  = !wild && new RegExp("(^|\\s)"+parts[1]+"(\\s|$)"),
          before = root.style[name];
      if (before && (wild || regex.test(before))){
        var el = (typeof elName==='function') ? elName(before) : document.createElement(elName);
        for (var kids=leaf.childNodes,j=kids.length;j--;){
          el.insertBefore(kids[j],el.firstChild);
        }
        leaf = leaf.appendChild(el);
        root.style[name]=wild ? "" : before.replace(regex,"");
      }
    }
    if (root.getAttribute('style')=="") root.removeAttribute('style');
  }
})(this);
于 2012-04-26T16:56:26.903 に答える