Javascript實現(xiàn)簡單的富文本編輯器附演示
更新時間：2014年06月16日 16:16:49 投稿：whsnow
這篇文章主要介紹了通過Javascript實現(xià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/ 不足之處還請諒解，提出指正方法
您可能感興趣的文章:
- js 公式編輯器 - 自定義匹配規(guī)則 - 帶提示下拉框 - 動態(tài)獲取光標像素坐標
- 不到200行 JavaScript 代碼實現(xiàn)富文本編輯器的方法
- 使用JavaScript實現(xiàn)表格編輯器(實例講解)
- JSP實用教程之簡易頁面編輯器的實現(xiàn)方法（附源碼）
- Vue.js結(jié)合Ueditor富文本編輯器的實例代碼
- JS模仿編輯器實時改變文本框?qū)挾群透叨却笮〉姆椒?/a>
- 分享9個最好用的JavaScript開發(fā)工具和代碼編輯器
- node.js集成百度UE編輯器
- javascript獲取ckeditor編輯器的值(實現(xiàn)代碼)
- 4個頂級JavaScript高級文本編輯器
相關(guān)文章
有趣的JavaScript隱式類型轉(zhuǎn)換操作實例分析
這篇文章主要介紹了JavaScript隱式類型轉(zhuǎn)換操作,結(jié)合實例形式分析了JavaScript隱式類型轉(zhuǎn)換操作相關(guān)實現(xiàn)技巧與注意事項,需要的朋友可以參考下2020-05-05
這篇文章主要介紹了Javascript之圖片的延遲加載的實例詳解的相關(guān)資料,這里對延遲加載和異步加載進行了詳解和使用方法，需要的朋友可以參考下2017-07-07
前端獲取資源的方式(ajax、fetch)以及其區(qū)別詳解
Fetch 被稱之為下一代 Ajax 技術(shù),內(nèi)部采用 Promise 方式處理數(shù)據(jù)API 語法簡潔明了,這篇文章主要給大家介紹了關(guān)于前端獲取資源的方式(ajax、fetch)以及其區(qū)別的相關(guān)資料,需要的朋友可以參考下2024-07-07
下面小編就為大家?guī)硪黄瞧趲椎牟煌_本寫法(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
JavaScript call apply使用 JavaScript對象的方法綁定到DOM事件后this指向問題
JavaScript對象與DOM對象進行綁定會遇到一個問題：如果被綁定的對象的方法中包含this關(guān)鍵字，當事件被觸發(fā)時this指向的卻是DOM對象，而不是之前的JS對象。2011-09-09
這篇文章主要介紹了TS命名空間合并講解，回顧上一節(jié)的內(nèi)容，在上一節(jié)中我們介紹了TS中最常見的聲明合并：接口合并，今天要講的內(nèi)容也是TS中的聲明合并，但這次是命名空間相關(guān)的合并,需要的朋友可以參考一下2021-12-12
Express實現(xiàn)前端后端通信上傳圖片之存儲數(shù)據(jù)庫（mysql）傻瓜式教程（一）
這篇文章主要介紹了Express實現(xiàn)前端后端通信上傳圖片存儲數(shù)據(jù)庫（mysql）傻瓜式教程（一）,需要的朋友可以參考下2015-12-12
下面小編就為大家?guī)硪黄猨s中 計算兩個日期間的工作日的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
這篇文章主要介紹了JS實現(xiàn)多物體緩沖運動實例代碼，有需要的朋友可以參考一下2013-11-11
這篇文章主要給大家介紹了JS中可能會常用到的一些數(shù)據(jù)處理方法,好多知識寫下來也能加深一下自身的記憶,文中給出了詳細的實例代碼,對大家學習或者使用JS具有一定的參考學習價值,需要的朋友可以參考下2021-09-09