Q&A
コードをご提示ください
前提・実現したいこと
contentEditableで変更した後のＣＳＳを保存したいです。
変更後のソースを見たのですが中身は変更前と同じものでした。
変更後のCSS情報はどこに格納されていますか？
保存はどうすればできますか？
ブラウザはCHROME。
HTMLファイル内部のみで利用しています。
追記：jqueryではありません。
回答ありがとうございます。提示できるコードがありません。contentEditableで文字編集・文字を太字にするところまでは進んでいます。ところがCHROMEの右クリックのソースを表示には反映されていません。Shift＋CTRL＋Iのモードでは変わっているようなのですがCSSのデータがどこにあるかわからず困っています。また、InnerHTMLなどで書き換える場合に書き換え元と書き換え後の２種類のデータが必要になると思うのですが、書き換え後の情報を取得するには何を指定すればいいのでしょうか？
回答1件
0
ベストアンサー
ちょっと意味がわかりませんがJavaScriptだけではユーザーサイドの言語なのでHTMLファイルの保存は不可能です。PHPの利用をご検討ください。
投稿2019/10/11 13:16
編集2019/10/11 13:17総合スコア10429
回答ありがとうございます。外部サーバーNGの状況なのでPHP利用ができません。InnerHTMLで何とかできたというHPがちらほらあるのでどうにか出来ないかと摸索しています
保存してどうするのですか？
というよりどこに保存するのですか？
Q> 回答ありがとうございます。提示できるコードがありません。contentEditableで文字編集・文字を太字にするところまでは進んでいます。ところがCHROMEの右クリックのソースを表示には反映されていません。Shift＋CTRL＋Iのモードでは変わっているようなのですがCSSのデータがどこにあるかわからず困っています。また、InnerHTMLなどで書き換える場合に書き換え元と書き換え後の２種類のデータが必要になると思うのですが、書き換え後の情報を取得するには何を指定すればいいのでしょうか？
A> 一般的にソースを表示で表示されるのはサーバーから送られてきたものです。
あくまでもHTMLはユーザーサイドの言語なのでソース上には書いていません。
また、保存というのも「どこ」に保存するかによって回答が変わります。
ブラウザ状に保存したいなら可能ですしサーバー状のファイルやDBに保存したいならHTML,CSS,Jsでは不可能です。
真っ白なHTMLファイルにcontentEditableで内容を編集。その後、保存するという流れがやりたいのですが…。保存先としては編集したHTMLに丸ごと上書きの形です。仮に保存不可でも編集後のソースが取得できれば手動でコピペを考えていますがCSSのソースが変更前のものしか見つかりません。ちなみにIFREM使用しているので親フレームからの編集も試みたのですがクロスドメインに阻まれました。
難しいですね。
出来なくはないですが直接やったほうが早いです。
それでもよければ回答させていただきます。
ぜひお願いします。ちなみに、直接（手動コピペ？）の場合、どこに変更後のソースがあるかも教えてください。お願い致します。
いや、手動というのはそういうわけではなく「素直にテキストエディタで編集する」という意味です。
テキストエディタのDLが出来ない環境なので……。その場合、メモと睨み合いながら作業する形になりますが何よりも見易さ重視（自分向けに）が必要になりまして。プログラム初心者という要因もあり、いちいち確認しながらでは膨大な時間がかかってしまうので…量が量なので考えただけでも気が遠くなります…
HTMLやCSSやJSのようにDLせずにメモで動かせる言語でエディタが作れるならそちらも検討するのですが…。もしご存知でしたら教えていただけると助かります。
CodePen.io
あたりでテストならいい気がします。
申し訳ありません。このサイトで何をしたらいいのでしょうか？
https://drive.google.com/file/d/19VgX-QGGB7yWNqyjmYF0dxuh0QSU83gY/view?usp=drivesdk
会員登録は省きますが上の動画のようにリアルタイムで開発ができます。
私もよく使います。
これを使ってみればHTMLから直接編集した内容の格納先がわかるかも…ということでしょうか？ちなみに今CHROMEの管理ツールを模索していたところ、リアルタイム側のソースの一番上のHTMLを指定しながらCopyをクリック、さらにCopy outhrHTMLで全コピできることが判明しました。CSS反映もされているようなので、こちらで暫くやってみたいと思います。ちなみにブラウザ上にあるリアルタイムの情報がJSでは取得できないから不可能に近いというお話だと受け取ったのですが、ブラウザから直接値を受け取る方法はあるのでしょうか？
なんか上手く伝わっていないようです。
とりあえずまとめます。
サーバーにあるファイルに書き込みをするにはサーバーサイドの言語（PHP等）を利用する必要があります。これは、質問者さんの環境によって利用できません。
contentEditableで編集した内容はイメージ的にはブラウザ上に浮いた状態であります。HTMLやCSSの記述が実際に編集されているのではなく、サーバーから受け取ったHTML,CSSをブラウザ上で上書きしている（イメージです）状態です。そのため、「サーバーから受け取ったHTML,CSS,JSを表示する」「ソースを表示」には記載されません。
CodePen.ioはFTP接続なしでリアルタイムで編集・確認できるツールになります。
編集された内容自体は取得可能です。
ただ、それらを全て代入してdocument.writeするという処理が長い（口悪くいうと「めんどくさい」）です。
まとめありがとうございます。取得自体は可能だけども、やはりサーバーサイド言語不可環境では編集済みソース受け取りが絶望的ということでしょうか？スクリプトの使い回しを考えているので面倒なだけであればdocument.writeにも挑戦したい気持ちではありましたが……。諦めることにします。今CHROMEを見ていたところ、管理コンソールのSourecesから直接ファイル内に上書きができるようなので（コピペすれば）暫く様子を見てみます。とても丁寧に説明いただきありがとうございました！
あなたの回答
tips
プレビュー
