Drupal/C2/Editing-Existing-Content/English-timed

Time	Narration
00:01	Welcome to the Spoken tutorial on Editing Existing Content.
00:06	In this tutorial, we will learn about Inline editing
00:10	using CKEditor and
00:12	configuring CKEditor.
00:15	To record this tutorial, I am using: Ubuntu Operating System Drupal 8 and Firefox web browser.
00:24	You can use any web browser as per your choice.
00:28	Let us open our website which we created earlier.
00:32	First, we will learn about Inline Editing.
00:36	Hover the cursor over the Title. On the right hand side, we will see a pencil icon.
00:43	When we hover over the Title, it will ask us to configure the block.
00:48	Click on the Configure block. The block is the general block for Page Title.
00:54	Changing this will change the way Page Titles appear on every node.
00:59	Click on Go back to site. Hover over the pencil here and click on Configure block.
01:06	If you want to change the tabs, you can change them here.
01:10	I will leave it as it is.
01:13	Click Back to site.
01:16	Now, click on the pencil in the Content area.
01:20	You will see three options– Quick edit, Edit and Delete.
01:25	Quick edit is front end editing in an inline window.
01:29	Edit takes us back to the main editing window for a node.
01:33	Delete will delete the node after confirmation.
01:37	Let’s click on Quick edit to edit our node in an inline fashion.
01:41	As we hover, it takes us to different sections of the individual node.
01:47	When we click on it, we are able to add more content, view the source and even bold some text.
01:53	Once we make a change, Drupal asks us to save. Click Save to update the node.
02:00	Now, let’s learn to change an article node, say Welcome to Drupalville.
02:06	Click on Quick edit. Notice that the Title and the body fields are editable here in the front end.
02:14	But we can't edit the image.
02:17	In order to edit the image, we need to go into the edit screen.
02:22	Now we can make changes to the body and save it.
02:26	I can also edit the tags in the Quick edit window.
02:30	The front end editing in Drupal is suitable for simple edits.
02:34	Edit tab is a fantastic feature of Drupal to update the content anytime.
02:40	Wysiwyg Editor was mentioned several times before.
02:44	It stands for what you see is what you get.
02:48	Wysiwyg Editor is quite helpful.
02:52	Let’s change Text Format to Full HTML first.
02:58	This will give us an idea of the formatting options available in the Wysiwyg Editor.
03:04	In Drupal, the CKEditor comes with Drupal core.
03:09	It is turned ON by default and is configurable.
03:14	Let’s take a quick look. Highlight the text "Welcome to our site".
03:20	Change the format from Normal to Heading 2.
03:24	Immediately, Drupal gives a preview of what the text will look like.
03:30	This is determined by the theme and the cascading style sheets or CSS that the theme gives us.
03:38	Let us add some more text here, “Editing Drupal nodes is really fun!”.
03:44	Now highlight that text, turn off the Italics and create a hyperlink for that text.
03:52	Here, let’s say, http://drupal.org/ . Click on Save.
04:00	Hover the mouse and notice that the text is now hyperlinked.
04:04	To remove the hyperlink, highlight the text and click on Unlink.
04:10	To undo a change, press Ctrl+Z.
04:14	We can also add ordered and unordered lists by clicking on the Bullets and numbering icons here.
04:21	Click on Unordered list. Then add bullets - one, two, three.
04:28	Next, click on Ordered list and add one, two and three.
04:34	To use Block quotes, highlight some text and click the Block Quote link.
04:40	Once again, the formatting is managed by our theme.
04:46	We can easily insert images also. I have chosen this file which I had uploaded on the first node.
04:56	In the Alternate Text field, I’ll type “Drupal Logo”.
05:02	Under Align, I will choose Right. Add a Caption if you want.
05:08	Lastly, click on Save.
05:12	It is now added to the node inside the body. Hover over the image, click and drag it to a new position, if you want.
05:22	We will first have to re-size our editing window a little so that we can drag our image anywhere we want.
05:30	Hovering over the image also allows us to resize our images.
05:36	Before adding images to your Drupal node, make sure that your images are properly sized and formatted.
05:43	That will help a lot in aligning the content on the node.
05:47	We can add a table or a horizontal line.
05:51	And even show the blocks that we created in our node.
05:55	So, here is the H2 block, a block code, paragraph, tag etc.
06:01	If you know HTML, then you can view the source by clicking on this icon.
06:07	Explore each of these options thoroughly before proceeding ahead.
06:12	Recall that we have turned on Full HTML.
06:16	If we change this to Basic HTML, it is going to warn us.
06:21	There is a possibility of the content being permanently lost or deleted.
06:26	Say, we have inserted a JavaScript, I-frame, youtube video, a google map or something like that.
06:33	Changing to Basic HTML, will cause Drupal to remove those content.
06:38	In order to avoid these kinds of problems, keep only what you actually need.
06:43	Let’s cancel the changes in the settings, so we won’t lose anything.
06:48	This is a quick overview of CKEditor that comes with Drupal.
06:52	And we have learnt how to customize it.
06:55	Now click Save and keep published.
06:58	The modified node is displayed.
07:01	Next let's learn to configure the CKEditor.
07:05	Let’s click on Configuration at the top.
07:09	Now click on Text formats and editors.
07:13	We will notice that Basic HTML and Full HTML use the CKEditor.
07:19	And, they are assigned to Authenticated User and Administrator.
07:24	These are two unique user roles.
07:27	In Drupal, our user has different roles and each role has to be given permissions.
07:34	In this case, Basic HTML can be used by an Authenticated user and Administrator.
07:41	The CKEditor has been assigned for these 2 roles.
07:45	Similarly, Full HTML can be used by an Administrator.
07:50	Now, let’s check CKEditor for the Basic HTML.
07:54	Click on Configure and you will be able to assign it to different roles.
07:59	Assign any Text editor that you want. And then give them permissions for the buttons that they are allowed to use.
08:07	Recall - this is the Active toolbar we had, for the Authenticated User for Basic HTML Text Format.
08:15	What if we want to add one of these buttons to our Active toolbar? This is very simple.
08:21	Let’s choose Paste from Word icon from Available buttons.
08:26	Then click and drag the mouse until a little blue box opens up where we can add the icon.
08:33	To add a new group, click on Add group button. Name it “copy and paste” and click on Apply.
08:41	Now, click and drag Paste from Word icon into the copy and paste section.
08:47	Let’s now add all the paste icons here.
08:51	So, we have added three new buttons to our bar for Basic HTML format.
08:57	Paste icons are something that every toolbar needs, as most text are copy-pasted from files.
09:04	We also upload inline-images. And upload images with a maximum file size of 32MB, with any width and height.
09:14	The maximum size may be different in your installation.
09:18	We can change any of these settings down here, as per our preference.
09:23	Say, we always want to change a URL into a link, instead of manually linking it.
09:29	We can do so by clicking Convert URLs into links option.
09:34	Here we also have the Filter settings. Let’s click on Limit allowed HTML tags.
09:41	Now, we will be able to add the HTML tags that we can use, when we look at the source.
09:47	So, this is a really powerful WYSIWYG editor and its configuration area.
09:54	Once we have made all our changes, click the Save configuration button.
09:59	Let us now look at our Content.
10:02	Click the Edit option in Welcome to Drupalville node.
10:07	Notice that since we had Full HTML turned ON, nothing has changed.
10:12	Let’s now change this to Basic HTML. All the changes are still there.
10:18	Though I can’t see my blocks anymore, the Paste icons are now available.
10:23	I don’t want this image here. So, I’ll delete it by clicking on the image and pressing the Backspace or Delete key on my keyboard.
10:32	Click on Save and keep published.
10:35	Once again, click on Configuration. Scroll down and click on Text formats and editor.
10:43	This time let us configure the Full HTML toolbar.
10:47	Notice that we have got a few more buttons here but not the Paste icons.
10:52	Click Show group names and click Add group on the second line this time.
10:57	Name it as “copy and paste”. Now we can click and drag these into our copy and paste section.
11:05	Similarly down here, we have all these options again. For now, click on Save configuration button.
11:13	Let’s go back to our Welcome to Drupalville again and change it to Full HTML.
11:18	Click Continue. And now, we see two rows of buttons.
11:23	This means our editor is all set.
11:26	Take some time to play around with the CKEditor, and make sure that you understand it well.
11:32	With this we come to the end of this tutorial. Let us summarize.
11:37	In this tutorial, we have learnt about: Inline editing Using CKEditor and Configuring CKEditor
11:50	This video is adapted from Acquia and OSTraining and revised by Spoken Tutorial Project, IIT Bombay.
11:59	The video at this link summarizes the Spoken Tutorial project. Please download and watch it.
12:06	The Spoken Tutorial Project Team conducts workshops and gives certificates. For more details, please write to us.
12:13	Spoken Tutorial Project is funded by NMEICT, Ministry of Human Resource Development and NVLI, Ministry of Culture Government of India.
12:25	This is Varsha Venkatesh, signing off. Thanks for joining.

Contributors and Content Editors

Nancyvarkey, PoojaMoolya, Pratik kamble, Sandhya.np14