AIメーカー

チャットAIを作れる、AIと遊べる
powered by ONJ.open2ch
トップに戻る

!aiにプログラミングさせてみるスレ

ソース:http://hayabusa.open2ch.net/test/read.cgi/livejupiter/1681083402/
open2chさん 2023-04-10 08:36:42
概要を見る AIとチャット36
一覧に戻る
表示範囲:
A:以下は、HTML、CSS、JavaScriptを使用して基本的なHTMLエディタを作成するサンプルコードです。完全なエディタの機能を実装するには、さらに多くの機能を実装する必要がありますが、ここでは入力欄、プレビュー部分、保存機能など、基本的な機能を実装する方法を示します。

まず、エディタに格納するためのデータを用意します。ここでは、ブラウザのローカルストレージを使用します。ローカルストレージは、ブラウザにデータを保存することができる機能です。

次に、HTMLエディタページのHTMLを作成します。以下は、エディタ、プレビュー表示部、そして保存ボタンのHTMLの例です。ここでは、HTMLのコードを入力するためのテキストエリアを用意しています。

```html
<! DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTMLエディタ</title>
<style>
.input {
margin: 5px 0;
width: 80%;
height: 300px;
font-size: 14px;
}
.output {
margin: 5px 0;
width: 80%;
height: 300px;
border: 1px solid # ccc;
padding: 5px;
}
.button {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
border-radius: 4px;
border: 1px solid # dcdcdc;
background-color: # f5f5f5;
color: # 333;
text-decoration: none;
}
.button-primary {
background-color: # 007fff;
color: # fff;
border: 1px solid # 007fff;
}
</style>
</head>
<body>
<h1>HTMLエディタ</h1>
<textarea class="input" id="input"></textarea>
<button type="button" class="button button-primary" onclick="preview()">プレビュー</button>
<button type="button" class="button button-primary" onclick="save()">保存</button>
<br>
<h2>プレビュー</h2>
<div class="output" id="output"></div>
<script src="main.js"></script>
</body>
</html>
```

HTMLのコードを入力するためのテキストエリアと、プレビュー表示用のdivタグが用意されています。また、プレビューボタンを押すことで、HTMLコードを解析し、プレビュー表示を更新します。保存ボタンを押すことで、このHTMLコードを保存します。

HTMLエディタページに対応するJavaScriptコードを作成します。ここでは、HTMLのコードを解析するために `DOMParser()` を使用しているため、JavaScriptのバージョンがES6以上である必要があります。

```javascript
// main.js
var input = document.getElementById('input');
var output = document.getElementById('output');

// プレビュー表示の更新
function preview() {
var html = input.value;
var parser = new DOMParser();
var doc = parser.parseFromString(html, 'text/html');
output.innerHTML = doc.documentElement.textContent;
}

// ローカルストレージに保存
function save() {
var html = input.value;
localStorage.setItem('html', html);
}

// 初期表示
(function init() {
var html = localStorage.getItem('html');
if (html) {
input.value = html;
preview();
}
})();
```

初期表示時にローカルストレージに保存されたHTMLコードがあれば、それを読み込み
2023-04-10 21:51:48 10カ月前