Sprint Essay 5 about Implementation of Markdown online editor by FZU Flying Club-CSDN博客

本文链接：https://blog.csdn.net/FZU_Flying_Club/article/details/134570582

Catalogues

1 Project burn chart
2 Video demonstration of Markdown online editor
3 Task code embedding area
- 3.1 Part of the front-end code
- 3.2 Part of the back-end code
4 Task code github repository
5 Test Report

This assignment belongs to which course	EE308FZ Software Engineering https://bbs.csdn.net/forums/ssynkqtd-04
Where this assignment is required	https://bbs.csdn.net/topics/617606376
Team name	FZU Flying Club
The goal of this assignment	Help students understand Alpha Sprint and promote course project progress
Other references	None

1 Project burn chart

在这里插入图片描述

2 Video demonstration of Markdown online editor

Sprint Plan 5 demonstration video

3 Task code embedding area

3.1 Part of the front-end code

Part1 HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flying-book</title>
</head>
<!-- Add a title for the page -->
    <h1>加入创作  FZU飞跃手册</h1>

    选择您的案例地区，使用markdown语句进行编辑，参照飞跃重洋中的案例格式，一起加入创作吧

    <div>
        <textarea id="MyID" rows="10" cols="50"></textarea>
    </div>
    <!-- Move the button to the right -->
    <div class="button-container">
        <select name="Area" id="areaSelect">
            <option value="请选择地区" selected="selected">请选择地区</option>
            <option value="亚洲">亚洲</option> 
            <option value="北美洲">北美洲</option> 
            <option value="欧洲">欧洲</option>
            <option value="澳洲">澳洲</option>
        </select>
        <button id="openButton" class="button" onclick="showAlert()">保存</button>
    </div>

    <!-- Additional HTML for the alert -->
    <div id="customAlert" class="custom-alert">
        输入标题<textarea id="MyTitle" rows="1" cols="50"></textarea>
        <button id="saveButton" class="button">上传</button>
        <input type="button" name="close" value="X" onclick="closeAlert()" />
    </div>
</body>
</html>

Comment:

The HTML code represents a basic webpage with some elements for creating and editing content.

Here’s a brief explanation:

<!DOCTYPE html>: Declaration of the HTML version being used, which is HTML5.
<html lang="en">: The root element of the HTML document, with the specified language attribute set to English.
<head>: Contains meta-information about the HTML document, such as character set and viewport settings.
<meta charset="UTF-8">: Specifies the character set as UTF-8 to support a wide range of characters.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Configures the viewport for responsive design on various devices.
<title>Flying-book</title>: Sets the title of the webpage to “Flying-book.”
<h1>加入创作 FZU飞跃手册</h1>: Defines a top-level heading in Chinese, encouraging participation in creating content for the “FZU Flying Handbook.”
The following text is not enclosed in appropriate HTML tags. It seems to be intended for display on the webpage, likely as an instruction or description.
<div>: Opens a division or container for the text and textarea element.
<textarea id="MyID" rows="10" cols="50"></textarea>: Creates a textarea input with the ID “MyID” and specific rows and columns for text input.
The next <div> contains a dropdown (<select>) for choosing a geographic area and a button (<button>) with an associated JavaScript function (onclick="showAlert()").
The dropdown includes options for different geographic areas such as Asia, North America, Europe, and Australia.
The script seems to be using a function called showAlert() when the “保存” (Save) button is clicked. However, the actual JavaScript function is not provided in the code you shared.
Following the dropdown and button, there is additional HTML for an alert that appears to be hidden by default (class="custom-alert"). This alert includes a textarea for entering a title, a button for uploading, and a close button (<input type="button" name="close" value="X" onclick="closeAlert()" />).
The script refers to functions like showAlert() and closeAlert(), but these functions are not defined in the provided code.

Part2 CSS:

<style>
        /* Add styles for the title */
        body {
            font-family: Arial, sans-serif;
        }

        h1 {
            text-align: center;
            color: #333; /* Adjust the color as needed */
        }

        /* Add styles for the button container */
        .button-container {
            text-align: right;
            margin-right: 20px; /* Adjust the margin as needed */
        }

        /* Add styles for the button */
        .button {
            font-family: '华文宋体', 'STSong', 'SimSun', sans-serif; /* Change the font-family */
            font-size: 16px; /* Adjust the font size */
            background-color: #4CAF50; /* Green background color */
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .custom-alert {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #f1f1f1;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
            z-index: 1;
        }

        .button:hover {
            background-color: #45a049; /* Darker green on hover */
        }

        select {
        padding: 8px;
        font-size: 16px;
        border: 1px solid #ccc;
        border-radius: 4px;
        outline: none;
        transition: border-color 0.3s;
        width: 200px; /* 调整宽度 */
        }

        select:hover {
        border-color: #666;
        }

        select:focus {
        border-color: #333;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
        }
    </style>

Comment:

The code is a set of CSS styles that define the appearance and layout for elements in an HTML document.

Here’s an explanation of each part:

Global Styles:
```
body {
    font-family: Arial, sans-serif;
}
```
- This sets the font family for the entire document to Arial or a sans-serif fallback.
Title Styles:
```
h1 {
    text-align: center;
    color: #333; /* Adjust the color as needed */
}
```
- Styles the h1 element by centering the text and setting the color to a dark grayish color (#333).
Button Container Styles:
```
.button-container {
    text-align: right;
    margin-right: 20px; /* Adjust the margin as needed */
}
```
- Styles a container with the class “button-container” by aligning the text to the right and adding a right margin of 20 pixels.

Button Styles:

.button {
    font-family: '华文宋体', 'STSong', 'SimSun', sans-serif; /* Change the font-family */
    font-size: 16px; /* Adjust the font size */
    background-color: #4CAF50; /* Green background color */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.button:hover {
    background-color: #45a049; /* Darker green on hover */
}

Styles a button with the class “button” by setting the font family, size, background color, text color, padding, border, border radius, and cursor. The hover effect changes the background color to a darker shade.

Alert Box Styles:

.custom-alert {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #f1f1f1;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    z-index: 1;
}

Styles a container with the class “custom-alert” representing an alert box. It initially has display: none to hide it. The position is fixed at the center of the screen, and it has padding, border, border radius, and a background color.

Select (Dropdown) Styles:

select {
    padding: 8px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    outline: none;
    transition: border-color 0.3s;
    width: 200px; /* Adjust the width */
}

select:hover {
    border-color: #666;
}

select:focus {
    border-color: #333;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

Styles the <select> element (dropdown) by setting padding, font size, border, border radius, and width. The hover effect changes the border color, and the focus effect adds a box shadow and changes the border color.

These styles collectively enhance the visual presentation and user interaction of elements in an HTML document.

Part3 JavaScript:

<script>
        document.addEventListener('DOMContentLoaded', () => {
            var simplemde = new SimpleMDE({ element: document.getElementById("MyID")});
            document.getElementById("saveButton").addEventListener("click", function() {
                var selectElement = document.getElementById("areaSelect");
                // 获取所选内容
                var distinct = selectElement.value;
                // 获取 SimpleMDE 编辑器中的内容
                var markdownContent = simplemde.value();
                var Title = document.getElementById('MyTitle').value;
                var xhr = new XMLHttpRequest();
                xhr.open("POST", "https://receiver.mynatapp.cc/receiver/GetMdServlet", true);
                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");
                var formData = 'markdownContent=' + encodeURIComponent(markdownContent) + '&Title=' + encodeURIComponent(Title) + '&distinct='+encodeURIComponent(distinct);
                xhr.onload = function() {
                    if (xhr.status === 200) {
                        // 上传成功，可以在这里处理后端返回的响应
                        console.log("Response received:", xhr.responseText);
                        alert("操作成功！");
                        closeAlert();
                        simplemde.value('');
                        document.getElementById('MyTitle').value = '';
                        selectElement.selectedIndex = 0;
                    } else {
                        // 上传失败
                        console.error("File upload failed");
                    }
                };
                xhr.send(formData);
            });
        });


        function showAlert() {
                var alertBox = document.getElementById("customAlert");
                alertBox.style.display = "block";
        }

            // Function to close the alert
        function closeAlert() {
                var alertBox = document.getElementById("customAlert");
                alertBox.style.display = "none";
        }
    </script>

Comment:

The JavaScript is designed to be executed when the DOM (Document Object Model) content is fully loaded.

Here’s a simple explanation of the code:

Initialization on DOM Content Load:

document.addEventListener('DOMContentLoaded', () => {
    // Code inside this block runs when the DOM content is fully loaded
    // Creating a SimpleMDE (Markdown Editor) instance for the element with ID "MyID"
    var simplemde = new SimpleMDE({ element: document.getElementById("MyID")});

    // Adding a click event listener to the button with ID "saveButton"
    document.getElementById("saveButton").addEventListener("click", function() {
        // Code inside this block runs when the "saveButton" is clicked
        // Retrieving selected value from the dropdown with ID "areaSelect"
        var distinct = selectElement.value;

        // Retrieving content from the SimpleMDE editor
        var markdownContent = simplemde.value();

        // Retrieving values from input fields
        var Title = document.getElementById('MyTitle').value;

        // Creating a new XMLHttpRequest object for making an asynchronous request
        var xhr = new XMLHttpRequest();

        // Configuring the request method, URL, and setting request headers
        xhr.open("POST", "https://receiver.mynatapp.cc/receiver/GetMdServlet", true);
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");

        // Creating a data string for form data to be sent
        var formData = 'markdownContent=' + encodeURIComponent(markdownContent) + '&Title=' + encodeURIComponent(Title) + '&distinct='+encodeURIComponent(distinct);

        // Handling the response when the request is complete
        xhr.onload = function() {
            if (xhr.status === 200) {
                // Code inside this block runs if the request is successful (status code 200)
                console.log("Response received:", xhr.responseText);
                alert("Operation successful!");

                // Closing the alert box and resetting input values
                closeAlert();
                simplemde.value('');
                document.getElementById('MyTitle').value = '';
                selectElement.selectedIndex = 0;
            } else {
                // Code inside this block runs if the request is not successful
                console.error("File upload failed");
            }
        };

        // Sending the request with the form data
        xhr.send(formData);
    });
});

Show Alert Function:

function showAlert() {
    // Function to display the alert box
    var alertBox = document.getElementById("customAlert");
    alertBox.style.display = "block";
}

Close Alert Function:

function closeAlert() {
    // Function to hide the alert box
    var alertBox = document.getElementById("customAlert");
    alertBox.style.display = "none";
}

In summary, the script initializes a SimpleMDE editor, attaches a click event listener to a button (“saveButton”), and makes an asynchronous POST request to a specified URL when the button is clicked. The response is handled, and an alert is shown. Additionally, there are functions to show and hide an alert box.

3.2 Part of the back-end code

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.net.URLDecoder;

/**
 * @author LENOVO
 */
public class GetMdServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        resp.setHeader("Access-Control-Max-Age", "3600");
        resp.setHeader("Access-Control-Allow-Headers", "x-requested-with");
        resp.setHeader("Access-Control-Allow-Origin", "*");
        try {
            String parameter1 = req.getParameter("markdownContent");
            String parameter2 = req.getParameter("Title");
            String parameter3 = req.getParameter("distinct");

            String markdownContent = URLDecoder.decode(parameter1, "UTF-8");
            String title = URLDecoder.decode(parameter2, "UTF-8");
            String distinct = URLDecoder.decode(parameter3, "UTF-8");
            // Process received data
            // String receivedData = requestData.toString();
            VerifyPath.setPath("E:\\Desktop\\UpLoadFile\\"+distinct);
            String save = SaveAsMarkdownFile.save(markdownContent, "E:\\Desktop\\UpLoadFile\\"+distinct+"\\"+title+".md");
            //System.out.println("Received data: " + receivedData);
            System.out.println(markdownContent);
            System.out.println(title);
            // In practice, you may need to further process the received data, such as storing it in a database or performing other business logic operations.

            // Return the response to the front end
            resp.setContentType("text/plain; charset=utf-8");
            resp.getWriter().write(save);


            
        } catch (IOException e) {
            e.printStackTrace();
            resp.setStatus(HttpServletResponse.SC_INTERNAL_SERVER_ERROR);
            resp.getWriter().write("Error handling the request.");
        }
    }
}

Comment:

The Java code represents a Servlet class named GetMdServlet that extends HttpServlet. This servlet handles HTTP POST requests and performs the following actions:

Setting CORS (Cross-Origin Resource Sharing) Headers:
- The servlet sets headers to allow cross-origin requests. This is done to enable web pages from one domain to make requests to a different domain.
Processing POST Parameters:
- It retrieves three parameters from the HTTP POST request: “markdownContent,” “Title,” and “distinct.”
- The values of these parameters are URL-decoded using UTF-8 encoding.
Processing Received Data:
- The code sets a specific file path (E:\\Desktop\\UpLoadFile\\ + “distinct”) using the VerifyPath class, assuming it’s a custom class with a method to set a file path.
- It then saves the received Markdown content to a file in the specified path. The file name is constructed from the “title” parameter, and the file extension is set to “.md.”
Logging and Response:
- The servlet logs the received “markdownContent” and “title” to the console.
- It sets the response content type to “text/plain” with UTF-8 encoding.
- It writes the result of the SaveAsMarkdownFile.save() method (presumably the status of the file saving operation) to the response.
Exception Handling:
- If an IOException occurs during the process, it is caught, the stack trace is printed, and an internal server error response with an error message is sent to the client.
Note:
- The VerifyPath and SaveAsMarkdownFile classes are referenced but not provided in the code snippet. These classes likely contain methods related to file paths and saving Markdown content, respectively.

This servlet appears to be designed to handle requests for saving Markdown content to files on the server, and it includes considerations for cross-origin requests and error handling.

4 Task code github repository

Link：
https://github.com/MIECer/FZU-flying-book

*Need VPN

5 Test Report

1. Introduction

The main purpose of this test is to verify the functionality of the website Markdown editor, including editing Markdown text and exporting to get md files, to ensure the stability and ease of use of the editor when users create and edit Markdown documents.

2. Test Scope

Markdown text editing and saving
Formatting support and syntax checking
Exported md files

3. Test cases

3.1 Editing and saving Markdown text

Verify that the user can successfully open the editor and create a new Markdown document.
Ensure that users can successfully edit Markdown text, including inserting text, lists, links, and other elements.
Verify that the user can successfully save the edited Markdown document.

3.2 Format Support and Syntax Checking

Test the editor’s support for Markdown syntax, including but not limited to headings, bold, italics, etc.
Verify that the editor is able to detect syntax errors in user Markdown text.

4. Test Results

The editing and saving function of Markdown text runs stably and users can create and edit documents easily.
The export function is good, and the exported documents are correctly formatted.
The editor performs well in Markdown syntax support and syntax checking, which helps users write standardised Markdown documents.

5. Recommendations and improvements

Add more shortcuts and editing tools to improve users’ editing efficiency.
Provide more Markdown syntax hints and help documents to help users use the editor better.
Regularly update the editor to support the latest Markdown syntax specification.
Consider adding user-defined options when exporting md documents to meet the needs of different users.

6. Test Summary

Through this test, we have fully verified the functionality of the website Markdown editor to ensure its stability and ease of use when users create and edit Markdown documents. It is recommended to conduct regular functionality and performance tests before releasing a new version to ensure that users can enjoy a stable and efficient Markdown editing experience.