Javascript實(shí)現(xiàn)簡單的富文本編輯器附演示
更新時間:2014年06月16日 16:16:49 投稿:whsnow
這篇文章主要介紹了通過Javascript實(shí)現(xiàn)的簡單富文本編輯器,需要的朋友可以參考下
復(fù)制代碼 代碼如下:
<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)獲取光標(biāo)像素坐標(biāo)
- 不到200行 JavaScript 代碼實(shí)現(xiàn)富文本編輯器的方法
- 使用JavaScript實(shí)現(xiàn)表格編輯器(實(shí)例講解)
- JSP實(shí)用教程之簡易頁面編輯器的實(shí)現(xiàn)方法(附源碼)
- Vue.js結(jié)合Ueditor富文本編輯器的實(shí)例代碼
- JS模仿編輯器實(shí)時改變文本框?qū)挾群透叨却笮〉姆椒?/a>
- 分享9個最好用的JavaScript開發(fā)工具和代碼編輯器
- node.js集成百度UE編輯器
- javascript獲取ckeditor編輯器的值(實(shí)現(xiàn)代碼)
- 4個頂級JavaScript高級文本編輯器
相關(guān)文章
javascript 循環(huán)語句 while、do-while、for-in、for用法區(qū)別
本文章介紹了在學(xué)習(xí)javascript中的循環(huán)語句的用法,包while、do-while、for-in、for它們之間的區(qū)別,也是常用的循環(huán)語句了,有需要的朋友可以了解一下2012-03-03js實(shí)現(xiàn)橫向百葉窗效果網(wǎng)頁切換動畫效果的方法
這篇文章主要介紹了js實(shí)現(xiàn)橫向百葉窗效果網(wǎng)頁切換動畫效果的方法,實(shí)例分析了javascript實(shí)現(xiàn)百葉窗效果的技巧,需要的朋友可以參考下2015-03-03javascript獲取xml節(jié)點(diǎn)的最大值(實(shí)現(xiàn)代碼)
這篇文章主要介紹了利用javascript獲取xml節(jié)點(diǎn)的最大值。需要的朋友可以過來參考下,希望對大家有所幫助2013-12-12JS函數(shù)進(jìn)階之prototy用法實(shí)例分析
這篇文章主要介紹了JS函數(shù)進(jìn)階之prototy用法,結(jié)合實(shí)例形式分析了JavaScript函數(shù)中使用prototy擴(kuò)展屬性相關(guān)操作技巧,需要的朋友可以參考下2020-01-01JavaScript記錄光標(biāo)在編輯器中位置的實(shí)現(xiàn)方法
這篇文章主要介紹了JavaScript記錄光標(biāo)在編輯器中位置的實(shí)現(xiàn)方法,涉及JavaScript鼠標(biāo)事件結(jié)合頁面元素的操作技巧,需要的朋友可以參考下2016-04-04JavaScript高級程序設(shè)計閱讀筆記(五) ECMAScript中的運(yùn)算符(一)
ECMAScript中的運(yùn)算符,學(xué)習(xí)js的朋友可以看看2012-02-02