Drupal/C2/Editing-Existing-Content/English

Title of Script: Editing Existing Content

Author: Hrutika, Varsha Venkatesh

Keywords: video tutorial, drupal, Inline editing, Configure the block, Quick Edit, Edit your image, Edit your Tags, CKEditor, Wysiwyg Editor

Visual Cue	Narration
Slide 1: Editing Existing Content	Welcome to the Spoken tutorial on Editing Existing Content.
Slide 2: Learning Objectives	In this tutorial, we will learn about Inline editing Using CKEditor and Configuring CKEditor
Slide 3: System requirement	To record this tutorial, I am using Ubuntu Operating System Drupal 8 and Firefox web browser You can use any web browser as per your choice.
	Let us open our website which we created earlier.

	Part 1
Time	Narration
00:05	First we will learn about Inline Editing.
00:10	Hover the cursor over the Title. On the right hand side, we will see a pencil icon.
00:15	When we hover over the Title, it will ask us to configure the block.
00:22	Click on Configure block. The block is the general block for Page Title.
00:31	Changing this will change the way Page Titles appear on every node.
00:39	Click on Go back to site. Hover over the pencil here and click on Configure block. If you want to change the tabs, you can change them here.
00:52	I will leave it as it is.
00:58	Click Back to site.
1:00	Now, click on the pencil in the Content area. You will see three options– Quick edit, Edit and Delete.
1:10	Quick edit is front end editing in an inline window. Edit takes us back to the main editing window for a node. Delete will delete the node after confirmation.
1:20	Let’s click on Quick edit to edit our node in an inline fashion.
1:30	As we hover, it takes us to different sections of the individual node. When we click on it, we are able to add more content, view the source and even bold some text.
1:51	Once we make a change, Drupal asks us to save. Click Save to update the node.
2:00	Now, let’s learn to change an article node, say Welcome to Drupalville.
2:06	Click on Quick edit. Notice that the Title and the body fields are editable here in the front end. But we can't edit the image.
2:17	In order to edit the image, we need to go into the edit screen. Now we can make changes to the body and save it.
2:30	I can also edit the tags in the Quick edit window.
2:37	The front end editing in Drupal is suitable for simple edits.
2:46	Edit tab is a fantastic feature of Drupal to update the content anytime.

	Part 2
Time	Narration
00:05	Wysiwyg Editor was mentioned several times before.
00:09	It stands for what you see is what you get.
00:12	Wysiwyg Editor is quite helpful.
00:19	Let’s change Text Format to Full HTML first. This will give us an idea of the formatting options available in the Wysiwyg Editor.
00:30	In Drupal, the CKEditor comes with Drupal core. It is turned on by default and is configurable.
00:40	Let’s take a quick look. Highlight the text Welcome to our site. Change the format from Normal to Heading 2. Immediately, Drupal gives a preview of what the text will look like.
0:53	This is determined by the theme and the cascading style sheets or CSS that the theme gives us.
1:00	Let us add some more text here, “Editing Drupal nodes is really fun!”
1:08	Now highlight that text, turn off the Italics and create a hyperlink for that text.
1:15	Here let’s say, http://drupal.org/ Click on Save. Hover the mouse and notice that the text is now hyperlinked.
1:29	To remove the hyperlink, highlight the text and click on Unlink. To undo a change, press Ctrl+Z.
1:42	We can also add ordered and unordered lists by clicking on the Bullets and numbering icons here. Click on Unordered list. Then add bullets - one, two, three. Next, click on Ordered list and add one, two and three.
2:02	To use Block quotes, highlight some text and click the Block Quote link. Once again, the formatting is managed by our theme.
2:16	We can easily insert images also. I have chosen this file which I had uploaded on the first node.
2:56	In the Alternate Text field, I’ll type “Drupal Logo” Under Align, I will choose Right. Add a Caption if you want. Lastly, click on Save.
2:35	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.
2:47	We will first have to re-size our editing window a little, so that we can drag our image anywhere we want.
3:00	Hovering over the image also allows us to resize our images. Before adding images to your Drupal node, make sure that your images are properly sized and formatted.
3:17	That will help a lot in aligning the content on the node.
3:24	We can add a table or a horizontal line. And even show the blocks that we created in our node.
3:35	So here is the H2 block, a block code, paragraph, tag etc. If you know HTML, then you can view the source by clicking on this icon.
3:46	Explore each of these options thoroughly before proceeding ahead.
3:50	Recall that we have turned on Full HTML.
3:54	If we change this to Basic HTML, it is going to warn us. There is a possibility of the content being permanently lost or deleted.
4:03	Say, we have inserted a JavaScript, I-frame, youtube video, a google map or something like that. Changing to Basic HTML, will cause Drupal to remove those content.
4:16	In order to avoid these kinds of problems, keep only what you actually need.
4:25	Let’s cancel the changes in the settings, so we won’t lose anything. This is a quick overview of CKEditor that comes with Drupal.
4:34	And we have learnt how to customize it.
4:40	Now click Save and keep published. The modified node is displayed.

	Part 3
Time	Narration
00:05	Next let's learn to configure the CKEditor.
00:17	Let’s click on Configuration at the top.
00:20	Now click on Text formats and editors. We will notice that Basic HTML and Full HTML use the CKEditor. And they are assigned to Authenticated User and Administrator.
00:36	These are two unique user roles.
00:40	In Drupal, our user has different roles and each role has to be given permissions.
00:46	In this case, Basic HTML can be used by an Authenticated user and Administrator. The CKEditor has been assigned for these 2 roles.
00:56	Similarly, Full HTML can be used by an Administrator.
1:00	Now let’s check CKEditor for the Basic HTML. Click on Configure and you will be able to assign it to different roles.
1:10	Assign any Text editor that you want. And then give them permissions for the buttons that they are allowed to use.
1:16	Recall - this is the Active toolbar we had, for the Authenticated User for Basic HTML Text Format.
1:24	What if we want to add one of these buttons to our Active toolbar? This is very simple.
1:33	Let’s choose Paste from Word icon from Available buttons.
1:37	Then click and drag the mouse, until a little blue box opens up where we can add the icon.
1:45	To add a new group, click on Add group button. Name it “copy and paste” and click on Apply.
1:53	Now, click and drag Paste from Word icon into the copy and paste section.
1:58	Let’s now add all the paste icons here.
2:06	So we have added three new buttons to our bar for Basic HTML format. Paste icons are something that every toolbar needs, as most text are copy-pasted from files.
2:23	We also upload inline-images. And upload images with a maximum file size of 32MB, with any width and height. The maximum size may be different in your installation.
2:32	We can change any of these settings down here, as per our preference.
2:39	Say, we always want to change a URL into a link, instead of manually linking it. We can do so by clicking Convert URLs into links option.
2:48	Here we also have the Filter settings. Let’s click on Limit allowed HTML tags. Now, we will be able to add the HTML tags that we can use, when we look at the source.
3:00	So, this is a really powerful WYSIWYG editor and its configuration area.
3:05	Once we have made all our changes, click the Save configuration button. Let us now look at our Content.
3:19	Click the Edit option in Welcome to Drupalville node. Notice that since we had Full HTML turned on, nothing has changed. Let’s now change this to Basic HTML. All the changes are still there. Though I can’t see my blocks anymore, the Paste icons are now available.
3:40	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. Click on Save and keep published.
3:57	Once again, click on Configuration. Scroll down and click on Text formats and editor. This time let us configure the Full HTML toolbar.
4:10	Notice that we have got a few more buttons here but not the Paste icons. Click Show group names and click Add group on the second line this time. Name it as “copy and paste”. Now we can click and drag these into our copy and paste section.
4:36	Similarly down here, we have all these options again. For now, click on Save configuration button.
4:44	Let’s go back to our Welcome to Drupalville again and change it to Full HTML.
4:54	Click Continue. And now, we see two rows of buttons. This means our editor is all set.
5:00	Take some time to play around with the CKEditor, and make sure that you understand it well. With this we come to the end of this tutorial.

Slide 4: Summary	Let us summarize. In this tutorial we have learnt about Inline editing Using CKEditor and Configuring CKEditor
Slide 5:	This video is adapted from Acquia and OSTraining and revised by Spoken Tutorial Project, IIT Bombay.
Slide 6: Acknowledgement	The video at this link summarises the Spoken Tutorial project. Pls download and watch it.
Slide 7: Spoken Tutorial Workshops	The Spoken Tutorial Project Team conducts workshops and gives certificates. For more details, please write to us.
Slide 8: Acknowledgement	Spoken Tutorial Project is funded by NMEICT, Ministry of Human Resource Development And NVLI, Ministry of Culture Government of India.
	This is Varsha Venkatesh signing off. Thanks for joining.

Contributors and Content Editors

Nancyvarkey, Priyacst