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

From Script | Spoken-Tutorial
Jump to: navigation, search
(Created page with "{| border=1 | <center>Time</center> | <center>Narration</center> |- | 00:01 | Welcome to the Spoken tutorial on''' Editing Existing Content.''' |- | 00:06 | In this tuto...")
 
Line 5: Line 5:
 
|-
 
|-
 
| 00:01
 
| 00:01
|  Welcome to the Spoken tutorial on''' Editing Existing Content.'''
+
|  Welcome to the '''Spoken tutorial''' on''' Editing Existing Content.'''
  
 
|-
 
|-
Line 13: Line 13:
 
|-
 
|-
 
|  00:10
 
|  00:10
|Using '''CKEditor '''and
+
|using '''CKEditor '''and
  
 
|-
 
|-
 
|  00:12
 
|  00:12
|Configuring '''CKEditor'''
+
|configuring '''CKEditor'''.
  
 
|-
 
|-
 
|  00:15
 
|  00:15
|  To record this tutorial, I am using
+
|  To record this tutorial, I am using:
  
 
* '''Ubuntu Operating System'''
 
* '''Ubuntu Operating System'''
 
* '''Drupal 8 '''and
 
* '''Drupal 8 '''and
* '''Firefox '''web browser
+
* '''Firefox '''web browser.
  
 
|-
 
|-
Line 37: Line 37:
 
|-
 
|-
 
| 00:32
 
| 00:32
| First we will learn about''' Inline Editing'''.
+
| First, we will learn about''' Inline Editing'''.
  
 
|-
 
|-
Line 49: Line 49:
 
|-
 
|-
 
| 00:48
 
| 00:48
| Click on''' Configure block.''' The''' block''' is the general''' block''' for''' Page Title.'''
+
| Click on''' Configure block.''' The''' block''' is the general block for''' Page Title.'''
  
 
|-
 
|-
Line 81: Line 81:
 
|-
 
|-
 
| 01:25
 
| 01:25
| '''Quick edit''' is front end editing in an '''inline window.'''
+
| '''Quick edit''' is '''front end''' editing in an '''inline window.'''
  
 
|-
 
|-
 
|  01:29
 
|  01:29
|'''Edit''' takes us back to the main editing window for a''' node'''.
+
|'''Edit''' takes us back to the main editing window for a node.
  
 
|-
 
|-
 
|  01:33
 
|  01:33
|'''Delete''' will delete the''' node''' after confirmation.
+
|'''Delete''' will delete the node after confirmation.
  
 
|-
 
|-
 
| 01:37
 
| 01:37
| Let’s click on''' Quick edit '''to edit our''' node''' in an inline fashion.
+
| Let’s click on''' Quick edit '''to edit our node in an inline fashion.
  
 
|-
 
|-
 
| 01:41
 
| 01:41
| As we hover, it takes us to different sections of the individual''' node'''.
+
| As we hover, it takes us to different sections of the individual node.
  
 
|-
 
|-
Line 105: Line 105:
 
|-
 
|-
 
| 01:53
 
| 01:53
| Once we make a change,''' Drupal''' asks us to save. Click''' Save''' to update the''' node'''.
+
| Once we make a change,''' Drupal''' asks us to '''save'''. Click''' Save''' to update the node.
  
 
|-
 
|-
Line 113: Line 113:
 
|-
 
|-
 
| 02:06
 
| 02:06
| Click on''' Quick edit.''' Notice that the''' Title''' and the''' body''' fields are editable here in the front end.
+
| Click on''' Quick edit.''' Notice that the''' Title''' and the''' body''' fields are editable here in the '''front end'''.
  
 
|-
 
|-
Line 125: Line 125:
 
|-
 
|-
 
|  02:22
 
|  02:22
|Now we can make changes to the body and save it.
+
|Now we can make changes to the '''body''' and '''save''' it.
  
 
|-
 
|-
Line 153: Line 153:
 
|-
 
|-
 
|  02:52
 
|  02:52
|  Let’s change''' Text Format''' to''' Full HTML''' first'''.'''
+
|  Let’s change''' Text Format''' to''' Full HTML''' first.
  
 
|-
 
|-
Line 161: Line 161:
 
|-
 
|-
 
|  03:04
 
|  03:04
|  In''' Drupal,''' the''' CKEditor''' comes with''' Drupal''' core.
+
|  In''' Drupal,''' the''' CKEditor''' comes with''' Drupal core'''.
  
 
|-
 
|-
 
|  03:09
 
|  03:09
|It is turned''' on''' by default and is configurable.
+
|It is turned ON by default and is configurable.
  
 
|-
 
|-
 
|  03:14
 
|  03:14
|  Let’s take a quick look. Highlight the text''' Welcome to our site'''.
+
|  Let’s take a quick look. Highlight the text "Welcome to our site".
  
 
|-
 
|-
Line 181: Line 181:
 
|-
 
|-
 
| 03:30
 
| 03:30
|  This is determined by the '''theme''' and the''' cascading style sheets''' or''' CSS''' that the '''theme''' gives us.
+
|  This is determined by the '''theme''' and the''' cascading style sheets''' or''' CSS''' that the theme gives us.
  
 
|-
 
|-
 
| 03:38
 
| 03:38
|  Let us add some more text here, “'''Editing Drupal nodes is really fun!”'''
+
|  Let us add some more text here, “Editing Drupal nodes is really fun!”.
  
 
|-
 
|-
Line 193: Line 193:
 
|-
 
|-
 
|  03:52
 
|  03:52
|  Here let’s say, http://drupal.org/ . Click on '''Save.'''
+
|  Here, let’s say, http://drupal.org/ . Click on '''Save.'''
  
 
|-
 
|-
 
|  04:00
 
|  04:00
|Hover the mouse and notice that the text is now '''hyperlinked'''.
+
|Hover the '''mouse''' and notice that the text is now '''hyperlinked'''.
  
 
|-
 
|-
Line 205: Line 205:
 
|-
 
|-
 
|  04:10
 
|  04:10
|To undo a change, press''' Ctrl+Z.'''
+
|To '''undo''' a change, press''' Ctrl+Z.'''
  
 
|-
 
|-
Line 221: Line 221:
 
|-
 
|-
 
|  04:34
 
|  04:34
|  To use''' Block quotes''', highlight some text and click the''' Block Quote link'''.
+
|  To use''' Block quotes''', highlight some text and click the''' Block Quote''' link.
  
 
|-
 
|-
Line 233: Line 233:
 
|-
 
|-
 
|  04:56
 
|  04:56
|  In the''' Alternate Text''' field, I’ll type “'''Drupal Logo”'''
+
|  In the''' Alternate Text''' field, I’ll type “Drupal Logo”.
  
 
|-
 
|-
Line 249: Line 249:
 
|-
 
|-
 
|  05:22
 
|  05:22
|  We will first have to re-size our editing window a little, so that we can drag our image anywhere we want.
+
|  We will first have to re-size our editing window a little so that we can drag our image anywhere we want.
  
 
|-
 
|-
 
| 05:30
 
| 05:30
|  Hovering over the image also allows us to resize our images.
+
|  Hovering over the image also allows us to '''resize''' our images.
  
 
|-
 
|-
Line 269: Line 269:
 
|-
 
|-
 
|  05:51
 
|  05:51
|And even show the''' blocks''' that we created in our''' node'''.
+
|And even show the''' blocks''' that we created in our node.
  
 
|-
 
|-
 
|  05:55
 
|  05:55
|  So here is the''' H2 block''', a''' block code''',''' paragraph, tag''' etc.
+
|  So, here is the''' H2 block''', a''' block code, paragraph, tag''' etc.
  
 
|-
 
|-
 
|  06:01
 
|  06:01
|If you know''' HTML''', then you can view the''' source''' by clicking on this icon.
+
|If you know''' HTML''', then you can view the''' source''' by clicking on this '''icon'''.
  
 
|-
 
|-
Line 297: Line 297:
 
|-
 
|-
 
| 06:26
 
| 06:26
|  Say, we have inserted a''' JavaScript, I-frame''',''' youtube''' video, a''' google map''' or something like that.
+
|  Say, we have inserted a''' JavaScript, I-frame, youtube video''', a''' google map''' or something like that.
  
 
|-
 
|-
Line 345: Line 345:
 
|-
 
|-
 
|  07:19
 
|  07:19
|And they are assigned to''' Authenticated User''' and''' Administrator'''.
+
|And, they are assigned to''' Authenticated User''' and''' Administrator'''.
  
 
|-
 
|-
Line 353: Line 353:
 
|-
 
|-
 
|  07:27
 
|  07:27
|  In''' Drupal,''' our user has different roles and each role has to be given permissions.
+
|  In''' Drupal,''' our user has different roles and each role has to be given '''permission'''s.
  
 
|-
 
|-
Line 369: Line 369:
 
|-
 
|-
 
|  07:50
 
|  07:50
|  Now let’s check''' CKEditor''' for the''' Basic HTML'''.
+
|  Now, let’s check''' CKEditor''' for the''' Basic HTML'''.
  
 
|-
 
|-
Line 393: Line 393:
 
|-
 
|-
 
|  08:26
 
|  08:26
|  Then click and drag the mouse, until a little blue box opens up where we can add the icon.
+
|  Then click and drag the '''mouse''' until a little blue box opens up where we can add the icon.
  
 
|-
 
|-
 
|  08:33
 
|  08:33
|  To add a new group, click on''' Add group''' button. Name it “'''copy and paste”''' and click on''' Apply.'''
+
|  To add a new group, click on''' Add group''' button. Name it “copy and paste” and click on''' Apply.'''
  
 
|-
 
|-
 
| 08:41
 
| 08:41
|  Now, click and drag''' Paste from Word''' icon into the''' copy and paste''' section'''.'''
+
|  Now, click and drag''' Paste from Word''' icon into the''' copy and paste''' section.
  
 
|-
 
|-
Line 409: Line 409:
 
|-
 
|-
 
|  08:51
 
|  08:51
|  So we have added three new buttons to our bar for''' Basic HTML format.'''
+
|  So, we have added three new buttons to our bar for''' Basic HTML format.'''
  
 
|-
 
|-
Line 461: Line 461:
 
|-
 
|-
 
|  10:07
 
|  10:07
|Notice that since we had''' Full HTML''' turned''' '''on, nothing has changed.
+
|Notice that since we had''' Full HTML''' turned ON, nothing has changed.
  
 
|-
 
|-
Line 497: Line 497:
 
|-
 
|-
 
|  10:57
 
|  10:57
|Name it as “'''copy and paste”'''. Now we can click and drag these into our''' copy and paste''' section.
+
|Name it as “copy and paste”. Now we can click and drag these into our''' copy and paste''' section.
  
 
|-
 
|-
Line 525: Line 525:
 
|-
 
|-
 
|  11:37
 
|  11:37
|In this tutorial we have learnt about
+
|In this tutorial, we have learnt about:
  
 
* Inline editing
 
* Inline editing
Line 533: Line 533:
 
|-
 
|-
 
|  11:50
 
|  11:50
|  This video is  adapted from Acquia and OSTraining and revised by Spoken Tutorial Project, IIT Bombay.
+
|  This video is  adapted from '''Acquia''' and '''OSTraining''' and revised by Spoken Tutorial Project, IIT Bombay.
  
 
|-
 
|-
 
|  11:59
 
|  11:59
|  The video at this link summarises the Spoken Tutorial project. Please download and watch it.
+
|  The video at this link summarizes the Spoken Tutorial project. Please download and watch it.
  
 
|-
 
|-
Line 546: Line 546:
 
| 12:13
 
| 12:13
 
| Spoken Tutorial Project is funded by  NMEICT, Ministry of Human Resource Development
 
| Spoken Tutorial Project is funded by  NMEICT, Ministry of Human Resource Development
and NVLI, Ministry of Culture
+
and NVLI, Ministry of Culture Government of India.
 
+
Government of India.
+
 
+
 
|-
 
|-
 
| 12:25
 
| 12:25
| This is Varsha Venkatesh signing off. Thanks for joining.
+
| This is Varsha Venkatesh, signing off. Thanks for joining.
  
 
|}
 
|}

Revision as of 17:35, 30 August 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 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