1. 程式人生 > >wangeditor 貼上word內容帶樣式解決方法

wangeditor 貼上word內容帶樣式解決方法

 

wangeditor自帶貼上文字樣式過濾:

貼上文字

注意,以下配置暫時對 IE 無效。IE 暫時使用系統自帶的貼上功能,沒有樣式過濾!

關閉貼上樣式的過濾

當從其他網頁複製文字內容貼上到編輯器中,編輯器會預設過濾掉複製文字中自帶的樣式,目的是讓粘貼後的文字變得更加簡潔和輕量。使用者可通過editor.customConfig.pasteFilterStyle = false手動關閉掉貼上樣式的過濾。

 

但不知為何,我的不生效,所以我使用了,自定義處理貼上的文字內容:

自定義處理貼上的文字內容

使用者可通過editor.customConfig.pasteTextHandle

對貼上的文字內容進行自定義的過濾、處理等操作,然後返回處理之後的文字內容。編輯器最終會貼上使用者處理之後並且返回的的內容。

示例程式碼

<div id="div1">
    <p>歡迎使用 wangEditor 富文字編輯器</p>
</div>

<script type="text/javascript" src="/wangEditor.min.js"></script>
<script type="text/javascript">
    var E = window.wangEditor
    var editor = new E('#div1')
    // 關閉貼上樣式的過濾
    editor.customConfig.pasteFilterStyle = false
    // 忽略貼上內容中的圖片
    editor.customConfig.pasteIgnoreImg = true
    // 自定義處理貼上的文字內容
    editor.customConfig.pasteTextHandle = function (content) {
        // content 即貼上過來的內容(html 或 純文字),可進行自定義處理然後返回
        return content + '<p>在貼上內容後面追加一行</p>'
    }
    editor.create()
</script>

我的程式碼

// 自定義處理貼上的文字內容
    this.editor.customConfig.pasteTextHandle = function (content) {
      // content 即貼上過來的內容(html 或 純文字),可進行自定義處理然後返回
      if (content == '' && !content) return ''
      var str = content
      str = str.replace(/<xml>[\s\S]*?<\/xml>/ig, '')
      str = str.replace(/<style>[\s\S]*?<\/style>/ig, '')
      str = str.replace(/<\/?[^>]*>/g, '')
      str = str.replace(/[ | ]*\n/g, '\n')
      str = str.replace(/&nbsp;/ig, '')
      console.log('****', content)
      console.log('****', str)
      return str
    }