• ベストアンサー

Googleドキュメント

Googleドキュメントのdocumentは編集エリアがiframeになっており、 編集内容はbodyタグの中の要素としているようなんですが、 bodyタグの中の要素を直接編集(しているように見せる)する方法はどうやって実現させているんですか? またフォントの変更など、選択した要素をどうやって取得しているのですか? こんなに多機能じゃなくていいのでWEB上で文章編集を行いたいのですがいい方法はありませんか?(テキストエリアはちょっと微妙・・) よろしくお願いします。

質問者が選んだベストアンサー

  • ベストアンサー
  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

Googleドキュメントは相当高度な事をやっていそうなのでおいといて、 テキストエリアのWYSIWYG編集ツールならJAVASCRIPTだけでOKの 「CKEditor」が有名?です。日本語対応もできます。 (サイズがちょっとでかいですが) http://www.umbrellaprocess.com/archives/tag/ckeditor http://ckeditor.com/

vijareal
質問者

お礼

ちょっと見てみただけですが、かなりやりたいことを実現できそうです。 ありがとうございます。

関連するQ&A

  • Safariで<iframe>のinnerHTMLを取得する方法

    MacのブラウザSafariで <iframe id="iframe1" src="test.txt" style="display:none" width="1" height="1"></iframe> で読み込んだtest.txtの内容が取得できなくて困っています。 ちなみにWindowsのIEとMacのFireFoxでは下記のようなかんじで取得できています。 IEの場合 var text = this.iframe1.document.body.innerHTML; FireFoxの場合 var text = document.getElementById("iframe1").contentDocument.body.innerHTML; MacのSafariでは上記どちらの方法でも取得できませんでした。 他にも色々調べて試してみたのですがやはり上手くいきません。 <iframe>タグ内のstyle指定をなくしてみたらiframeにテキストの内容は表示されているのであとは取得できればいいのですが。。 JavaScriptは初心者なので記述等不可思議かもしれません。 あわせてご教授いただけたらと思います。

  • designModeをOnにしたインラインフレームに入力した文字を取得

    Webページ上にインラインフレームを定義して、その中身のdesignModeをOnにして、インラインフレームのBODYを編集できるようにしています。 JavaScriptで編集したBODYの中身の文字列を取り出したいのですが、方法が分かりません。アドバイスをお願いします。 ソースは↓のような感じにしています。 ----- <html> <body> <iframe src="" id="edit" width="200" height="200"></iframe> <script language=JavaScript> <!-- frames[0].document.designMode = "On"; // --> </script> <br> <input type="button" onclick="JavaScript:DispEdit();" value="中身表示"> <script language=JavaScript> <!-- function DispEdit() { //alert(frames[0].document.body.text); //ここで編集したiframeの中身を取り出したい! } --> </script> </body> </html> -----

  • jQueryの.text()関数でiframe

    .text()でHTMLの中の文字列を取得してるんですが これはHTMLタグを取り除いてテキストのみを抽出するものだと思っていたら <iframe から始まる場合はそのまま<iframe~と取ってきてしまいます。 これを回避する方法はありませんか? やはり取ったあとで<iframe~の部分を正規表現で取り除くしかないのでしょうか。 よろしくおねがいします。

  • textareaからiframeにしたら動作せず

    以下のJSで、iframeがtextareaのときはうまくコピーできたのですが iframeにしたらテキストのコピーと選択ができなくなりました。 IEで動作すれば十分ですが、コピーはどうやってやればいいでしょうか? <html> <head> <script> function clip_copy() { if (document.all && navigator.userAgent.match(/windows/i) && document.obj.area.value) { copy_obj = document.obj.area.createTextRange() copy_obj.execCommand("Copy") alert("クリップボードにコピーしました"); } } </script> </head> <body> <form method="get" action="txt_list.php" target="area" name="obj"> <iframe src="txt_list.php" name="area"> この部分は iframe 対応のブラウザで見てください。 </iframe> <input type="button" onClick="obj.area.select(); clip_copy();" value="コピー" style="font-size: 20pt;"> </form> </body> </html>

  • Googleドキュメントで長い行の表示を切り詰める

    Googleスプレッドシートでは スプレッドシートでは、セル内のテキストを切り詰めたり、折り返したり、はみ出させたりすることができます。 https://support.google.com/docs/answer/141104?hl=ja ということができるようなのですが、ドキュメントの表で同じことはできないでしょうか? (あるいは表の外でもかまわないので、表示を切り詰める方法はないでしょうか)

  • テキストドキュメント

    テキストドキュメントについて幾つか質問があります。 当方、現在フォルダの中にテキストドキュメントを作ってるのですが、テキストドキュメントの中に表やグラフなどは製作出来ないのでしょうか?またフォルダの中に直接Webサイトに飛べるように、イタンターネットエクスプローラーのアイコンを作ることは出来ますでしょうか? それでは、よろしくお願いします。

  • iframeのソースを取得

    iframeのsrcのソースを取得する方法を教えて下さい。 下のソースのcld.document.sourceの所が知りたいです。 body.outerHTMLでbodyの中なら得られますがそうではなくて、<html>から</html>を取得して、それを加工して表示しようというものです。 <iframe id=cld src=cld.html></iframe> <script language="JavaScript"> cldsource = cld.document.source; if(cldsource.substr(... ... </script>

  • WebBrowser1.Document.Body.InnerHtmlで得る sizset と sizset というのは何でしょう?

    vb2008のwebbrowser1で表示されているページを WebBrowser1.Document.Body.InnerHtml で取得しました。 もともとのHTMLと比較してタグが大文字になったり、タグ内の要素の順番が入れ替わったり、要素の"や'がなくなったりすることは確認しています。 気になるのはタイトルにある"sizset"と"sizset"が追加されている点です。 この2つの意味するところが判りません。 もともとのHTMLに存在しないものなので、消しちゃえばいいのですが…。 検索エンジンで調べても情報が見あたらず、何の目的で付加されるのか疑問です。 ご存知でしたらお教えください。 よろしくお願いします。

  • Googleドキュメントでテキストファイルが読めな

    Googleドキュメントを最新バージョンで使っています。 テキストファイルをアップロード(Google doc形式に変換指定)し、 開いてみましたら内容は文字化けしていました。 文字化けさせない方法はあるのでしょうか?  なお、doc形式に変換しないと(.txt形式ですが) Google docsでは開けません。

  • document.writeについて

    データベース的なサイトを作っています。 更新しやすさ、改造のしやすさから、「原稿」は、テキストファイルにdocument.write(abcdefg…)と記述し、htmlファイルにはtableタグ等でテンプレートのようなものを作成し、その中に<SCRIPT src="○○.txt">とタグを書き込み、表示させています。(表示させる文を、abcdefg…とした場合です) 原稿には、「見出し」と「本文」とがあり、それぞれのディレクトリを作成し、サーバにアップしています。(ディレクトリの中は上記テキストファイル) さて、こういうことができるかの相談です。 今は、htmlに、tableタグを用い、表示させたい形を作り、それぞれのセルの中に、上記のように、それぞれタグを書き込み、document.writeで表示させていますが、これを1つのテキストファイルに、見出し、内容を書き込んだうえで、htmlに表示させたいのです。(一つのテキストファイルに、document.writeが2つあっても可)。サーバ内の管理の問題なので。 classか何かで指定でできるのか、もしくはスタイルシートでうまくできるのか…。 いろいろ実験はしてみてるのですが、表示さえされなくなってしまい、トホホ状態になってきたので、質問させていただくしだいです。 ぜひ、ご教授ください。

    • ベストアンサー
    • HTML

専門家に質問してみよう