js簡單的文字編輯器(所見即所得)

2021-06-09 15:41:33 字數 564 閱讀 6045

專案頁面需要乙個簡單的文字編輯器,網上的那些富文字編輯器功能都很強大,很多東西用不到,所以自己用js寫了乙個簡單的文字編輯器。

**如下:

3號字4號字

5號字6號字

7號字

實現原理:

1.將id為editarea的div元素新增contenteditable,這個div則擁有了編輯的功能,document執行的execcommand函式就能針對這個div中選中的區域進行相應的操作。

2.至於document的execcommand函式怎麼用的,網上有很多解釋,我就不重複說了。

效果圖如下所示:(在chrome和ie8下顯示的html原始碼有點不同,換行回車,chrome用表示的,而ie8則用表示的)

所見即所得富文字編輯器實現原理

相信很多人都使用過多種富文字編輯器,富文字編輯器常用於編輯部落格 使用者互動,富文字編輯器分為兩種 所見即所得和非所見即所得 兩種富文字編輯器的實現原理是不相同的。1.非所見即所得編輯器 這種編輯器的實現原理很簡單,用textarea元素就可以實現,假如要實現粗體 斜體 下劃線 顏色字 的效果,只需...

所見即所得富文字編輯器實現原理 轉

如何做到編輯像文字域,又能夠即時所見呢?答案就是使用iframe作為內容編輯區域。iframe本身也是乙個巢狀頁面,它如何能夠被編輯呢?這裡有一些關鍵的屬性,它們可以做到讓iframe可以被編輯。但是在實際執行的時候,你是否發現除了chrome瀏覽器外 用ietester,firefox,chrom...

所見即所得文章編輯器CKEditor的使用方法

2 在 aspx 頁面或者 master 模板頁 標籤中載入 ckeditor.js 在標籤中使用ckeditor runat server 與其他 net 控制項使用方法相同,設定 text 可以方便與資料來源進行互動。3 config.js 的自定義 ckeditor.editorconfig ...