How to Build a WYSIWYG Rich Text HTML Editor – Textarea Replacement for Your Web Site – CKEditor

November 15, 2020 7:24 pm Published by Leave your thoughts

in this video tutorial I’m going to be showing you how to incorporate this HTML editor into your forms so for example we can actually insert text here so line 1 line 2 and if we come over to source code you’re going to see that it’s writing the HTML for you we can also use the editor to insert images we can use it to format our text we can use it to insert forms and we can even create tables and do various other things using the HTML editor so this is perfect for content management systems this is a really powerful tool and I’m going to be showing you how to incorporate this into your forms website applications in this tutorial now one of the videos that we have posted previously on our channel and you can find it by visiting our channel or a website is how to develop a content management system and what we’ve done here is basically I’ve created a very simple website template that we can work with and I’ve also just created a very simple insert and preview server behavior so I can enter a message here click on post and the most recent record in the database is going to be loaded and we can preview it here now a content management system as you would learn from the tutorial on our channel basically you’ll basically insert a new record into a database and you may edit or update or delete that record but what you’ll do is you’ll probably create a record set on the page and then you’ll bind a field from that to the area where you want want it to appear so for example in this example if I post a message here so let’s just say example one and post it’s going to preview here it’s loading the most recent record from the database or if it was a content management system a specific field so what is a HTML editor will basically allow to you to format that text in a very simplistic and easy way so let me show you an example if I said line 1 and then I click I enter return a few times in I entered line 2 now before we post this in the text area we can see that these are on different lines we have line 1 and line 2 down here now if I post this you’re going to see that immediately it’s just pretty it’s just showing that in a single line it’s not separated by the spaces that we had previously when we actually inputted the text and that’s because there’s no HTML it’s simply loading out what it has in the database and this is how its pre formatted so what we need to do is we need to insert some HTML so for example if I entered line 1 and then line – but after line 1 I’ll enter some HTML I’ll enter a line break and I click on upload you’re going to see that because of the HTML it’s loading that on separate lines but what we all understand is that the normal visitor to our website isn’t going to insert HTML into this so for example if you had an article and a comment system underneath then this is what when it’s going to present issues because it isn’t going to appear the way we want it to on the page because one of two reasons the user probably doesn’t know HTML and the other reason is they probably wouldn’t want to spend time you know formatting the text with HTML either so how do we get around this in a really easy way well we incorporate a HTML editor and this is what I’m going to be talking about in this tutorial this is CK editor which is a free free open source HTML editor that you can use on your websites or applications and just to show you a demo of it although we’ll be incorporating this into our our template that I just showed you this is it so it basically if we come into the source code which will allow you to do is you can see it actually writes the HTML for you but it’s sort of an application similar to Microsoft Word which pretty much anyone that comes along can use so this is the advantage of using HTML editor so let’s go ahead and get started if we return to the home page which you’ll see is we can click on download and you have a few options you can select the basic standard or the full package and I’m not going to go into what the difference is you can also customize it based on your own requirements but we’re not going to be doing this because it’s a little bit unnecessary what they actually let you do is just link to a hosted version of the script which is what I’m going to be doing in this example now I’m going to be incorporating the full package in this example and I’m going to show you how easy that it is to do the first thing I’m going to do is I’m just going to copy this script and notice depending on the package you select this changes the reason that it’s better to probably use this hosted version or as an alternative to the hosted version so you can either download the script or you can actually just use this hosted version where you don’t actually host the script on your server it’s hosted on a server it’s actually powered by Amazon well Amazon probably have a server that’s closer to the user then your website’s file server so to be honest it will probably load faster if you used this hosted version but if you do want to make modifications or customize it or maybe just have the peace of mind in case something changed with this script in the future well go ahead and download it that might be the best option for you but I’m going to show you this method which is hosted so I’m going to select the full package I’m going to copy this line of code and then I’m going to click on this which will take me to a very simple very simple installation Gide which we’re going to return and use in a in a moment okay so I’m in Dreamweaver and just to show you this is the template which I was demonstrating previously you don’t really have to do anything you can develop your script whether it’s a comment system content management system or anything you can develop it without the HTML editor and just incorporate it afterwards if that’s easier for you so just to show you my code all I have is a record set on the page which is enabling me to filter the table and display that I’ve binded it here so the latest post in the table is going to appear there and of course this is my text area and I’ve just got some insert server behavior which is just PHP and the rest is all sort of CSS and standard HTML so the first thing I’m going to do is just come over to my code view and basically I’m going to look for my head tags which are here and what I’m going to do is just after a before my and so what I’m going to do is after my opening head tag I’m just going to paste in the line of code that I took from the ckeditor website which is basically going to add the script I need now I’ll actually need to do is call the script now if I return to this installation guide what I’ll notice here is that it’s got this script here which is all I need I’m going to copy this and if I return to dream with it I’m just going to come down into my code view I’ll come to my form just after the form I’m going to paste in the code which I took from the installation guide so this is just this is just some JavaScript and if you notice here the text area is name and it’s ID is text area so I’m going to copy that and I’m going to paste it here so this is basically calling the script and it’s it’s specifying the form element on the page which ckeditor is going to be associated with click save that and return to preview this in Explorer once this is loaded you’re going to see that the load the HTML editor is immediately going to load on the page now this is the full editor and you can also customize this but this is how easy is to actually incorporate the HTML editor into your your website applications so let’s demonstrate this once more I’m going to write in line 1 line 2 line 3 and line 4 now if I come over to source code you’re going to see that it’s actually writing in the HTML I can even insert images I’ve got options to do all kinds of things even create tables and that it is you know I can even create forms so it is incredibly powerful tool so let’s just see what happens if I post this so I’ve posted it and you can see line 4 everything is formatted so I’m not having to write any extensive HTML it’s just this simple thank you for following along with this video tutorial but I just like to take this opportunity to encourage you to visit our official website simple TOCOM here we release all of our new tutorials and it’s an easy way to find the content from us that you’re looking for we have various various tutorials from building user registration systems to file upload scripts availability calendars how to get more likes on Facebook PHP classes how to develop an advanced website layout with CSS and div tags how to create CSS menus but of course if you are stuck at any point on this or any other of our tutorials we have a Oscar question area which is completely free and you can use this section of our site to ask questions and contact a member of our team who’d be more than happy to assist you we also offer a range of freebies ranging from an availability calendar to a file upload script a Content Locker pricing tables various Photoshop files and even a user registration system we also have a blog where we post a lot of interesting articles and also explain some of the code that we write or essay use in our tutorials I’d also like to say that we are a free project and it is your support that enables us to keep going providing you new resources materials and tutorials and of course support any donations that you will be generous to give will help us to continue with the work that we are doing in that you enjoy if you are willing to make a donation then please visit our website simple to comb and click on the donate option on our menu and you’ll be redirected to PayPal where you can specify how much you would like to donate and of course I’d also like to encourage you to visit our new project which is CSS menu creator com again there’ll be a link in the description and this website is one of our latest projects and enables you to create your own custom CSS menus online all you have to do and we have as you can see here a video showing you exactly how to use the site but you can select a menu so for example if I select build menu here you can literally build the menu online you get a preview up here and it literally writes the code and if you sign up to our site you’ll be able to access the CSS so all you’ll have to do is literally build your set your menu online using our advanced software here and literally then just copy and paste the code unlock the CSS and copy it into your existing pages so it’s literally the easiest way you could ever imagine to build your CSS menus it’s a huge time saver for experienced webmasters or people that are new to the CSS and web development world it’s a time saver and a money saver I’d also like to encourage you to visit our official Facebook page which you can access either by a link in the description of this video if you’re watching on YouTube or you could visit our website simple to calm and access our Facebook page from there there are links on the page and here we I’d like to encourage you to like our Facebook page because this will enable us to stay connected and update you when we release new tutorials various different resources and even freebies if you are looking for a web designer or perhaps a prebuilt solution then why not visit site easy calm this is where we offer a range of different products and services including pre-built PHP applications including user registration CSS menu generator search Site Search digital goods for PayPal comment systems billing systems and much more we also offer pre-built websites our pre-built websites including Commerce social networking content management file upload but we do listings and much more and of course if you’d like to get in touch with a member of our team for any issue then please do so by visiting our website clicking on the support option from the menu and filling out this form and you’ll be able to contact us and a member of our team will be more than happy to contact you to resolve any queries you may have once again thank you very much for following along in this video tutorial have a great day

Categorised in:

This post was written by admin

Leave a Reply

Your email address will not be published. Required fields are marked *