js實現簡單的網頁文字編輯器

2021-06-08 18:27:32 字數 2038 閱讀 3588

有的時候,專案中只需要實現一些簡單的功能就可以了,找了半天,文字編輯器都是一些內容很豐富的成品。索性,自己寫乙個簡單的網頁文字編輯器。不多說,先貼效果,如下圖:

實現這個功能涉及三個檔案,原始碼如下:

1.chat.html

name="statusled" width=16 height=16 border=0 align=left/>

history

2.chat.js

function showfaces(el)  else 

msgbox_toggled = !msgbox_toggled;

}function msgboxkeydown(el, e) else if (e)

keycode = e.which;

else

return true;

switch (keycode)

break;

case 40: // shift+down

if (e.ctrlkey)

break;

case 76:

if (e.ctrlkey)

break;

case 27:

window.close();

break;

} return true;

}// [email protected] add func:changemsgboxstyle

function myfont(el)

function myfontcolor(el)

function myfontsize(el)

// 斜體

function italic(el)

function bold(el)

function underline(el)

注意的是:貌似font ,fontcolor,fontsize是關鍵字,就在前面加了my修飾了一下。 

3.face.js

/**

* @author dml

* [email protected]

* @since 2012.8.9

*_txtareaid string 文字框id (必填)

*_elementid string 指定元素id,表情插入到指定的元素內 (選填)

*/function jointskyface(_txtareaid,_elementid)

//指定元素

facetool.element = function()

//建立表情控制項

facetool.create = function()

var box = $("");

$.each(facetool.faces,function(i,f));

//判斷如果指定的元素不為空,將表情插入到指定元素內

if(facetool.element()[0])else }

/*插入表情*/

facetool.insertface = function()

else

} /*表情描述與路徑*/

facetool.faces =[,,,

,

,

,

,

,

,

,

,

,

,

];return facetool;

}

當然,相應的git需要放置到指定位置。

演示demo見,textedit.rar。

【完】

C 實現簡單文字編輯器

建立乙個窗體檔案,實現對檔案的編輯儲存和對txt檔案的開啟 介面設計 程式源 using system using system.collections.generic using system.componentmodel using system.data using system.drawin...

網頁編寫 富文字編輯器

1.獲取前端作者 標題 文章內容,匯入資料庫 id author type text id title type text act type select editor type text plain style width 1024px height 500px script submit typ...

簡單的文字編輯器做法

1,一般來說在textarea中加入乙個編輯器是很有必要的,我們可以 根據開源 來簡單處理一下 先下tiny mce包,其中包含一些js函式tiny mce.js是最重要的乙個js函式 2,引用函式 script script 3,頁面顯示 td class even width 9 5 style...