How to create a simple text Editor on your website || CKEditor Quick Start Guide

hello what's up guys we'll come back to the channel this is Austin back again with another simple tutorial now in this simple tutorial I'm going to be showing you I can create a simple with week editor on your web page let's say you are creating a content management system and we won't have a simple text editor where the user can format text highlight what everything that the user can make use of that text editor so I made a simple post on Facebook showing people how I created my simple content management system and they are wondering how I created this text editor the one you're seeing here it's a friend of mine called Israel wondered how equated that text editor and never created it from scratch and he wanted to know how to get it but in case you're also there and want to know how to get it how to work with it then I'm going to be sharing it with you in this simple tutorial so what you have to do is come to their home page called ckeditor dot-com I'm going to leave all the links in the description below so that you can go in case you're not about to see on the screen properly then what you are going to go what we're going to do sorry we are going to scroll down then they are going to ask the different editors they have we have the ckeditor five and four I guess five is the latest one but we are going to go with four because it is easy to understand for beginners and it's the one I used in the other blog content management system then we are going to click learn more and you'll be presented to such a page they will give you some extra information and a simple try out layer layout as you can see you can play around with this content and see how it works then what you have to do is come to this button or link we're seeing download click that and you'll be presented to such a page displaying to you the different packages they provide so we have the basic package standard full and customer is the one you can customize and put your own content or stairs that you want this text editor to be having but we are going to go with the standard one as you can see it even highlighted what you have to do is click this download button so you download the zip file people working on windows you have to extract it but me right now I'm working on a Chromebook some won't click Save you say this folder yes on I guess it will take seconds to download then I'm going to view it in the folder way I saved it as I said people on Windows you have to extract this but me on Chrome I will just have to double-click this and I inside I'm going to copy this folder this is the folder we want ckeditor then I'm won't copy it and paste it in the same directory the JSON folder I just want work with that folder on to the zip zipped folder let's wait for it to copy all the items or files so it's done and this is the folder that we want the CK editor folder when we enter inside I'll show you a bunch of folders don't mess with those the one we want to work with is the ckeditor GS so the one you're seeing here that's the file sorry we are going to be working with it's the final folder so I can close that I guess I have shown you how you can download that then what you have to do is create a simple HTML markup and this is mine I created already then I'm going to go and open that file in the browser then it's editor dot PHP so what we are going to do this is the page opened I'm just going to put it side-by-side with a text editor with my editor that we am using what you have to don't get scared about this fire materialize in case we had to design anything we shall be using this but the main purpose is to show you how you can integrate that editor on your page and use it so what you have to do is create some simple text area tag or element text area so that is the tag then save reload it in the page and we are having a blank text area the one we can play around with so what you have to do give it a name the name attribute name and you can name it anything so it is user defined I'm going to call my content you can call your editor anything that will not make any change on our page even if you reload just still be the same so what we have to do is link to that CK editor JavaScript file so it's inside this JSON so the end the same directory sorry this this file you're seeing the one we have opened editor dot PHP it's here but still in the same directory with this folder so that means when we are linking to it we have to come here and we put our script tags and we put the source attribute and yeah we have to specify the directory where the other file is located so as I told you then in the same directory the edited of PHP and this folder so what we have to do is first specify the folder it is called CK editor then put a ford slash we want to enter inside it and we get this CK editor no js' so that Ford slash then we write CK editor no js' self let me first assume in you guys to see it properly I guess now it's better so finally oh yeah finally we have linked that file what we have to do is come down here put our custom script tags sorry then we write in uppercase CK editor then we say boat replace and replaces a function and what one replace is the element with a name attribute of content so with the attribute of name having this content value so what you are going to do sorry put content and that's it one line of code so let me close this if I save this and reload here we should be able to see that text editor displayed on the page very very simple that's how you can include this rich text editor or with wing editor in your web application so anyway any style that you'll be designing your page so we can put a simple text or name here I'm going to put my name so we can highlight text we can bold it make it italic strikethrough stuff like that I can highlight also this I can check the styles as you can see they a lot of stairs we have the headings I can make it big stuff like that so it's very very simple to work with you can insert images you get the URL of the image put the widdy's height boarder everything so sorry you can play around the with this you can insert links let's say we having google.com we can put the text left to be displayed on that link Google we can set the target so stuff like that we can click OK and you can see we are having the text there go go with that so in case you are working with PHP you can put this in your project publish with all the design that you want very very simple so that's how I created this simple text editor that guys wanted to know I created on my system it's very very simple if this tutorial was useful to you please go ahead subscribe to my channel like the video share it on different social medias and I'll be seeing you in the next tutorials so I hope I answered your question frame please subscribe to the channel

Channel: Oston Code Cypher

Views: 99,044

Keywords: how to, CKEditor Quick Start Guide

Id: uj6mqEicQ2U

Length: 9min 44sec (584 seconds)

Published: Sat Oct 27 2018