How to keep the unfixed attribute of the dom

1

In the dinos demo, I give an extra attribute(data-foo, for example) to the first img in the index.html file of #content,

<div id="content" style="display: none">
  <p>
    This is your dinosaur-enabled editor. The insert menu allows you to insert
    dinosaurs.
  </p>
  <p>
    This paragraph
    <img class="dinosaur" dino-type="stegosaurus" data-foo="abc" />xxx, for
    example,
    <img class="dinosaur" dino-type="triceratops" />
    is full <img class="dinosaur" dino-type="tyrannosaurus" /> of dinosaurs.
  </p>
  <p>Dinosaur nodes can be selected, copied, pasted, dragged, and so on.</p>
</div>

after rendered to the browser, the attribute is lost.

and how can I define the schema to keep the unfixed attributes?

2

still have an extra question:

<div id="content" style="display: none">
  <p class="demo-paragraph">
    This is your dinosaur-enabled editor. The insert menu allows you to insert
    dinosaurs.
  </p>

how to keep the class attribute on the p tag? Must I rewrite the parseDOM and toDom of paragraph ?

3

There’s a difference between DOM attributes and ProseMirror node attributes. You’ll typically want to define an attribute that holds such a value on your node, and make sure your toDOM and parseDOM properties store/load it to a corresponding DOM attribute.

4

thanks!