修复颜色未能转换的问题

script-universal_function.js

@@ -858,6 +858,24 @@ function searchCollab(event) {
 	showSearch(Cards.filter(card => card.collabId == collabId));
 	return false;
 }
+function rgbToHex(str) {  //RGB(A)颜色转换为HEX十六进制的颜色值
+	let res = /rgba?\((\d{1,3}),(\d{1,3}),(\d{1,3})(,([.\d]+))?\)/ig.exec(str.replace(/\s/g,''));
+	if (res) {
+		let [,r,g,b,a] = res;
+		let rgb = [r,g,b].map(s=>parseInt(s,10));
+		if (a) {
+			rgb.push(Math.round(Number(a) * 255));
+		}
+		return rgb.map(n=>n.toString(16).padStart(2,'0')).join('');
+	}
+	else if (res = /#([a-fA-F0-9]{6,8})/i.exec(str))
+	{
+		return res[1];
+	}
+	else {
+		return '000000';
+	}
+}
 //创建序号类图标
 function createIndexedIcon(type, index) {
 	if (type == 'card') {//卡片头像

script.js

@@ -2243,7 +2243,7 @@ function initialize() {
 			const docObj = range.extractContents(); //移动了Range 中的内容从文档树到DocumentFragment（文档片段对象)。
 			let dom
 			if (color === "#000000") {
-				dom = document.createTextNode(docObj);
+				dom = document.createTextNode(docObj.textContent);
 			} else {
 				dom = document.createElement('span');
 				dom.style.color = color;
@@ -2323,13 +2323,11 @@ function initialize() {
 		}
 		const range = docSelection.getRangeAt(0);
 		let target;
-		console.log(range);
 		if (target = (txtTitleDisplay.contains(range.commonAncestorContainer) && txtTitleDisplay)
 			|| (txtDetailDisplay.contains(range.commonAncestorContainer) && txtDetailDisplay))
 		{
 			let dom = createIndexedIcon(type, id);
 			range.insertNode(dom);
-			console.log(target);
 			target.onblur();
 		} else if (target = (txtTitle.contains(range.commonAncestorContainer) && txtTitle)
 			|| (txtDetail.contains(range.commonAncestorContainer) && txtDetail))
@@ -2361,9 +2359,19 @@ function initialize() {
 	function richTextToCode(parentElement){
 		let code = [];
 		for (let node of parentElement.childNodes) {
-			if (node.nodeName == "#text"){
+			if (node.nodeName == "#text"){ //纯文本
 				code.push(node.nodeValue);
 				continue;
+			} else if (node.nodeName == "SPAN" && node.style.color) { //文字颜色
+				let colorStr = rgbToHex(node.style.color);
+				code.push(`^${colorStr}^${node.textContent}^p`);
+				continue;
+			} else if (node.nodeName == "DIV") {
+				code.push(richTextToCode(node)+'\n');
+				continue;
+			} else if (node.nodeName == "BR") {
+				code.push('\n');
+				continue;
 			}
 			let type, id;
 			if(node.classList.contains("detail-mon")) { //卡片头像
@@ -2397,7 +2405,17 @@ function initialize() {
 		formationBox.refreshDocumentTitle();
 		creatNewUrl();
 	}
+	//标题凡是输入就删除所有的换行
+	txtTitleDisplay.oninput = function(){
+		for (let node of this.children) {
+			if (node.nodeName == "BR") node.remove();
+		}
+	}
 	txtDetailDisplay.onblur = function(){
+		//没有内容或者只有一个换行时，清空内容
+		if (this.textContent.length == 0 || this.textContent == "\n") {
+			this.innerHTML = '';
+		}
 		formation.detail = txtDetail.value = richTextToCode(this);
 		creatNewUrl();
 	}
@@ -5633,9 +5651,11 @@ function fastShowSkill(event) {
 function localisation($tra) {
 	if (!$tra) return;
 	document.title = $tra.webpage_title;
+	controlBox.querySelector(".datasource-updatetime").title = $tra.force_reload_data;
 	formationBox.querySelector(".title-box .title-code").placeholder = $tra.title_blank;
+	formationBox.querySelector(".title-box .title-display").dataset.placeholder = $tra.title_blank;
 	formationBox.querySelector(".detail-box .detail-code").placeholder = $tra.detail_blank;
-	controlBox.querySelector(".datasource-updatetime").title = $tra.force_reload_data;
+	formationBox.querySelector(".detail-box .detail-display").dataset.placeholder = $tra.detail_blank;
 
 	const s_sortList = editBox.querySelector(".search-box .sort-div .sort-list");
 	const sortOptions = Array.from(s_sortList.options);

style.css

@@ -91,7 +91,12 @@ details>summary {
 }
 #rich-text-tools button
 {
-	height: 32px;
+	min-width: 64px;
+}
+#rich-text-tools button,
+#rich-text-tools input
+{
+	height: 40px;
 	vertical-align: middle;
 	text-align: center;
 }
@@ -115,42 +120,37 @@ label[for="siwtch-code-mode"] {
 	margin: 0 0 0 5px;
 }
 label[for="siwtch-code-mode"]::after {
-	font-size: 1.5em;
+	font-size: 1.7em;
 	font-family: var(--icon-font-family);
 	content: "\f121";
 	vertical-align: middle;
 }
 #set-font-color::before {
 	content: "A";
-	font-size: 1.5em;
+	font-size: 1.7em;
 }
 #color-chooser {
-	width: 20px;
-	vertical-align: middle;
+	width: 30px;
 }
 #insert-card-avatar::before {
 	width: 100px;
 	height: 100px;
 	background-image: url(images/CARDFRAME2.PNG), url(images/CARDFRAME2.PNG);
 	background-position: -102px -104px, 0 0;
-	transform: scale(calc(25 / 100));
-	margin: calc(-100px * (1 - (25 / 100)) / 2);
+	transform: scale(calc(32 / 100));
+	margin: calc(-100px * (1 - (32 / 100)) / 2);
 }
 #insert-type-icon::before {
 	width: 32px;
 	height: 32px;
 	background-image: url(images/type.png);
 	background-position-y: calc(-32px * 4);
-	transform: scale(calc(25 / 32));
-	margin: calc(-32px * (1 - (25 / 32)) / 2);
 }
 #insert-awoken-icon::before {
 	width: 32px;
 	height: 32px;
 	background-image: url(images/awoken.png);
 	background-position-y: calc(-32px * 43);
-	transform: scale(calc(25 / 32));
-	margin: calc(-32px * (1 - (25 / 32)) / 2);
 }
 #insert-latent-icon::before {
 	width: 32px;
@@ -163,15 +163,13 @@ label[for="siwtch-code-mode"]::after {
 	background-image: url(images/icon-latent.png);
 	background-position-x: -2px;
 	background-position-y: calc(-32px * 11 - 2px);
-	transform: scale(calc(25 / 32));
-	margin: calc(-32px * (1 - (25 / 32)) / 2);
 }
 #insert-orb-icon::before {
 	width: 36px;
 	height: 36px;
 	background-image: url(images/icon-orbs.png);
-	transform: scale(calc(25 / 36));
-	margin: calc(-36px * (1 - (25 / 36)) / 2);
+	transform: scale(calc(32 / 36));
+	margin: calc(-36px * (1 - (32 / 36)) / 2);
 }
 #rich-text-tools>ul icon {
 	cursor: pointer;
@@ -217,7 +215,14 @@ label[for="siwtch-code-mode"]::after {
 	margin: 0;
 	white-space: break-spaces;
 }
-
+:where(
+	.title-display,
+	.detail-display,
+):empty::before{
+	color: grey;
+	position: absolute;
+	content: attr(data-placeholder);
+}
 .guide-mod .control-box>div.status
 {
 	display: block;