Difference between revisions of "Drupal/C2/Editing-Existing-Content/English-timed"

From Script | Spoken-Tutorial
Jump to: navigation, search
Line 1: Line 1:
 
{| border=1
 
{| border=1
|  <center>Time</center>
+
|  <center>'''Time'''</center>
|  <center>Narration</center>
+
|  <center>'''Narration'''</center>
  
 
|-
 
|-

Revision as of 16:30, 6 September 2016

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 us 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 contents.
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 then 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