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

summernote jquery js javascript text editor

火爆浪子 2018-10-12 18:52:43 ‧ 4352 瀏覽

分享至

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

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

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

黑修斯 iT邦新手 4 級 ‧ 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邦新手 4 級 ‧ 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>
'''

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

黑修斯

iT邦新手 4 級 ‧ 2018-10-13 01:05:17

最佳解答

<!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>

回應 2
分享
檢舉

火爆浪子 iT邦研究生 1 級 ‧ 2018-10-13 10:30:38 檢舉

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

黑修斯 iT邦新手 4 級 ‧ 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>

登入發表回應