How to embed a rich-text editor on a website?
For starters, I'm sorry if it's a wrong place for this question, I wasn't sure where should I ask it.
I'd like to add a rich-text editor to my website, because I want to allow my user to create long content, and they may want to input code blocks, links, images and so on. How do I do that? Do I need a CMS for that? Or maybe some plugin?
I tried to do the research on my own but I haven't found anything that would be of any help. Also, I have no previous experience working with CMSs, so I'm not even sure what should I look for.
I did find this list though: https://www.vuescript.com/best-wysiwyg-rich-text-editor/, but most of those editors don't even support the code blocks and, frankly, I'm not totally convinced of downloading a big library, like Vuetify for example, to implement something that seems to me like a simple functionality.
It it matters, the website will be written in Nuxt 3 and the backend will be handled by firebase, since I myself can barely do frontend 🙈.
But, for it to work as I wish it would, the required solution has to meet some basic criteria:
* it is supposed to work on a website, not in the admin pannel of a CMS
* I need to be able to add some basic styles to it (at least
background-color and font-family), since I have a mockup for my future website with both light and dark modes and I want for this text editor to fit to it
So, ideally, I'd like to implement something similar to the github's text editor (screen below if someone doesn't know what I'm talking about) but without coding the whole functionality of it on my own.
Is there any solution out there that could help me out with this or should I just change the concept for my website? 😅vuejsadmin
Vue Script
10 Best WYSIWYG Rich Text Editors For Vue.js (2023 Update) - Vue Sc...
10 best, top-rated WYSIWYG rich text editors from which you can choose in the next web & mobile app. Enjoy.
12 Replies
mmmm its not simple functionality
I mean what you are asking for is a WYSIWYG
ones that support codeblocks though you might need to look for markdown based ones
so its going to be a mixed bag, do you need it to be plain text? or can the user use markdown
The other option is to use two editor blocks, you can wysiwyg for the text and just make an editable text area in it and <pre><code> blocks styled with skiki or something.
Code blocks | CKEditor 5 Documentation
Learn how to install, integrate and configure CKEditor 5 Builds and how to work with CKEditor 5 Framework, customize it, create your own plugins and custom editors, change the UI or even bring your own UI to the editor. API reference and examples included.
first result when I searched xD
Editor
The Editor allows you to edit your Markdown documents using text or WYSIWYG and comes with Syntax Highlighting, Scroll-Sync, Live Preview, and Chart features.
this one looks nice it does both
it is supposed to work on a website, not in the admin pannel of a CMSyou would still need some kinda user auth and away to save per user too ya?
I'm afraid it should be a plain text. The thing is I want to register users in my website and allow them to input content to it (like blog posts, for example, but this will be actually a different type of content). And my user isn't supposed to be a technical person so they probably wouldn't now how to write markdown.
I mean, this is actually meant to be a website for my portfolio, so I don't insist of such a solution if it either doesn't exist or I'm to stupid to implement that. I just wanted to enhance one of frontendmentor challenges, since its "basic" layout/functionality seems way to easy for me, even though it's a "Guru" level. And I thought I'd gladly learn something new along the way. That's why I thought maybe I'd ask here and see what happens 😛
Thank you for the sources, I'll look at them tomorrow, since it's 2 AM here and I'm done for today with all coding stuff 🙈
Yeah, but this I can easily handle through firebase. I mean, it's my understanding that I can grab whatever a user inputs in such a field.
Not sure on this one, but even if it's a markdown I could probably use some tool to convert it into json or something to be able to send it over to firebase, couldn't I?
Markdown is just plain text, so you don't need to convert it until it's time to render it out, and there's a bunch of different options to convert MD to HTML
it's probably the best option, if you think your users can write in markdown, otherwise you're stuck downloading a WYSIWYG editor library, implementing one yourself isn't really an option
@Jochem I understand, thank you for the explanation. In fact, I don't expect my users to know how to write in markdown, so I'll try to implement a WYSIWYG editor.
But, since we're already talking about it, maybe one more question - I understand I just convert .md to html to be able to display the content but what about sending the inputed data to firebase? Will I be able to convert .md to an object or JSON?
just store it as plain text
something like
{ post: <contents of md> } because it has to be an object in firebase, but there is no reason to modify the contents of the post in any way afaikAlright, so how do I know how to display this content later on?
Let's say, you're a user. You're writing a post in this markdown editor, I convert it to html, so you're able to see it formatted exactly like you wrote it, on my page.
But, concurrently, I'm sending your whole post to firebase and want to display this post (along with all your previous posts) on your dasboard or profile view or anything, everytime you log in.
So, it's my understanding, I would have to store it in firebase with this markdown formatting, like so:
and then convert it to markdown and subsequently convert it to html?
I'm sorry if I'm getting all of this completely wrong but I'm not really familiar with the ways of converting .md to html. I remeber the Kevin's video, when he was showing that but he did use separate .md files and I don't think this is an option for me, since I guess I would need some backend to be able to take the user data and create an .md file out of it.
So, I'm actually starting to think that maybe this was just a bad idea and implementing this would be much more troublesome than I initially thought. But I have previous experience with not thinking things throught before starting coding and this time and I don't want to make the same mistake 😅
So, I will be really thankful for everything you could tell me on this one and even if I decide to change the concept of my page for now, it may still be useful for me in the future. Maybe I'm just not good enough to implement this today but I might be in the future and I could just add this feature then.
and then convert it to markdown and subsequently convert it to html?That's already markdown though you just feed that to an NPM package that takes in markdown and spits out html, then put that on the user's screen but if you're using a wysiwyg editor, that's probably not something you need to worry about too much. The editor itself might spit out html for you to store and display, it really depends on the editor
I understand. Thank you very much for your help and I hope I'll be able to implement that 😅