Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
I'd like to implement a rich text editor, somewhat similar to what Laracasts uses, but without the toggle (though it's probably fine if I do something like that too). I've looked into so many different editors and am just overwhelmed with the options. I just need something lightweight that will allow Markdown AND syntax highlight code blocks, preferably using my already installed highlightjs.
Does anyone know of such a library/package/editor? Thanks!
tiptap tends to be the top pick—super flexible, integrates nicely with vue, and doesn't rely on weird iframes or API keys. If you're using quasar, people also recommend vuequill or the element-tiptap combination. For a more traditional WYSIWYG option, tinyMCE works well with vue too. All solid choices depending on how much control or simplicity you want.
@malinda7 I've been trying to implement TipTap for a bit today and am struggling. I can get the editor to appear, sure, and it will definitely listen for the keyboard events like Ctrl+B for bold, and it will update the text in the input/textarea (though I know TipTap doesn't render a textarea) accordingly. I think that part is fine.
The problem I'm having is two-fold; getting Code Fence/Block Syntax Highlighting to properly work in the editor, and having the entire content render properly outside of TipTap (i.e. in a normal div once the Post is posted). The best I was able to manage was that my content was displaying the generated HTML tags.
For example, if I did Ctrl+B for bold and entered "Hello World", you'd see Hello World rendered once the Post was submitted.
Are there any things I can check? I don't have any code currently because I keep building it and tearing it down :\
@ctrlaltdelme sounds like TipTap is working fine inside the editor, but the issue is with how you’re rendering the output. by default, TipTap gives you raw HTML, so if you just dump it into a normal div without parsing, you’ll see the tags instead of formatted text. Try using dangerouslySetInnerHTML (React) or whatever render method your framework provides to actually interpret the HTML.
for code blocks and syntax highlighting, you’ll need to hook in an extension (like codeblocklowlight or prism) so TipTap knows how to handle them. then on render, make sure you run your highlighter on the HTML output before displaying it.
once you connect those two pieces—rendering HTML safely and adding the code block extension—you should see formatting and highlighting show up properly outside the editor.
Currently, TipTap is the best choice for me.
However, it takes effort to extend it to your needs, especially features like inserting images, links, etc. Sometimes you just need an extension and connect it to a button. And sometimes you need to create one for a specific function.
Configuring these buttons and features can be challenging. However, once completed, the results are worth it.
To properly perform external rendering, you need to implement the same classes as your text editor, such as TipTap and Prose.
@kerelka Yes! That's been my problem. For example, adding a line break in the editor itself so that I get something like:
Line 1 Line 2
Line 3
Where the break between Line 2 and Line 3 is actually rendered as a line break was giving me such trouble. I added the HardBreak extension, which seems to have worked.
But it seems to be a struggle to get the editor view and the content view to be a match and my brain is struggling.
EDIT: It seems even Laracasts struggles lol. Line 1 and 2 should be on new lines
I love the editor on medium.com. not sure how to implement it but I really like it
Please or to participate in this conversation.