JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js"></script>
<h1 style="text-align: center;">JavaScript 系列四:第7課 ── TinyMCE 套件</h1>
<p style="text-align: center;">據官方文件表示,2024年開始需要申請帳號才能拿到有效的api key啟動這個套件,因此作業就不特別申請帳號來啟動功能。因為只有14天免費試用QQ</p>
<form action="" method="post">
<textarea name="" id="content" cols="30" rows="10"></textarea>
<input type="submit" value="發佈文章">
</form>
CSS
form {
text-align: right;
}
form input[type="submit"] {
display: inline-block;
margin-top: 10px;
padding: 5px 10px;
box-sizing: border-box;
border: none;
background-color: rgba(39, 90, 54, 1);
border-radius: 5px;
color: #fff;
font-size: 16px;
cursor: pointer;
transition: 0.5s;
}
form input[type="submit"]:hover {
background-color: rgb(82, 184, 113);
}
JavaScript
tinymce.init({
selector: "#content"
});