關于vue2非表單元素使用contenteditable="true"(富文本編

Drummor 發布于2019-08-21 17:46 / 895人閱讀

摘要：最近自行研究的開發后端用前端用用戶消息發送框需要用到富文本編輯器我需要的東西很簡單可以寫文字可以發表情圖片和文件可以發表情圖片和文件可以黏貼剪切板的文字和圖片一般富文本編輯器有更豐富的格式化工具功能太多余定制也麻煩干脆自己開發說干就干上代碼

最近自行研究chat的開發,后端用go,前端用vue,用戶消息發送框需要用到富文本編輯器,我需要的東西很簡單:

可以寫文字,可以發表情、圖片和文件

可以發表情、圖片和文件

可以黏貼剪切板的文字和圖片

一般富文本編輯器有更豐富的格式化工具,功能太多余,定制也麻煩.干脆自己開發,說干就干.

上代碼:

用pre的理由:不希望用戶黏貼html代碼后直接把效果顯示出來
用v-html的理由:圖片要顯示
其他理由:部分代碼黏貼還能原樣顯示

碰到無法使用v-model綁定的問題,然后找了幾篇關于這方面的文章:
https://segmentfault.com/a/11...
https://segmentfault.com/a/11...

結果都有問題,包括作者后面更新的最終版的代碼,還是存在問題.

我只是要一個可以寫內容,然后可以讀內容的容器.所以有了以下簡單粗暴的做法.

代碼到這里就結束了,沒有光標問題和其他問題,整個過程只v-html只為賦值,后面的取值都用this.$refs.sendContent.innerHTM,只需注意清空值的時候不能用this.sendContent = ""

云服務器 GPU云服務器 Quote quoted quot python b&quot&quot

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

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

vue2 實現 div contenteditable=&quot;true&quot; 類似于 v

摘要：解決思路二使用組件單獨聲明一個組件，在組件內部處理數據也就是，并將數據返回給父組件。該組件應該是一個元素也不一定非要是的子元素，父元素的大小即為子元素的大小。問題在 vue2 中對表單控件有著良好的雙向數據綁定機制，但是對于要特定實現某些功能的輸入時，我們就不得不使用到 contenteditable=true 的 div ，而在這個 div 上是使用 v-model 是沒有效果的...

jokester 2019-08-20 14:07 評論0 收藏0
JavaScript 表單腳本——“富文本編輯”的注意要點

摘要：操作富文本方法與富文本編輯交互的方式，就是使用。將當前選中區復制到剪貼板并刪除之。增加選中文本的縮進。富文本選區在富文本編輯器中，使用框架的方法，可以確定實際選擇的文本。這個方法是對象和對象的屬性，調用它返回一個表示當前選擇文本的對象。富文本測試 BX9054: 各瀏覽器對 document.execCommand 方法的首參數可選值范圍存在差異部分內容來自w3c help：htt...

MartinDai 2019-08-19 17:30 評論0 收藏0
JS學習筆記（第14章）（表單腳本）

摘要：布爾值，表示當前字段是否被禁用。指向當前字段所屬表單的指針只讀。文本框腳本在中，有兩種方式來表現文本框一種是使用元素的單行文本框，另一種是使用的多行文本框。然后，我們把這個函數指定為每個文本框的事件處理程序。本章知識架構 showImg(https://segmentfault.com/img/bVbvCTV?w=921&h=713); var EventUtil = { /...

BlackHole1 2019-08-26 10:23 評論0 收藏0
高程3總結#第14章表單腳本

表單腳本表單的基礎知識 HTMLFormElement有自己獨特的屬性和方法 acceptCharset，服務器能夠處理的字符集，等價于HTML中的accept-charset特性 action，接受請求的URL，等價于HTML中的action特性 elements，表單中所有控件的集合 enctype，請求的編碼類型，等價于HTML中的enctype特性 length，表單中控件的數量 m...

Tony 2019-08-23 12:04 評論0 收藏0