Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Checkbox state #277

Open
tised opened this issue Jan 17, 2022 · 3 comments
Open

Checkbox state #277

tised opened this issue Jan 17, 2022 · 3 comments

Comments

@tised
Copy link

tised commented Jan 17, 2022

Hello, I found out that checkbox state after checking it not saved in HTML. so it appears always unchecked

Is there are way to fix that ?
@tised
Copy link
Author

tised commented Jan 25, 2022

Just pinging here, as it quite serious issue for us

@tised
Copy link
Author

tised commented Mar 29, 2022

Ping again :)

@Hongyang666
Copy link

Hongyang666 commented Apr 24, 2022 •
edited

对源码做如下修改：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="user-scalable=no">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="normalize.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" type="text/css" href="checkbox_style.css">
</head>
<body>
<div id="editor" contenteditable="true"></div>
<script type="text/javascript" src="rich_editor.js"></script>
</body>
</html>

checkbox_style.css

input[type=checkbox] {
    cursor: pointer;
    position: relative;
}

input[type=checkbox]:not([class=checkbox-checked]):after {
    position: absolute;
    top: 0;
    background-color: white;
    width: 18px;
    height: 18px;
    display: inline-block;
    visibility: visible;
    padding-left: 0px;
    text-align: center;
    content: '';
    border-radius: 2px;
    box-sizing: border-box;
    border: 1px solid #ddd;
}

.checkbox-checked::after {
    position: absolute;
    top: 0;
    background-color: blue;
    width: 18px;
    height: 18px;
    display: inline-block;
    visibility: visible;
    padding-left: 0px;
    text-align: center;
    content: '';
    border-radius: 2px;
    box-sizing: border-box;
    border: 1px solid #ddd;
}

/**选中对号样式*/
.checkbox-checked::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 6px;
    width: 4px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    z-index: 1;
}

rich_editor.js 最后面添加

// 复选框点击事件
RE.editor.addEventListener("click", function(ev){
    var target = ev.target || ev.srcElement;
    if(target.nodeName.toLowerCase() == 'input' && target.type == 'checkbox'){
        if(target.className == 'checkbox-checked'){
            target.removeAttribute("class");
        }else {
            target.className = 'checkbox-checked';
        }
    }
});

@phucnt3110 phucnt3110 mentioned this issue Mar 20, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@tised @Hongyang666