挺好用的可編輯div元件(一)

2021-09-19 20:55:38 字數 1462 閱讀 7497

最近接到乙個需求,要實現乙個能輸入帶顏色的文字的輸入框,可以渲染html字串。立刻就想到了html的contenteditable屬性。在html中,任何元素都可以編輯,只要將元素的contenteditable屬性設定為true。

eventutil是封裝的跨瀏覽器的事件物件。

>

class

="base-edit-div"

:style=""

contenteditable

="true"

@focus

="$emit('focus', $event)"

@click

="$emit('click')"

@blur

="$emit('blur', $event)"

@keydown

="$emit('keydown', $event)"

@keyup

="$emit('keyup', $event)"

@input

="dominput"

>

div>

template

>

>

import eventutil from

'./eventutil.js'

export

default

, disabled:},

mounted()

,beforedestroy()

, methods:

,emptyinnerhtml()

,dominput

(event)}}

script

>

lang

="less"

scoped

>

.base-edit-div

style

>

>

class

="content"

>

class

="beautiful"

:text

="checkhtml"

v-model

="checkhtml"

>

base-edit-div

>

div>

template

>

>

import baseeditdiv from

'./baseeditdiv'

export

default

,data()

}}script

>

lang

="less"

scoped

>

.content

}style

>

bochs還是挺好用的,有時間研究研究

無意中連到純c論壇,此處的os試驗很火,還有若干個正在開發中的試驗性os.論壇上各個充滿了學習的熱情,彷彿一夜之間,全民都寫作業系統了.google了一下,才發現網上開源的os專案多如牛毛.不過我覺得,要學習os,看看linux早期核心的源 足以掌握大方向.作業系統是什麼,比較特殊的軟體而已.寫os...

自定義子元件的雙向資料繫結 可編輯div

新建子元件inputdiv.vue class sessionlistbox footer input contenteditable true ref inpmsgref v text msg input inputmsg focus islocked true blur islocked fal...

讓div可編輯,設定標籤的可讀可寫屬性

1 新增contenteditable屬性讓文字處於可編輯狀態,這裡可以編輯 contenteditable inherit 預設 contenteditable plaintext only 輸入純文字 contenteditable true contenteditable false cont...