表單（五）富文字編輯

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

【建立富文字編輯區域】

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

eventunit.addhandler(window, "load", function

());

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

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

1.執行某個命令：

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

引數1：命令名，

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

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物件的方法：

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); //給選取新增黃色背景

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));

var hidddernform = document.getelementbyid("hiddenform");

eventunit.addhandler(hidddernform,"submit",function(event));

富文字編輯

關於字型方面，見 font。下面就是找到的一些免費開源的富文字外掛程式比較。以下僅供參考。文件上說，quill 是乙個為相容性和可擴充套件性而構建的所見即所得的現代編輯器。截至 2019.12.12，仍然處於有人維護狀態，結合上面的考慮點，有下面的一些個人體會。好的方面 不好的方面 文件上說，sum...

ios富文字編輯

最近的專案要用到富文字編輯來實現其中的修改文件功能。先是在github是找了一些editor，效果都不是很滿意，多是使用coretext來實現的，但attribute text與html的轉換十分繁鎖，所找到的控制項只有外讀時轉化為html的方法，而沒有載入時轉換到attribute text的方法...

tinymce vue 富文字編輯

用texterea最多支援換行，如果文字資訊想要更加豐富一些，比如增加格式樣式，比如增加，textarea就愛莫能助了 在網上搜尋了一番，發現tinymce是比較方便好用的一款富文字編輯 官網1.富文字rich text editor在增刪查改四個操作下，只有增和改是需要出現具體的工具欄的，在檢視的...