JavaScript 系列四：第7課

── TinyMCE 套件

by applelily

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript 系列四：第7課 ── TinyMCE 套件</title>
    <link rel="stylesheet" href="./07_js_TinyMCE.css">
</head>
<body>
    <div class="container">
        <textarea id="tiny-menu">每天一日誌，Javascript  Html CSS Vue Java Python ...</textarea>
        <button id="get-content" class="get-content">發佈文章</button>
    </div>
    <div id="display-content" >
        <button id="close-content" class="close-content">X</button>
        <div id="content-area"></div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/7.2.1/tinymce.min.js"></script>
    <script src="./07_js_TinyMCE.js"></script>
</body>
</html>

CSS

body {
    background-color: #eee;
    position: relative;
    margin: 0;
    padding: 0;
    height: 100vh;
}

.container {
    position: relative;
    width: 100%;
}

.get-content {
    position: absolute;
    width: 100px;
    height: 40px;
    font-size: 1rem;
    border: none;
    border-radius: 5px;
    color: #ccc;
    background-color: rgb(26, 54, 90);
    margin: 10px 50px 0 0;
    right: 0;
}

.get-content:hover {
    cursor: pointer;
    background-color: rgba(232, 61, 124, 0.816);
    color: #fff;
}

/* Hide the upgrade button */
.tox-promotion {
    display: none !important;
}

#display-content {
    display: none;
    width: 800px;
    height: 300px;
    background-color: #eee;
    border: 1px solid #000;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 666;
    padding: 20px;
    box-sizing: border-box;
    overflow: auto;
}

.close-content {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background-color: none;
    color: #000;
    font-size: 1rem;
    cursor: pointer;
}

JavaScript

tinymce.init({
    selector: 'textarea#tiny-menu', 
    plugins: [
        'advlist', 'autolink', 'link', 'image', 'lists', 'charmap', 'preview', 'anchor', 'pagebreak',
        'searchreplace', 'wordcount', 'visualblocks', 'visualchars', 'code', 'fullscreen', 'insertdatetime',
        'media', 'table', 'emoticons', 'help'
    ],
    branding: false
});

// Get TinyMCE content and display it below the editor
function getContent() {
    var content = tinymce.get('tiny-menu').getContent();
    if (content != null) {
        var displayContent = document.getElementById('display-content');
        var contentArea = document.getElementById('content-area');
        contentArea.innerHTML = content;
        displayContent.style.display = 'block'; // Ensure the element is displayed
    }
}

// Close the display-content element
function closeContent() {
    var displayContent = document.getElementById('display-content');
    displayContent.style.display = 'none';
}

// Execute getContent function when "發佈文章" button is clicked
document.getElementById('get-content').addEventListener('click', getContent);

// Execute closeContent function when the close button is clicked
document.getElementById('close-content').addEventListener('click', closeContent);