日々のコンピュータ情報の集積と整理

Dr.ウーパのコンピュータ備忘録

2015年2月19日木曜日

ソースコード:スタイル付きテキストを、コピーでブログに張り付け

イントロダクション

スタイルシートによってスタイルを適用した文字を、コピーによってブログに張り付けることのできるサービスを作ってみました!

スタイル付きテキストを、コピーでブログに張り付けすることのできるサービスを作成しました!
http://upa-pc.blogspot.com/2015/02/css-copy-to-blog.html


そのソースコードをここで公開します。
なお、これは初版(Version1.0)のものであり、今後修正が加わる可能性があります。

ソースコード

<iframe srcdoc='
<form onsubmit="return false;">
<b>表示するテキスト:</b><input type="text" id="input-text" style="width: 500px" /><br />
例)こんにちは!<br /><br />
<b>テキストのスタイルシート(CSS):</b><input type="text" id="input-css" style="width: 500px" /><br />
例)text-shadow: 4px 4px 7px rgba(150, 150, 150, 1);<br /><br />
</form>
<br />
以下のテキストをコピーして、ブログの編集画面に貼り付けてください。<br />
<p>(上手くスタイルが適用されたテキストをコピーできない場合、コピー対象のテキストの上下の 1 行も含めてコピーしてみてください。)</p>
<div id="copy_target">
ここにデータが出力されます。
</div>

<script type="text/javascript">
<!--
    (function () {

        var id_input_text = "input-text";        // 入力テキストを保持する要素の id
        var id_input_css = "input-css";        // 入力テキストを保持する要素の id
        var id_output = "copy_target";           // 出力値を保持する要素の id

        // 前回検査時の入力値
        var input_old_text = "";
        var input_old_css = "";


        // 定期的に入力を監視し、入力が変化していたら、出力する
        setInterval((function () {

            var input_text = document.getElementById(id_input_text).value;
            var input_css = document.getElementById(id_input_css).value;

            if (input_text != input_old_text ||
                input_css != input_old_css) {


                // データ出力
                var obj_output = document.createElement("div");

                // 余分なデータがコピーされないように十分な余白をとる
                obj_output.appendChild(document.createElement("br"));
                obj_output.appendChild(document.createElement("br"));
                obj_output.appendChild(document.createElement("br"));
                obj_output.appendChild(document.createTextNode("--- ここから ---"));
                obj_output.appendChild(document.createElement("br"));

                var obj_output_text_with_css = document.createElement("span");
                obj_output_text_with_css.setAttribute("style", input_css);
                obj_output_text_with_css.appendChild(document.createTextNode(input_text));

                obj_output.appendChild(obj_output_text_with_css);

                // 余分なデータがコピーされないように十分な余白をとる
                obj_output.appendChild(document.createElement("br"));
                obj_output.appendChild(document.createTextNode("--- ここまで ---"));
                obj_output.appendChild(document.createElement("br"));
                obj_output.appendChild(document.createElement("br"));
                obj_output.appendChild(document.createElement("br"));
                obj_output.appendChild(document.createElement("br"));


                // 画面へ出力
                var obj_output_target = document.getElementById(id_output);
                obj_output_target.innerHTML = "";
                obj_output_target.appendChild(obj_output);


                input_old_text = input_text;
                input_old_css = input_css;
            }

        }), 500);

    })();

//-->
</script>

' width="100%" height="600px" id="iframe-copy_css">
</iframe>

<script type="text/javascript">
<!--
    // iframe の srcdoc 非対応ブラウザ用
    // javascript で iframe の中身を作成する
    (function () {
        var iframe = document.getElementById("iframe-copy_css");

        // iframe の中身が無ければ、作成する
        if (iframe.contentWindow.document.body) {
            if (iframe.contentWindow.document.body.innerHTML != "") {
                return;
            }
        }

        iframe.contentWindow.document.open();
        iframe.contentWindow.document.write("<html><head></head><body>" + iframe.getAttribute("srcdoc") + "</body></html>");
        iframe.contentWindow.document.close();
    })();
//-->
</script>


動作確認環境

以下のブラウザバージョンで、正常に動作することを確認しました。


  • Chrome : 40.0.2214.111 m
  • Firefox : 35.0.1
  • Internet Explorer : 9.0.8112.16421, 11.0.9600.17501


解説

解説は、以下のページにて行っています。

ソースコード解説:スタイル付きテキストを、コピーでブログに張り付け
http://upa-pc.blogspot.com/2015/02/explain-css-copy-to-blog-v1.0.html






関連記事

関連記事を読み込み中...

同じラベルの記事を読み込み中...
Related Posts Plugin for WordPress, Blogger...