快捷導(dǎo)航

Javascript實(shí)現(xiàn)簡(jiǎn)單的富文本編輯器附演示

更新時(shí)間：2014年06月16日 16:16:49 投稿：whsnow

這篇文章主要介紹了通過(guò)Javascript實(shí)現(xiàn)的簡(jiǎn)單富文本編輯器,需要的朋友可以參考下

 
<span style="font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="content-type" content="text/html;charset=utf-8"> 
<title>富文本編輯器</title> 
</head> 
<body> 
<fieldset> 
<legend>編輯區(qū)</legend> 
<div> 
<form> 
字體顏色： 
<select onchange="setFontColor(this)"> 
<option value="black">Black </option> 
<option value="red">Red </option> 
<option value="green">Green </option> 
<option value="blue">Blue </option> 
</select> 
字體樣式： 
<select onchange="setFontStyle(this)"> 
<option value="bold">Bold </option> 
<option value="italic">Italic </option> 
<option value="underline">Underline </option> 
<option value="striketthrough">StriketThrough </option> 
</select> 
字體名稱： 
<select onchange="setFontFamily(this)"> 
<option value="serif">Serif </option> 
<option value="sans-serif">Sans-serif </option> 
<option value="monospace">Monospace </option> 
<option value="comic sans ms">Comic Sans </option> 
</select> 
</form> 
</div> 
<br/> 
<div id="editableText" contenteditable="true" style="width:400px;min-height:100px;border:2px dashed #ccc"></div> 
</fieldset> 
<script type="text/javascript"> 
function setFontColor(obj) 
{ 
document.execCommand("forecolor",false,obj.value); 
} 
function setFontStyle(obj) 
{ 
document.execCommand(obj.value,false,null); 
} 
function setFontFamily(obj) 
{ 
document.execCommand("fontname",false,obj.value); 
} 
</script> 
</body> 
</html></span> 

在線演示：http://jsfiddle.net/Web_Code/nPNv3/embedded/result/ 不足之處還請(qǐng)諒解，提出指正方法

您可能感興趣的文章:

富文本編輯器

相關(guān)文章

有趣的JavaScript隱式類型轉(zhuǎn)換操作實(shí)例分析
這篇文章主要介紹了JavaScript隱式類型轉(zhuǎn)換操作,結(jié)合實(shí)例形式分析了JavaScript隱式類型轉(zhuǎn)換操作相關(guān)實(shí)現(xiàn)技巧與注意事項(xiàng),需要的朋友可以參考下
2020-05-05
Javascript之圖片的延遲加載的實(shí)例詳解
這篇文章主要介紹了Javascript之圖片的延遲加載的實(shí)例詳解的相關(guān)資料,這里對(duì)延遲加載和異步加載進(jìn)行了詳解和使用方法，需要的朋友可以參考下
2017-07-07
前端獲取資源的方式(ajax、fetch)以及其區(qū)別詳解
Fetch 被稱之為下一代 Ajax 技術(shù),內(nèi)部采用 Promise 方式處理數(shù)據(jù)API 語(yǔ)法簡(jiǎn)潔明了,這篇文章主要給大家介紹了關(guān)于前端獲取資源的方式(ajax、fetch)以及其區(qū)別的相關(guān)資料,需要的朋友可以參考下
2024-07-07
星期幾的不同腳本寫法(推薦)
下面小編就為大家?guī)?lái)一篇星期幾的不同腳本寫法(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-06-06
JavaScript call apply使用 JavaScript對(duì)象的方法綁定到DOM事件后this指向問(wèn)題
JavaScript對(duì)象與DOM對(duì)象進(jìn)行綁定會(huì)遇到一個(gè)問(wèn)題：如果被綁定的對(duì)象的方法中包含this關(guān)鍵字，當(dāng)事件被觸發(fā)時(shí)this指向的卻是DOM對(duì)象，而不是之前的JS對(duì)象。
2011-09-09
TypeScript命名空間合并講解
這篇文章主要介紹了TS命名空間合并講解，回顧上一節(jié)的內(nèi)容，在上一節(jié)中我們介紹了TS中最常見的聲明合并：接口合并，今天要講的內(nèi)容也是TS中的聲明合并，但這次是命名空間相關(guān)的合并,需要的朋友可以參考一下
2021-12-12
Express實(shí)現(xiàn)前端后端通信上傳圖片之存儲(chǔ)數(shù)據(jù)庫(kù)（mysql）傻瓜式教程（一）
這篇文章主要介紹了Express實(shí)現(xiàn)前端后端通信上傳圖片存儲(chǔ)數(shù)據(jù)庫(kù)（mysql）傻瓜式教程（一）,需要的朋友可以參考下
2015-12-12
js中計(jì)算兩個(gè)日期間的工作日的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇js中計(jì)算兩個(gè)日期間的工作日的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-08-08
JS實(shí)現(xiàn)多物體緩沖運(yùn)動(dòng)實(shí)例代碼
這篇文章主要介紹了JS實(shí)現(xiàn)多物體緩沖運(yùn)動(dòng)實(shí)例代碼，有需要的朋友可以參考一下
2013-11-11
JS中可能會(huì)常用到的一些數(shù)據(jù)處理方法
這篇文章主要給大家介紹了JS中可能會(huì)常用到的一些數(shù)據(jù)處理方法,好多知識(shí)寫下來(lái)也能加深一下自身的記憶,文中給出了詳細(xì)的實(shí)例代碼,對(duì)大家學(xué)習(xí)或者使用JS具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2021-09-09