如何簡易實現富文本編輯器一樣的功能

在我們開發一個論壇或者博客之類的網站時,一般都會有一個發布信息的界面,裡面輸入文字可以調整字體大小顏色之類的功能,這就是富文本編輯器之類的工具

工具/原料

jquery插件

方法/步驟

我們創建一個div,給它一個id--box,重要的在這裡-->contenteditable="true",不然div的內容我們是編輯不了的,<p id="box" contenteditable="true">哈哈哈我是測試文本</p>

然後我們再創建一個下拉框select,用來選擇需要執行的操作。

<select id="h">    <option>H1</option>    <option>H2</option>    <option>H3</option></select>

最後就是寫腳本來執行了。

$("#h").change(function () {    document.execCommand("formatBlock",false,

$("#h").val())});

這句代碼的意思是當下拉框文本內容改變的時候,觸發一個change事件,然後執行代碼。代碼

改變的是滑鼠選擇文本。

$("#h").val()是獲取下拉框的值,

formatBlock-->《添加一個HTML塊式標籤在包含當前選擇的行, 如果已經存在了,更換包含該

行的塊元素 (在 Firefox中, BLOCKQUOTE 是一個例外 -它將包含任何包含塊元素). 需要提供

一個標籤名稱字符串作為參數。幾乎所有的塊樣式標籤都可以使用(例如. "H1", "P", "DL",

"BLOCKQUOTE"). (IE瀏覽器僅僅支持標題標籤 H1 - H6, ADDRESS, 和 PRE,使用時還必須包含

標籤分隔符 < >, 例如 "<H1>".)》。

false-->《是否展示用戶界面》

execCommand方法具體作用在MDN裡面有,我這給個直鏈就不重複說明了。

https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand

完整代碼:

<html>

<head>

<title>功能測試</title>

<script src="js/jquery.min.js"></script>

</head>

<body>

<select id="h">

<option>H1</option>

<option>H2</option>

<option>H3</option>

</select>

<p id="box" contenteditable="true">哈哈哈我是測試文本</p>

<input type="text">

<script>

$("#h").change(function () {

document.execCommand("formatBlock",false,$("#h").val());

});

</script>

</body>

</html>

其他功能類似,只不過是參數存在不同而已,我說了下大概的原理.嗯~大概就這樣

注意事項

jquery代碼一用js代替

本文內容整理自網絡, 文中所有觀點看法不代表淘大白的立場