開発者ツール · HTML WYSIWYG エディター
WYSIWYG の小史: Xerox PARC の Bravo からブラウザ エディタまで
· 背景
html コンテンツ編集可能 開発者ワークフロー
1970 年代の研究システムから、デスクトップ パブリッシングや Web ページ ビルダーを経て、あらゆるブラウザーのコンテンツ編集可能なエディターに至るまで、「見たものがそのまま」の編集を追跡します。
WYSIWYG を導入する前は、ブラインドでフォーマットしていました。マークアップと印刷のワークフローで開き、ビジュアル編集が革命的だった理由
視覚的な編集を行う前に、作成者は多くの場合、制御コードまたはマークアップを記述し、後でフォーマットされた結果を表示しました。遅延により、レイアウトが反復的になり、指示を変更し、再度レンダリングし、比較し、繰り返しました。作成中に書式設定を表示することでそのループが短縮され、専門家以外がドキュメント ソフトウェアに期待する内容が変わりました。
この記事では、リポジトリが独自にソースしていない正確な最初の日付と日付を意図的に避けています。その目的は、ブラウザ編集画面の背後にあるデザインの系譜を説明することであり、完全な歴史年表を証明するものではありません。名前付きマイルストーンは、事実の製品履歴として公開する前にアーカイブ参照が必要です。
初期のビジュアル ドキュメント システムによってこのアイデアが確立されました。このリポジトリは Bravo 年表をソースとしていません
Xerox PARC に関連する研究システムは WYSIWYG の歴史で広く議論されており、ワークブックでは Bravo と名付けられています。ここで提供されるリポジトリ ソースは、その日付、機能セット、同時代のものに対する優先順位を検証していないため、これらの詳細は事実として言い換えるのではなく省略しています。
防御可能な概念上のマイルストーンは、フォーマットされたドキュメントの直接操作と組み合わせたビットマップ表示です。画面は単にコマンドを入力する場所ではなく、出力をアクティブに表現するものになりました。目に見える書式設定と基礎となる構造の間の関係は、依然として現代のエディターのトレードオフを定義しています。
ビジュアル編集は消費者のデスクトップにも届きました。正確な製品マイルストーンには外部のアーカイブ ソースが必要です
ワークブックでは次に、Xerox Star、MacWrite、およびデスクトップ パブリッシングの名前を付けます。正確な順序付けと影響を与えるには、このコードベースを超えるソースが必要です。発明なしで言えることは、グラフィカル パーソナル コンピューティングにより、視覚的な構成がより幅広い聴衆に馴染み、フォント、間隔、ページ レイアウトとリンクされた編集が可能になったということです。
そのデスクトップ モデルは、安定したページと制御された出力デバイスへの期待を促進しました。 1 つの HTML フラグメントが多くのスタイルシート、幅、ユーザーの好みに対応できるため、Web コンテンツは後にその約束を複雑にしました。出版が紙のようなページからレスポンシブなドキュメントに移行するにつれ、「目に見えるもの」という表現は文字通りではなくなりました。
1990 年代のページ ビルダーは、ビジュアル Web オーサリングとそのマークアップのトレードオフを明らかにしました
ビジュアル Web ページ ビルダーは、HTML に直接構成をもたらし、生成されたラッパーとプレゼンテーション マークアップに関連付けられるようになりました。繰り返しになりますが、このワークブックでは、詳細な評判やスケジュールに関するリポジトリの証拠を示さずに、特定の製品の名前が挙げられています。この記事では、永続的なエンジニアリングのトレードオフに論点を限定します。
ビジュアル ツールは、ジェスチャをツリーと文字列に変換する必要があります。即座に表示されるように最適化すると、後の再設計に抵抗するローカルなプレゼンテーションが生成される可能性があります。出力が制限されると、ソースに対する視覚的な忠実度が低下します。 ToolAcre は、制約されたセマンティック サブセットを選択し、フィルター処理されたソースを表示します。
編集がページ内に移動 — contenteditable がどのように WYSIWYG をブラウザーや CMS プラットフォームに導入したかについて説明します
ブラウザー contenteditable は、編集ホストを通常のページ要素に移動しました。ブラウザーはキャレット、選択、入力、削除を管理できる一方で、アプリケーション コードはコントロールを提供し、innerHTML を読み取ります。 ToolAcre はそのモデルに従い、現在、非推奨の execCommand を通じてツールバー アクションを送信します。
次に、アプリケーションは、ネイティブ編集ホストが提供しない境界を追加します: 貼り付けインターセプト、ソースのサニタイズ、削除レポート、文字数と単語のカウント、プレーンテキストの抽出、コピー、ダウンロード、および不活性プレビュー。この階層構造は、contenteditable だけでは完全な製品ではない理由を説明しています。
反対運動は、ソース製品のタイムラインを持たず、制約されたソースと構造化された編集を支持しています
軽量マークアップと構造化エディターは、同じ出力品質の問題に異なる方法で答えます。これらは、作成者が表現または保存できる内容を制限し、制御された結果をレンダリングします。このワークブックは歴史的な反対運動を要求していますが、日付、養子縁組の主張、または特定の因果関係を裏付ける情報源はありません。
有用な比較はアーキテクチャに関するものです。制約されたソースは差分や変換が簡単ですが、視覚的なサーフェスにより書式設定への障壁が低くなります。 ToolAcre は、視覚的な製図と目に見える HTML を組み合わせていますが、コラボレーション、ドキュメント モデル、決定論的なクロスブラウザ コマンドは提供しません。
これでカバーされないもの — Web への影響を超えた製品ごとのタイムラインやデスクトップ パブリッシング
この記事は、製品ごとのタイムラインを提供したり、発明をクレジットしたり、研究者を引用したり、広範な影響力を超えてデスクトップ パブリッシングを取り上げたりするものではありません。アーカイブ ソースが提供されていないため、これらの省略は意図的なものです。エディターの実装では、過去の優先順位ではなく、現在の動作を検証できます。
また、ビジュアル エディターが必ずしも不正なマークアップを生成するとも主張しません。出力品質は編集モデルとポリシーによって異なります。ここでは、エイリアスとホワイトリストによってブラウザーの変更後の変動が軽減され、ソース モードでは作成者が残っているものをレビューできます。他の編集者は異なる構造を選択する場合があります。
要点: 古い緊張感が依然として設計上の問題である — 視覚的な利便性とクリーンな出力、および編集によって生成されるマークアップを表示できるようにすることで、ToolAcre の HTML WYSIWYG エディターがこの問題にどのように対処するかをまとめています。
昔ながらの緊張感はそのまま残っています。直接的な視覚的制御が作成者を助け、耐久性のある構造化された出力がシステムと将来のメンテナーを助けます。信頼できるエディターは、その翻訳を表示し、レンダリングがブラウザーと宛先のコンテキストに依存することを認めます。
ToolAcre は、現代の小さな例の 1 つです。使い捨てメモをフォーマットし、フィルタリングされた HTML を検査し、プレビューとソースを比較します。この演習では、出典のない歴史的概要を偽りの精度に変えたり、この実装によって WYSIWYG のあらゆる妥協が解決されると主張したりすることなく、系統を実証します。