iT邦幫忙

0

summernote removeFormat ?清除格式該如何使用?

https://summernote.org/deep-dive/#removeformat

$('#summernote').summernote('removeFormat');

這是官方給的,只是我不太懂怎麼用
我現在有自己做一個 custom 按鈕
我想做到的是當我選擇文本的時候按下「按鈕」,就能夠把所有「已選取」的格式刪除恢復成預設,他雖然有預設的 Normal 跟 clear 可以使用,但是我文本(資料庫的data)的來源是其他地方,所以他有很多自帶的 tag 例如 <span style="XXXX"></span> 之類的?這個做法在 summernote 不給用。就是好像不是自己編輯器產生的 tag 好像就沒辦法做出清除的動作,在網路上也找不到相關的作法,想問說有沒有大大知道怎麼處理這個問題?非常感謝.....

黑修斯 iT邦新手 5 級 ‧ 2018-10-12 21:37:33 檢舉
你使用的應該是jQuery的js套件,我看語法是移除id為summernote相關的標記移除,你使用summernote建置的網頁基本上都有綁定summernote,若是從資料庫來的資料,就沒有綁定summernote的id,直接使用jQuery的移除即可。
jQuery的移除範例,請參考:http://www.runoob.com/jquery/jquery-dom-remove.html
黑修斯 iT邦新手 5 級 ‧ 2018-10-12 21:41:23 檢舉
請參考這段程式碼!!
'''
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("span").remove();
});

});
</script>
</head>
<body>
<span style="XXXX">XXXXX</span>
<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">

这是 div 中的一些文本。
<p>这是在 div 中的一个段落。</p>
<p>这是在 div 中的另外一个段落。</p>

</div>
<br>
<button>移除span元素</button>

</body>
</html>
'''

1 個回答

0
黑修斯
iT邦新手 5 級 ‧ 2018-10-13 01:05:17
最佳解答

你使用的應該是jQuery的js套件,我看語法是移除id為summernote相關的標記移除,你使用summernote建置的網頁基本上都有綁定summernote,若是從資料庫來的資料,就沒有綁定summernote的id,直接使用jQuery的移除即可。
jQuery的移除範例,請參考:http://www.runoob.com/jquery/jquery-dom-remove.html
請參考這段程式碼!!

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("span").remove();
});

});
</script>
</head>
<body>
<span style="XXXX">XXXXX</span>
<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">

这是 div 中的一些文本。
<p>这是在 div 中的一个段落。</p>
<p>这是在 div 中的另外一个段落。</p>

</div>
<br>
<button>移除span元素</button>

</body>
</html>
小松菜奈 iT邦研究生 5 級 ‧ 2018-10-13 10:30:38 檢舉

但是我只是要清除格式,文字不要刪除。

黑修斯 iT邦新手 5 級 ‧ 2018-10-14 01:18:58 檢舉

你可以到菜鳥教程編輯器使用,看一下差異,下面代碼是我打的,最後一個按鈕就實作了清空span並保留內容。
程式的方法為:

使用txt1變數先接收span的內容,再刪除span元素,然後在你要的地方加入txt1,成果就是你要的刪除元素。

菜鳥教程編輯器連結

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
function addBefore(){

	var txt1=$("span").text();  
	$("div").prepend(txt1);
	$("span").remove();
};
function addAfter(){

	var txt1=$("span").text();  
	$("div").after(txt1);       // 之後追加新元素,可改before
};
	
function add_clear(){

	var txt1=$("span").text();  
	$("div").append(txt1); 
	$("span").remove();
};

</script>
</head>
<body>
<div id="test">
<span>你好,我是第一個</span>
<span>很好,我是第二個</span>
	<span>掰掰,我是第三個</span>
<p>这是一个段落。</p>
</div>
<button onclick="addBefore()">加入id_test中</button>
<button onclick="addAfter()">追加/div之後</button>
<button onclick="add_clear()">finish</button>
</body>
</body>
</html>

我要發表回答

立即登入回答