HTMLエディタを自作！「簡易的なHTMLエディタをhtml/css、javascriptで作成する方法」

テクノロジーカテゴリーの変更を依頼記事元:

denkenmusic.com

2 usersがブックマークコメント

記事へのコメント0件

注目コメント
新着コメント

新着コメントはまだありません。
このエントリーにコメントしてみましょう。

注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

リンクを埋め込む

以下のコードをコピーしてサイトに埋め込むことができます

<iframe marginwidth="0" marginheight="0" src="https://b.hatena.ne.jp/entry.parts?url=https%3A%2F%2Fdenkenmusic.com%2Fhtml%25E3%2582%25A8%25E3%2583%2587%25E3%2582%25A3%25E3%2582%25BF%25E3%2582%2592%25E8%2587%25AA%25E4%25BD%259C%25EF%25BC%2581%25E3%2580%258C%25E7%25B0%25A1%25E6%2598%2593%25E7%259A%2584%25E3%2581%25AAhtml%25E3%2582%25A8%25E3%2583%2587%25E3%2582%25A3%25E3%2582%25BF%25E3%2582%2592html-css%25E3%2580%2581javascript%2F" scrolling="no" frameborder="0" height="230" width="500"><div class="hatena-bookmark-detail-info"><a href="https://denkenmusic.com/html%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF%E3%82%92%E8%87%AA%E4%BD%9C%EF%BC%81%E3%80%8C%E7%B0%A1%E6%98%93%E7%9A%84%E3%81%AAhtml%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF%E3%82%92html-css%E3%80%81javascript/">HTMLエディタを自作！「簡易的なHTMLエディタをhtml/css、javascriptで作成する方法」</a><a href="https://b.hatena.ne.jp/entry/s/denkenmusic.com/html%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF%E3%82%92%E8%87%AA%E4%BD%9C%EF%BC%81%E3%80%8C%E7%B0%A1%E6%98%93%E7%9A%84%E3%81%AAhtml%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF%E3%82%92html-css%E3%80%81javascript/">はてなブックマーク - HTMLエディタを自作！「簡易的なHTMLエディタをhtml/css、javascriptで作成する方法」</a></div></iframe>

プレビュー

規約違反を報告

いまの話題をアプリでチェック！

バナー広告なし
ミュート機能あり
ダークモード搭載

アプリをダウンロード

HTMLエディタを自作！「簡易的なHTMLエディタをhtml/css、javascriptで作成する方法」

現在、自作でホームページのCMSを作成しているのですが、記事作成画面となる「エディタ画面」も自作して... 現在、自作でホームページのCMSを作成しているのですが、記事作成画面となる「エディタ画面」も自作してみましたので、ここでまとめておこうと思います。先に画像を貼っておきます。下のような簡易的なやつになります。 htmlのtextarerが入力画面となっていて、隣にあるdiv要素で作ったboxに入力した内容が反映される感じになってます。 Ajaxのような非同期通信にも見えますが、そんな高度な事はしておらず、javascriptのkey up関数で、キーボード入力が検知（キーが上がった瞬間）されれば、textareaの内容がdiv要素に渡されるだけの、簡易的なプログラムになります。簡単なHTML/CSSとjavascriptで作成できるので、しょぼいですがなにかの参考になれば幸いです。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset