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>
字體名稱(chēng):
<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)諒解,提出指正方法
- js 公式編輯器 - 自定義匹配規(guī)則 - 帶提示下拉框 - 動(dòng)態(tài)獲取光標(biāo)像素坐標(biāo)
- 不到200行 JavaScript 代碼實(shí)現(xiàn)富文本編輯器的方法
- 使用JavaScript實(shí)現(xiàn)表格編輯器(實(shí)例講解)
- JSP實(shí)用教程之簡(jiǎn)易頁(yè)面編輯器的實(shí)現(xiàn)方法(附源碼)
- Vue.js結(jié)合Ueditor富文本編輯器的實(shí)例代碼
- JS模仿編輯器實(shí)時(shí)改變文本框?qū)挾群透叨却笮〉姆椒?/a>
- 分享9個(gè)最好用的JavaScript開(kāi)發(fā)工具和代碼編輯器
- node.js集成百度UE編輯器
- javascript獲取ckeditor編輯器的值(實(shí)現(xiàn)代碼)
- 4個(gè)頂級(jí)JavaScript高級(jí)文本編輯器
相關(guān)文章
JS高級(jí)運(yùn)動(dòng)實(shí)例分析
這篇文章主要介紹了JS高級(jí)運(yùn)動(dòng),結(jié)合實(shí)例形式分析了javascript運(yùn)動(dòng)框架原理、實(shí)現(xiàn)與應(yīng)用技巧,需要的朋友可以參考下2016-12-12javascript 循環(huán)語(yǔ)句 while、do-while、for-in、for用法區(qū)別
本文章介紹了在學(xué)習(xí)javascript中的循環(huán)語(yǔ)句的用法,包while、do-while、for-in、for它們之間的區(qū)別,也是常用的循環(huán)語(yǔ)句了,有需要的朋友可以了解一下2012-03-03js實(shí)現(xiàn)橫向百葉窗效果網(wǎng)頁(yè)切換動(dòng)畫(huà)效果的方法
這篇文章主要介紹了js實(shí)現(xiàn)橫向百葉窗效果網(wǎng)頁(yè)切換動(dòng)畫(huà)效果的方法,實(shí)例分析了javascript實(shí)現(xiàn)百葉窗效果的技巧,需要的朋友可以參考下2015-03-03javascript獲取xml節(jié)點(diǎn)的最大值(實(shí)現(xiàn)代碼)
這篇文章主要介紹了利用javascript獲取xml節(jié)點(diǎn)的最大值。需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助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é)合頁(yè)面元素的操作技巧,需要的朋友可以參考下2016-04-04JavaScript高級(jí)程序設(shè)計(jì)閱讀筆記(五) ECMAScript中的運(yùn)算符(一)
ECMAScript中的運(yùn)算符,學(xué)習(xí)js的朋友可以看看2012-02-02