国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

原生富文本編輯器

Simon / 2385人閱讀

摘要：富文本選區為了更精細化控制富文本編輯器的內容，可以使用方法，返回對象。

前言

前不久面某廠，負責人所在部門是做在線文檔的，最后幾個提問都是圍繞離線存儲和富文本編輯相關問題，在這塊有點懵，之前沒有接觸過富文本編輯器原理，在頁面光標能在文本之間隨意選擇，刪除和輸入，一直以為是一種hack技術，原來頁面本身有的一個屬性，配合實現還有js的方法和屬性。在這簡單記錄一下。

實現原理

實現富文本效果有兩種方法：1. iframe+designMode，2. contenteditable。

方法一：iframe+designMode

頁面中iframe嵌入一個子頁面，把iframe的屬性designMode設為on，這個子頁面的所有內容就可以想使用文字處理軟件一樣，對文本進行加粗、斜體等設置。

主頁面





  
  
  富文本編輯

content.html子頁面





  
  
  Document


  
富文本編輯器標題

  

    
  

  

    
內容區塊

    
這里是一些內容，這里是一些內容，這里是一些內容

  

  
底部版權相關申明

實現效果

方法二：contenteditable

可以把contenteditable屬性應用到頁面中的任何元素，然后用戶立即就可以編輯該元素，而不需要iframe頁。


    
標題欄

    
    
內容主體部分

實現效果

操作富文本

只展示富文本的效果意義不大，實際應用中，更多結合用戶操作交互，產生想要的效果，js中已提供相應api。

document.execCommand()

document.execCommand()對文檔執行預定義的命令，而且可以應用大多數格式。可以傳遞3個參數：要執行命令的名稱、瀏覽器是否為命令提供用戶界面的一個布爾值和執行命令必須的值（無需則為null）。

設置粗體document.execCommand("bold", false, null);

ps:需要注意的是執行bold命令，IE和Opera會使用標簽包圍文本，Safari和Chrome使用標簽，而Firefox則使用""標簽，由于各個瀏覽器實現命令的方式不同，加上通過innerHTML實現轉化的方式也不一樣，所以不能指望富文本編輯器會產生一致的HTML。

設置斜體 document.execCommand("italic", false, null)

設置居中對齊document.execCommand("justifycenter", false, null);

設置插入圖片document.execCommand("insertimage", false, "./position.png");

設置字體大小document.execCommand("fontsize", false, this.value);

當然，還有一些其他的設置命令，比如backcolor設置背景色，indent縮進文本，formatblock要包圍當前文本塊HTML標簽，copy將選中文本復制到剪貼板等。

除了命令之外，還有于之相關的一些方法：

document.queryCommandEnabled()檢測某個命令是否可以針對當前選擇的文本。比如document.queryCommandEnabled("bold")返回true表示對當前選中的文本可以執行bold命令。

document.queryCommandState()確定是否已將指定命令應用到選擇的文本。比如document.queryCommandState("bold")返回true表示當前選中的文本用了bold命令加粗的。

document.queryCommandValue()獲取執行命令傳入的值。比如document.queryCommandValue("fontsize")返回5，則用fontsize命令傳入的值是5。

富文本選區

為了更精細化控制富文本編輯器的內容，可以使用document.getSelection()方法，返回Selection對象。在Selection對象上提供了很多實用的方法。

var selection = document.getSelection();
console.log("當前選中的文本：");
console.log(selection.toString());

// 取得代表選區的范圍                                                
var range = selection.getRangeAt(0);
console.log(range);
// 包裹一個標簽使得選中內容突出
var span = document.createElement("span");
span.style.backgroundColor = "#f0f";
range.surroundContents(span);

console.log("當前文本編輯器內容：");
console.log($richedit.innerHTML);

總結

一般來說，為了便利性，安全性，避免重復造輪子，在實際工作中都是直接用一些開源組織編寫的富文本編輯器，比如ueditor,umEditor,handEditor等，當然應用在一些場景也是需要自己理解和會寫一部分功能，比如在線文檔。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52472.html

相關文章

  • 原生富文本編輯器

    摘要：富文本選區為了更精細化控制富文本編輯器的內容，可以使用方法，返回對象。 前言 前不久面某廠，負責人所在部門是做在線文檔的，最后幾個提問都是圍繞離線存儲和富文本編輯相關問題，在這塊有點懵，之前沒有接觸過富文本編輯器原理，在頁面光標能在文本之間隨意選擇，刪除和輸入，一直以為是一種hack技術，原來頁面本身有的一個屬性，配合實現還有js的方法和屬性。在這簡單記錄一下。 實現原理 實現富文本效...

    TerryCai 評論0 收藏0

  • android 記一次富文本加載之路

    摘要：一段簡單的代碼程序猿原生加載富文本原生的直接加載如果是有方法，但是這種加載方式，圖片無法在顯示。以上的兩種方式按自己的需求來進行使用的，試用于后臺接口直接返回數據給移動端進行加載的。 文章鏈接：https://mp.weixin.qq.com/s/69TRkmFL1aNuSqfw4ULMJw 項目中經常涉及到富文本的加載，后臺管理端編輯器生成的一段html 代碼要渲染到移動端上面，一...

    siberiawolf 評論0 收藏0

  • zx-editor 移動端（HTML5）富文本編輯器，可與原生App混合(hybrid)開發

    摘要：移動端文檔富文本編輯器，支持圖文混排引用大標題無序列表，字體顏色加粗斜體。可用于獨立項目開發，也可以用于與原生混合開發。，圖片文件最大尺寸限制，單位，默認，編輯器左右內邊距，默認像素，是否顯示底部工具欄圖片標簽連接添加等圖標。 ZxEditor 移動端HTML文檔（富文本）編輯器，支持圖文混排、引用、大標題、無序列表，字體顏色、加粗、斜體。 可用于獨立web項目開發，也可以用于與原生A...

    lansheng228 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<