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

From Script | Spoken-Tutorial
Jump to: navigation, search
 
(3 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
{| border=1
 
{| border=1
−
| <center>Time</center>
+
|'''Time'''
−
| <center>Narration</center>
+
|'''Narration'''
  
 
|-
 
|-
Line 22: Line 22:
 
|  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 101: Line 100:
 
|-
 
|-
 
|  01:47
 
|  01:47
−
|When we click on it, we are able to add more content, view the source and even bold some text.
+
|When we click on it, we are able to add more content, view the '''source''' and even '''bold''' some text.
  
 
|-
 
|-
 
| 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 133: Line 132:
 
|-
 
|-
 
| 02:30
 
| 02:30
−
| The front end editing in''' Drupal''' is suitable for simple edits.
+
| The '''front end editing''' in''' Drupal''' is suitable for simple edits.
  
 
|-
 
|-
 
| 02:34
 
| 02:34
−
| '''Edit''' tab is a fantastic feature of''' Drupal '''to update the content anytime.
+
| '''Edit''' tab is a fantastic feature of Drupal to update the content anytime.
  
 
|-
 
|-
Line 161: Line 160:
 
|-
 
|-
 
|  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.
  
 
|-
 
|-
Line 177: Line 176:
 
|-
 
|-
 
|  03:24
 
|  03:24
−
|Immediately,''' Drupal''' gives a preview of what the text will look like.
+
|Immediately,''' Drupal''' gives us a preview of what the text will look like.
  
 
|-
 
|-
Line 245: Line 244:
 
|-
 
|-
 
|  05:12
 
|  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.
+
|  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.
  
 
|-
 
|-
Line 261: Line 260:
 
|-
 
|-
 
|  05:43
 
|  05:43
−
|  That will help a lot in aligning the content on the '''node'''.
+
|  That will help a lot in aligning the content on the node.
  
 
|-
 
|-
Line 269: Line 268:
 
|-
 
|-
 
|  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.
  
 
|-
 
|-
Line 301: Line 300:
 
|-
 
|-
 
|  06:33
 
|  06:33
−
|Changing to''' Basic HTML,''' will cause''' Drupal''' to remove those content.
+
|Changing to''' Basic HTML,''' will cause''' Drupal''' to remove those contents.
  
 
|-
 
|-
Line 325: Line 324:
 
|-
 
|-
 
|  06:58
 
|  06:58
−
|The modified''' node''' is displayed.
+
|The modified node is displayed.
  
 
|-
 
|-
 
|  07:01
 
|  07:01
−
|  Next let's learn to configure the''' CKEditor'''.
+
|  Next, let's learn to configure the''' CKEditor'''.
  
 
|-
 
|-
Line 397: Line 396:
 
|-
 
|-
 
|  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 then click on''' Apply.'''
  
 
|-
 
|-
Line 417: Line 416:
 
|-
 
|-
 
|  09:04
 
|  09:04
−
| We also upload''' inline-images.''' And upload images with a maximum file size of 32MB, with any width and height.
+
| We also upload''' inline-images''' and upload images with a maximum file size of 32MB, with any width and height.
  
 
|-
 
|-
Line 457: Line 456:
 
|-
 
|-
 
| 10:02
 
| 10:02
−
|  Click the''' Edit''' option in''' Welcome to Drupalville node.'''
+
|  Click the''' Edit''' option in "Welcome to Drupalville" node.
  
 
|-
 
|-
 
|  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 485: Line 484:
 
|-
 
|-
 
|  10:43
 
|  10:43
−
|This time let us configure the''' Full HTML toolbar.'''
+
|This time let us configure the''' Full HTML''' toolbar.
  
 
|-
 
|-
Line 513: Line 512:
 
|-
 
|-
 
|  11:23
 
|  11:23
−
|This means our editor is all set.
+
|This means, our editor is all set.
  
 
|-
 
|-
Line 521: Line 520:
 
|-
 
|-
 
|  11:32
 
|  11:32
−
|With this we come to the end of this tutorial.   Let us summarize.
+
|With this we come to the end of this tutorial. Let us summarize.
  
 
|-
 
|-
 
|  11:37
 
|  11:37
 
|In this tutorial, we have learnt about:
 
|In this tutorial, we have learnt about:
−
 
+
Inline editing
−
* Inline editing
+
Using CKEditor and
−
* Using CKEditor and
+
Configuring CKEditor.
−
* Configuring CKEditor
+
  
 
|-
 
|-
 
|  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'''.
  
 
|-
 
|-
Line 541: Line 539:
 
|-
 
|-
 
| 12:06
 
| 12:06
−
| The Spoken Tutorial Project Team conducts workshops and gives certificates. For more details, please write to us.
+
| The Spoken Tutorial Project team conducts workshops and gives certificates. For more details, please write to us.
  
 
|-
 
|-
 
| 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, Government of India.
−
and NVLI, Ministry of Culture Government of India.
+
 
|-
 
|-
 
| 12:25
 
| 12:25

Latest revision as of 17:30, 24 March 2017

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

Retrieved from "https://script.spoken-tutorial.org/index.php?title=Drupal/C2/Editing-Existing-Content/English-timed&oldid=34113"