前端實現富文字框

2021-08-19 18:57:13 字數 1146 閱讀 6828

這次我們項要求實現部落格形式的富文字框,之前沒有接觸過,頓時毫無頭緒。不過還好在網上找到了乙個差不多的例子。下面附上**:

知識點:

實現富文字框可以使用iframe,修改iframe的designmode屬性。

js的selectionrange()可以選中文字,返回乙個物件,可以通過該物件的text屬性可以得到被選中的文字。

var sel = myediter.document.selection.createrange();

alert(sel.text);

可以使用execommand()改變被選中文字的樣式。

var sel = myediter.document.selection.createrange();

sel.execcommand("bold");

execommand方法。

字型--宋體、黑體、楷體等

execcommand("fontname","",字型)

字型大小--字型大小大小

execcommand("fontsize","",字型大小)

加重execcommand("bold")

斜體execcommand("italic")

下劃線execcommand("underline")

刪除線execcommand("strikethrough")

居左execcommand("justifyleft")

居右execcommand("justifyright")

居中execcommand("justifycenter")

剪下execcommand("cut")

拷貝execcommand("copy")

貼上execcommand("paste")

取消操作--ie5.0以後可以無限取消

execcommand("undo")

重複操作

execcommand("redo")

得到element元素的css:

element.currentstyle || document.defaultview.getcomputedstyle(element, null);

判斷是否有某種樣式guerycommand.

document.querycommandstate('italic');

富文字框wangEditor

個人覺的官網文件寫的還是非常詳細的 的開發需要,畢竟我們開發中遇到的富文字框不需要像word或者wps功能這麼齊全.功能齊全的富文字框配置必然 個人專案中wangeditor富文字框的簡單配置 functioneditor editor.customconfig.lang editor.custom...

js處理富文字框

通過js向富文字框輸入 我很好 public void setcontent string content contentdocument 容納框架的內容的文件。返回 frame iframe 生成的文件物件。contentwindow 返回 frame iframe 生成的 window 物件。d...

ueditor 富文字框不載入

在 ueditor.conf.js 中講解了定義編輯器的根路徑,內容 如下 編輯器資源檔案根路徑。它所表示的含義是 以編輯器例項化頁面為當前路徑,指向編輯器資源檔案 即dialog等資料夾 的路徑。鑑於很多同學在使用編輯器的時候出現的種種路徑問題,此處強烈建議大家使用 相對於 根目錄的相對路徑 進行...