Skip to content

add the ability to add spaces and conver images at the same times, and undo function. #7

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

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

add the ability to add spaces and conver images at the same times, and undo function. #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion public/css/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,4 +29,8 @@ body {
body, button, input, select, textarea {
font-family: Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', Arial, sans-serif;
background-color: #eee;
}
}

.selected{
color: red;
}
61 changes: 54 additions & 7 deletions public/js/content.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,19 +8,40 @@ $(document).ready(function () {
* 添加空格
*/
addSpaceBtn.click(function () {
var content = getInputTextAreaVal();
//每次点击的时候，将当前的元素类动态地添加或删除selected
$(this).toggleClass('selected');

var content = getOutputTextAreaVal() == '' ? getInputTextAreaVal() : getOutputTextAreaVal();
//选中添加空格功能
if ($(this).hasClass('selected')) {
setOutputTextAreaVal(addSpace(content));
} else {
content = getInputTextAreaVal();
//取消添加空格功能
//保留转换图片功能
if (convertPicBtn.hasClass('selected')) {
content = changeImg(content);
}
setOutputTextAreaVal(content);
}
});
/**
* 添加空格
*/
function addSpace(content) {
content = content.replace(/([a-zA-Z0-9)'>)}\]])([\u4e00-\u9fa5])/g, "$1 $2");
content = content.replace(/([\u4e00-\u9fa5])([a-zA-Z0-9('<{\]])/g, "$1 $2");
setOutputTextAreaVal(content);
});
return content;
}

/*
* 转换图片
*/
convertPicBtn.click(function () {
function changeImg(content) {
var newContent = "";
var picStartString = "![]";
var content = getInputTextAreaVal();
console.log(content);
//var content = getInputTextAreaVal();
var preIdx = 0;
var curIdx = content.indexOf(picStartString);
while (curIdx != -1) {
Expand All @@ -35,14 +56,39 @@ $(document).ready(function () {
curIdx = content.indexOf(picStartString, preIdx);
}
newContent += content.substring(preIdx, content.length);
newContent +=
setOutputTextAreaVal(newContent);
return newContent;
}

/*
* 转换图片
*/
convertPicBtn.click(function () {
//每次点击的时候，将当前的元素切换selected样式
$(this).toggleClass('selected');

var content = getOutputTextAreaVal() == '' ? getInputTextAreaVal() : getOutputTextAreaVal();
//选中转换图片功能
if ($(this).hasClass('selected')) {
setOutputTextAreaVal(changeImg(content));
} else {
//取消转换图片功能
//是否保留添加空格功能
content = getInputTextAreaVal();
if (addSpaceBtn.hasClass('selected')) {
content = addSpace(content);
}
setOutputTextAreaVal(content);
}
});

function getInputTextAreaVal() {
return inputTextarea.val();
}

function getOutputTextAreaVal() {
return outputTextarea.val();
}

function setOutputTextAreaVal(data) {
outputTextarea.val(data);
}
Expand All @@ -55,4 +101,5 @@ $(document).ready(function () {
function buildImgPic(picString) {
return '<div align="center"> <img src="' + picString + '" width=""/> </div><br>';
}

});