Question

我已使用此网站上的教程创建了基本内容可编辑部分。 HTML 5 Contenteditable

我在顶部的.toolbar中做了一个保存按钮。当我去更改文本并按.saveContent按钮时，它不会将内容保存到localStorage，因此刷新后，它会消失并返回默认文本。

由于我已经建立了登录系统，因此我将该页面制作为.php页面，这是导致它无法正常工作的一个因素。

此处的代码：

var theContent = $('#editable');
        $('.saveContent').on('click', function() {
            var editedContent = theContent.html();
            localStorage.newContent = editedContent;
        });
            
        if(localStorage.getItem('newContent')) {
            theContent.html(localStorage.getItem('newContent'));
        }

/* ~ Copyright (c) Summit Learning Management System (made by students, for students). 2019. */

html > body {
    overflow: hidden;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Trebuchet MS', sans-serif;
}

#wrapper {
    position: absolute;
    overflow: hidden;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #1B315E;
}

.backdrop {
    background-image: url(Assets/Images/backdrop.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.loginBox {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 320px;
    height: 420px;
    background: rgba(0,0,0,0.6);
    color: #FFF;
    padding: 40px 30px;
    box-sizing: border-box;
}

.loginBox p {
    margin: 0;
    padding: 0;
    font-weight: bold;
}

.loginBox input {
    width: 100%;
    margin-bottom: 20px;
}

.loginBox input[type="text"], input[type="password"] {
    border: none;
    outline: none;
    border-bottom: 1px solid #FFF;
    background: transparent;
    height: 40px;
    font-size: 14px;
    color: #FFF;
}

.loginBox input[type="submit"] {
    border: none;
    outline: none;
    height: 40px;
    font-size: 16px;
    color: #FFF;
    background: #777;
    font-weight: bold;
}

.loginBox input[type="submit"]:hover {
    cursor: pointer;
    color: #FFF;
    background: #888;
}

 .institution, .message {
    font-size: 12px;
    text-align: justify;
}

* {
    box-sizing: border-box;
}

.navigation {
    background: #333;
    overflow: hidden;
    font-family: 'Trebuchet MS', sans-serif;
}

.navLinks {
    margin-top: 8px;
    margin-right: 4px;
    float: right;
    border: none;
    outline: none;
    color: #1B315E;
    background: #B6B6B6;
    padding: 4px 6px;
    font-size: 16px;
    text-align: center;
}

.navLinks:hover {
    background: #A5A5A5;
}

.menuDropDown {
    float: left;
    overflow: hidden;
}

.menuDropDown > .menuButton {
    border: none;
    outline: none;
    color: #FFF;
    background: inherit;
    font: inherit;
    margin: 0;
    font-size: 16px;
    padding: 12px 6px;
}

.menuButton:hover, .navigation > .menuDropDown:hover > .menuButton {
    background: #999;
    color: #1B315E;
    outline: none;
    border: none;
}

.menuContent {
    display: none;
    width: 100%;
    background: none;
    position: absolute;
    z-index: 1;
    left: 0;
    overflow: auto;
    max-height: 85vh;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.menuDropDown:hover > .menuContent {
    display: block;
}

.menuColumn {
    float: left;
    width: 25%;
    padding: 8px;
    overflow-y: auto;
    background: #999;
    height: 235px;
}

.menuColumn > a {
    float: none;
    color: #1B315E;
    padding: 10px;
    font-size: 14px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.menuRow:after {
    content: "";
    display: table;
    clear: both;
}

.menuColumn > a:hover {
    background: #A5A5A5;
}

.menuColumn > a.current {
    background: #B6B6B6;
}

.menuHeader {
    color: #1B315E;
    margin-top: 0px;
    margin-bottom: 8px;
}

.workspaceMain {
    float: left;
    width: 72.5%;
    height: calc(100vh - 43px);
    position: relative;
    overflow: auto;
    padding-right: 2px;
    background: #FFF;
}

.toolbar {
    background: #777;
    border-bottom: 1px solid #666;
}

.toolbar > .saveContent {
    color: #1B315E;
    border: none;
    outline: none;
    background: #B6B6B6;
    padding: 6px 6px;
    font-size: 12px;
    font: inherit;
}

.saveContent, .saveContent:hover, .toolLinks:hover {
    background: #A5A5A5;
}

.toolLinks {
    margin-top: 2px;
    margin-right: 4px;
    float: right;
    border: none;
    outline: none;
    color: #1B315E;
    background: #B6B6B6;
    padding: 4px 6px;
    font-size: 16px;
    text-align: center;
}

.mainHeader {
    text-align: center;
    color: #1B315E;
}

table {
    width: 100%;
    font-size: 12px;
}

.tableName {
    color: #1B315E;
    font-size: 14px;
    font-weight: bold;
}

<!DOCTYPE HTML>
<!--
    ~ Copyright (c) Summit Learning Management System (made by students, for students). 2019.
-->
<html lang="en-AU">
<head>
    <title>Welcome &#8212; Summit &#8212; School Name</title>
    <link rel="stylesheet" type="text/css" href="../style.css"> <!-- Internal Stylesheet -->
    <script src="https://kit.fontawesome.com/d3afa470fb.js"></script> <!-- Vector Icons -->
    <link rel="shortcut icon" href="../Assets/Images/favicon.png"> <!-- Favicon -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </head>
    <body>
    <?php
    session_start();

    if (!isset($_SESSION['loggedin']) || $_SESSION['loggedin'] == false ) {
        header("Location: index.php");
    }
    ?>
    <div id="wrapper">
        <div class="navigation">
            
            <button class="navLinks" title="Logout"><i class="fas fa-sign-out-alt"></i></button>
            <button class="navLinks" title="Help"><i class="fas fa-question-circle"></i></button>
            <button class="navLinks" title="Quick Links"><i class="fas fa-bookmark"></i></button>
            
        <div class="menuDropDown">
            <button class="menuButton" title="Site Navigation"><i class="fas fa-bars"></i> Menu</button>
            <div class="menuContent">
            <div class="menuRow">
                
                <div class="menuColumn"> <!-- Home Workspace -->
                    <h5 class="menuHeader">Home Workspace</h5>
                    <a href="#" title="Welcome" class="current"><i class="fas fa-door-open"></i> Welcome</a>
                </div>
                
                <div class="menuColumn"> <!-- Learning Workspace -->
                </div>
                
                <div class="menuColumn"> <!-- Student Management Workspace -->
                </div>
                
                <div class="menuColumn"> <!-- Administration Workspace -->
                </div>
                
                </div>
            </div>
            </div>
        </div>
            <div class="workspaceMain">
                <div class="toolbar">
                <button class="saveContent" title="Save Changes"><i class="fas fa-save"></i> Save</button>
                <button class="toolLinks" title="Collapse Panel"><i class="fas fa-arrow-right"></i></button>
                <button class="toolLinks" title="Change Background Colour"><i class="fas fa-fill-drip"></i></button>
                </div>
                
                    <h3 class="mainHeader" id="editable" contenteditable="true">SCHOOL NAME</h3>
                    <table class="tableSet" id="editable" contenteditable="true">
                <caption class="tableName">Weekly Outline</caption>
                </table>
                </div>
        
            <div class="workspaceSide"></div>
        </div>
    </body>
</html>

任何帮助将不胜感激。

谢谢汤姆

Answer 1

您需要使用2019-05-06将值存储在本地存储中

您的外观如下：

localStorage.setItem('key', value)

Answer 2

您两次使用ID为“可编辑”，可以更改并重试吗？

Answer 3

<span (focusout)="JumpTo()" contenteditable="true">Click to Change text</span>

JumpTo(){
    var contenteditable = document.querySelector('[contenteditable]');
    localStorage.setItem('newContent',contenteditable.textContent);
  }

If you want to change it instantly use ngOnChanges()

内容可编辑，不保存在localStorage中

3 个答案: