做了個簡易html編輯器

by

本次亦受awfice的啟發，製作了一個簡易的html編輯器。

如果想改成横屏，只需貼粘以下代碼：

<style>
#ejhehe_display , #ejhehe_textarea {height: 50%; width: 100%;}
</style>

如果想改成一個富文本編輯器：

<div id="ejhehe_example">
開始寫作
</div>
<style>#ejhehe_example {font-size: 24px;white-space: pre-wrap;}</style>

如果要保存，則打開本地的文本編輯器，將以下內容粘貼進去：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,initial-scale=1,user-scalable=no">
<title>ejhehe</title>
</head>
<body>

</body>
</html>

再將你在這個html編輯器的內容粘貼至body中，保存成一個.html文件即可。

一些便民標籤

  • <h1></h1>
  • <h2></h2>
  • <h3></h3>
  • <b></b>
  • <p></p>
  • <style></style>
  • <span style=""></span>
  • <div class=""></div>
  • <a href=""></a>

<script/>使用說明及注意事項

當<script></script>閉合標籤形成時，代碼會立即執行。

當文本改動時，代碼會重覆執行。

因此，如果不希望代碼重覆執行，一個辦法是，刪掉<script>中的一個字母，比如變成<scrpt>。之後可以修改代碼，修改結束後再補全<script>即可再次執行。

Views: 140

4 thoughts on “做了個簡易html編輯器”

  2. 我最近有個類似的想法，不過右側的內容會加一些排版，並且右側的div尺寸和A4紙比例相同，最下加上一個列印按鈕，用來生成pdf檔案。

    Reply

Leave a Comment