I have recently developed a Markdown editor using Vue, similar to the examples found on Vue's website. However, my query is more related to implementation rather than Vue itself. Therefore, I am open to suggestions that do not necessarily involve Vue.
My goal is to create a unified space where users can enter text and immediately see the updated HTML without the need for separate input and preview areas.
In essence, I aim to achieve what Evernote accomplishes.
One possible approach could be to hide the actual textarea input and simulate the preview area to give the impression that the text entry and display occur in the same space.
- Is this the recommended method or are there better alternatives?
- How difficult would it be to mimic an input area in this fashion?
My concern about this technique lies in how to simulate the text cursor (caret) and handle user interactions such as editing previously entered text.
- Should I utilize the
contenteditableattribute and manage the distinction between the preview input and the concealed input? - Would it be more practical to eliminate the hidden input altogether and use a single editable div styled like an input field instead?
I would appreciate any insights or responses regarding this matter.