come leggere il contenuto di contentEditable div?

Question

Io uso un div contentEditable e voglio accedere al suo contenuto dopo che l'utente lo ha modificato (onBlur). Come posso accedere a innerHtml o textContent dell'elemento DOM? Qualche idea ?

Ecco un semplice esempio:

import Html exposing (div, text) 
import Html.App exposing (beginnerProgram) 
import Html.Events exposing (onBlur) 
import Html.Attributes exposing (contenteditable) 


main = 
    beginnerProgram { model = "Hello", view = view, update = update } 


view model = 
    div [contenteditable True, onBlur (SaveInput)] [ text model ] 


type Msg = SaveInput 


update msg model = 
    case msg of 
    SaveInput -> 
     "ok" 

desidero sostituire "ok" con una formula utilizzando textContent per ottenere il valore immesso dall'utente. Sto usando elm v 0.17.

Answer 1

Ecco un modo per farlo. Dovrai estrarre il valore dall'oggetto evento usando Json.Decode.

import Html exposing (Html, div, text) 
import Html.App exposing (beginnerProgram) 
import Html.Events exposing (onBlur, on) 
import Html.Attributes exposing (contenteditable, id) 
import Json.Decode as Json 
import Debug 

main : Program Never 
main = beginnerProgram { model = "Hello" , view = view , update = update } 

type alias Model = String 

view : Model -> Html Msg 
view model = 
    div [ contenteditable True ,on "blur" (Json.map SaveInput  targetTextContent)] 
    [ text model ] 

targetTextContent : Json.Decoder String 
targetTextContent = 
    Json.at ["target", "textContent"] Json.string 

type Msg = SaveInput String 

update : Msg -> Model -> Model 
update msg model = 
    case msg of 
    SaveInput str -> (Debug.log "saving" str) 

Answer 2

ho unito la risposta di Tosh con un piccolo aiuto in più utenti utilizzando Dom.focus in modo che dopo aver fatto clic sull'elemento da modificare, il cursore diventa visibile correttamente.

update ... = 
     EditTitle -> 
      (model | editTitle = True } 
      , Dom.focus "view-title" |> Task.attempt FocusResult 
      ) 



viewNameEditor : Model -> Html Msg 
viewNameEditor m = 
    let 
     attrs = 
      if m.editTitle then 
        [ contenteditable True 
        , on "blur" (Json.map SaveViewName targetTextContent) 
        , id "view-title" 
        ] 

      else 
        [ contenteditable False 
        , onClick EditTitle 
        , id "view-title" 
        ] 
    in 
     div attrs [ text current.name ]