Vue 2 contentEditable with v-model

Question

I\'m trying to make a text editor similar to Medium. I\'m using a content editable paragraph tag and store each item in an array and render each with v-for. However, I\'m ha

Answer 1

I think I may have come up with an even easier solution. See snippet below:

    


    

        

            

                

                    
                
                

                    Bold
                    Change me!
                
            
        
    
    

    

Explanation:

You can edit the span as I have added the tag contenteditable. Notice that on input, I will call the handleInput function, which sets the innerHtml of the content to whatever you have inserted into the editable span. Then, to add the bold functionality, you simply select what you want to be bold and click on the bold button.

Added bonus! It also works with cmd+b ;)

Hopefully this helps someone!

Happy coding

_{Note that I brought in bootstrap css for styling and vue via CDN so that it will function in the snippet.}