表單（五）富文字編輯

富文字編輯的本質：在頁面中嵌入乙個包含空html頁面的iframe，通過設定designmode屬性為on，該空白html頁面可以被編輯。

【建立富文字編輯區域】

方法一: 在頁面完全載入後將designmode屬性設定為on

eventunit.addhandler(window, "load", function
());

class="editarea"

id="richeditdiv" style="height:100px;width:100px;" contenteditable>div>

contenteditable有三個值：「true」 開啟，「false」關閉，「inherit」繼承父元素

【操作富文字】

1.執行某個命令：

document.execcommand(引數1，引數2，引數3)

引數1：命令名，引數2：瀏覽器是否為該命令提供使用者介面（一般為false），引數3：該命令需要的值（若不需要則為null）

3.確定是否已將命令執行到選擇的文字上：

document.querycommandstate(命令名)

4.獲得執行命令時傳入的第三個引數：

document.querycommandvalue(命令名)

執行bold命令時，ie和opera會使用標籤包圍文字，firefox會使用

【富文字選區】

1.使用 iframe 的 getselection()方法，返回乙個selection物件，可以確定實際選擇的文字。
frames["richedit"].getselection();
2.ie支援的是document的selection屬性  
frames["richedit"].document.selection;

selection物件利用dom範圍來管理富文字選區。

selection物件的方法：

1. addrange（範圍）將指定的範圍新增到選區中 2. collapse（指定節點，偏移位置）將選區摺疊到指定節點中相應的偏移位置 3. collapsetoend() 將選區摺疊到終點 4. collapsetostart() 將選區摺疊到起點 5. containsnode(指定的節點) 確定指定節點是否包含在選區中 6. deletefromdocument() 從文件中刪除選區中的文字，效果等同document.execcommand("delete",false,null) 7. extend(指定節點，偏移位置) 8. getrangeat(索引) 返回對應索引選區中的dom範圍 9. removeallranges() 從選區中移除所有dom範圍，相當於整個選區都移除掉了 10. removerange(範圍) 從選區中移除指定的範圍 11. selectallchildren(指定節點) 清除選區，並選擇指定節點的所有子節點 12. tostring() 返回選區包含的文字內容

例子：為選區新增黃色背景

var selection = frames["richedit"].getselection();
var selectedtext = selection.tostring();  //取得選區文字
varrange = selection.getrangeat(？);  //取得選區範圍
var span = frames["richedit"].document.createelement("span");
span.style.backgroundcolor = "yellow";
range.surroundcontents(span);     //給選取新增黃色背景

由於ie8及更早版本不支援dom範圍,只支援文字範圍，上面的例子用ie的文字範圍來實現：

var selection = frames["richedit"].document.selection;
varrange = selection.createrange(); //建立文字範圍
range.pastehtml(""+range.htmltext+"");

【提交富文字】

方法一：從iframe中提取html，將其插入到隱藏的表單字段中。

var hidddernform = document.getelementbyid("hiddenformid"); //隱藏表單
eventunit.addhandler(hidddernform,"submit",function(event));

方法二：對於contenteditable的元素

var hidddernform = document.getelementbyid("hiddenform");
eventunit.addhandler(hidddernform,"submit",function(event));

表單（五）富文字編輯

富文字編輯

ios富文字編輯

tinymce vue 富文字編輯

表單（五）富文字編輯

富文字編輯

ios富文字編輯

tinymce vue 富文字編輯

相關推薦