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

Pratik kamble at 12:00, 24 March 2017

2017-03-24T12:00:59Z

Pratik kamble at 05:23, 7 October 2016

2016-10-07T05:23:49Z

Nancyvarkey at 11:00, 6 September 2016

2016-09-06T11:00:45Z

Sandhya.np14 at 10:57, 6 September 2016

2016-09-06T10:57:04Z

Sandhya.np14 at 10:12, 6 September 2016

2016-09-06T10:12:04Z

Sandhya.np14 at 12:05, 30 August 2016

2016-08-30T12:05:31Z

Show changes

PoojaMoolya: Created page with "{| border=1 | Time | Narration |- | 00:01 | Welcome to the Spoken tutorial on''' Editing Existing Content.''' |- | 00:06 | In this tuto..."

2016-08-30T06:05:13Z

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..."

New page

{| border=1
| <center>Time</center>
| <center>Narration</center>

|-
| 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 summarises 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.

|}

@@ Line 1: / Line 1: @@
 {| border=1
-|  <center>'''Time'''</center>
+|'''Time'''
-|  <center>'''Narration'''</center>
+|'''Narration'''
 |-
@@ Line 543: / Line 543: @@
 |-
 | 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

@@ Line 22: / Line 22: @@
 |  00:15
 |  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 525: / Line 525: @@
 |  11:37
 |In this tutorial, we have learnt about:
-* Inline editing
+Inline editing
-* Using CKEditor and
+Using CKEditor and
-* Configuring CKEditor.
+Configuring CKEditor.
 |-

@@ Line 22: / Line 22: @@
 |  00:15
 |  To record this tutorial, I am using:
 * '''Ubuntu Operating System'''
 * '''Drupal 8 '''and
@@ Line 101: / Line 100: @@
 |-
 |  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
-| 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
-| The front end editing in''' Drupal''' is suitable for simple edits.
+| 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.
+| '''Edit''' tab is a fantastic feature of Drupal to update the content anytime.
 |-
@@ Line 161: / Line 160: @@
 |-
 |  03:04
-|  In''' Drupal,''' the''' CKEditor''' comes with''' Drupal core'''.
+|  In Drupal, the''' CKEditor''' comes with''' Drupal core'''.
 |-
 |  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
-|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
-|  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
-|  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
-|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
-|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
-|The modified''' node''' is displayed.
+|The modified node is displayed.
 |-
 |  07:01
-|  Next let's learn to configure the''' CKEditor'''.
+|  Next, let's learn to configure the''' CKEditor'''.
 |-
@@ Line 397: / Line 396: @@
 |-
 |  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
-| 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
-|  Click the''' Edit''' option in''' Welcome to Drupalville node.'''
+|  Click the''' Edit''' option in "Welcome to Drupalville" node.
 |-
 |  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
-|This time let us configure the''' Full HTML toolbar.'''
+|This time let us configure the''' Full HTML''' toolbar.
 |-
@@ Line 513: / Line 512: @@
 |-
 |  11:23
-|This means our editor is all set.
+|This means, our editor is all set.
 |-
@@ Line 521: / Line 520: @@
 |-
 |  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
 |In this tutorial, we have learnt about:
 * Inline editing
 * Using CKEditor and
-* Configuring CKEditor
+* Configuring CKEditor.
 |-
 |  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
-| 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
 | 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

@@ Line 41: / Line 41: @@
 |-
 | 00:36
-| Hover the cursor over the''' Title.''' On the right hand side, we will see a''' pencil icon'''.
+| 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.'''
+| 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.'''
+| 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'''.
+| Changing this will change the way''' Page Titles''' appear on every node.
 |-