Difference between revisions of "Drupal/C2/Editing-Existing-Content/English-timed"
From Script | Spoken-Tutorial
PoojaMoolya (Talk | contribs) (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...") |
|||
(5 intermediate revisions by 3 users not shown) | |||
Line 1: | Line 1: | ||
{| border=1 | {| border=1 | ||
− | | | + | |'''Time''' |
− | | | + | |'''Narration''' |
|- | |- | ||
| 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 |
|- | |- | ||
| 00:12 | | 00:12 | ||
− | | | + | |configuring '''CKEditor'''. |
|- | |- | ||
| 00:15 | | 00:15 | ||
− | | To record this tutorial, I am using | + | | To record this tutorial, I am using: |
− | + | '''Ubuntu Operating System''' | |
− | + | '''Drupal 8 '''and | |
− | + | '''Firefox '''web browser. | |
− | + | ||
|- | |- | ||
Line 37: | Line 36: | ||
|- | |- | ||
| 00:32 | | 00:32 | ||
− | | First we will learn about''' Inline Editing'''. | + | | First, we will learn about''' Inline Editing'''. |
|- | |- | ||
| 00:36 | | 00:36 | ||
− | | Hover the cursor over the''' Title.''' On the right hand side, we will see a''' pencil | + | | Hover the cursor over the''' Title.''' On the right hand side, we will see a''' pencil''' icon. |
|- | |- | ||
| 00:43 | | 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 | | 00:48 | ||
− | | Click on''' Configure block.''' The | + | | Click on the ''' Configure block.''' The block is the general block for''' Page Title.''' |
|- | |- | ||
| 00:54 | | 00:54 | ||
− | | Changing this will change the way''' Page Titles''' appear on every | + | | Changing this will change the way''' Page Titles''' appear on every node. |
|- | |- | ||
Line 81: | Line 80: | ||
|- | |- | ||
| 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 | + | |'''Edit''' takes us back to the main editing window for a node. |
|- | |- | ||
| 01:33 | | 01:33 | ||
− | |'''Delete''' will delete the | + | |'''Delete''' will delete the node after confirmation. |
|- | |- | ||
| 01:37 | | 01:37 | ||
− | | Let’s click on''' Quick edit '''to edit our | + | | 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 | + | | As we hover, it takes us to different sections of the individual node. |
|- | |- | ||
| 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,''' | + | | Once we make a change, Drupal asks us to '''save'''. Click''' Save''' to '''update''' the node. |
|- | |- | ||
Line 113: | Line 112: | ||
|- | |- | ||
| 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 124: | ||
|- | |- | ||
| 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 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 | + | | '''Edit''' tab is a fantastic feature of Drupal to update the content anytime. |
|- | |- | ||
Line 153: | Line 152: | ||
|- | |- | ||
| 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 160: | ||
|- | |- | ||
| 03:04 | | 03:04 | ||
− | | In | + | | In Drupal, the''' CKEditor''' comes with''' Drupal core'''. |
|- | |- | ||
| 03:09 | | 03:09 | ||
− | |It is turned''' | + | |It is turned '''ON''' by default and is configurable. |
|- | |- | ||
| 03:14 | | 03:14 | ||
− | | Let’s take a quick look. Highlight the text | + | | Let’s take a quick look. Highlight the text "Welcome to our site". |
|- | |- | ||
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. |
|- | |- | ||
| 03:30 | | 03:30 | ||
− | | This is determined by the '''theme''' and the''' cascading style sheets''' or''' CSS''' that the | + | | 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, | + | | Let us add some more text here, “Editing Drupal nodes is really fun!”. |
|- | |- | ||
Line 193: | Line 192: | ||
|- | |- | ||
| 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 204: | ||
|- | |- | ||
| 04:10 | | 04:10 | ||
− | |To undo a change, press''' Ctrl+Z.''' | + | |To '''undo''' a change, press''' Ctrl+Z.''' |
|- | |- | ||
Line 221: | Line 220: | ||
|- | |- | ||
| 04:34 | | 04:34 | ||
− | | To use''' Block quotes''', highlight some text and click the''' Block Quote | + | | To use''' Block quotes''', highlight some text and click the''' Block Quote''' link. |
|- | |- | ||
Line 233: | Line 232: | ||
|- | |- | ||
| 04:56 | | 04:56 | ||
− | | In the''' Alternate Text''' field, I’ll type | + | | In the''' Alternate Text''' field, I’ll type “Drupal Logo”. |
|- | |- | ||
Line 245: | Line 244: | ||
|- | |- | ||
| 05:12 | | 05:12 | ||
− | | It is now added to the | + | | 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 | | 05:22 | ||
− | | We will first have to re-size our editing window a little | + | | 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 261: | Line 260: | ||
|- | |- | ||
| 05:43 | | 05:43 | ||
− | | That will help a lot in aligning the content on the | + | | 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 | + | |And, even show the''' blocks''' that we created in our node. |
|- | |- | ||
| 05:55 | | 05:55 | ||
− | | So here is the''' H2 block''', a''' block code | + | | 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 296: | ||
|- | |- | ||
| 06:26 | | 06:26 | ||
− | | Say, we have inserted a''' JavaScript, I-frame | + | | Say, we have inserted a''' JavaScript, I-frame, youtube video''', a''' google map''' or something like that. |
|- | |- | ||
| 06:33 | | 06:33 | ||
− | |Changing to''' Basic HTML,''' will cause''' Drupal''' to remove those | + | |Changing to''' Basic HTML,''' will cause''' Drupal''' to remove those contents. |
|- | |- | ||
Line 325: | Line 324: | ||
|- | |- | ||
| 06:58 | | 06:58 | ||
− | |The modified | + | |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 345: | Line 344: | ||
|- | |- | ||
| 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 352: | ||
|- | |- | ||
| 07:27 | | 07:27 | ||
− | | In''' Drupal,''' our user has different roles and each role has to be given | + | | In''' Drupal,''' our user has different roles and each role has to be given '''permission'''s. |
|- | |- | ||
Line 369: | Line 368: | ||
|- | |- | ||
| 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 392: | ||
|- | |- | ||
| 08:26 | | 08:26 | ||
− | | Then click and drag the mouse | + | | 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 | + | | To add a new group, click on''' Add group''' button. Name it “copy and paste” and then 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 408: | ||
|- | |- | ||
| 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 417: | Line 416: | ||
|- | |- | ||
| 09:04 | | 09:04 | ||
− | | We also upload''' inline-images | + | | 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 | + | | Click the''' Edit''' option in "Welcome to Drupalville" node. |
|- | |- | ||
| 10:07 | | 10:07 | ||
− | |Notice that since we had''' Full HTML''' turned''' ''' | + | |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 | + | |This time let us configure the''' Full HTML''' toolbar. |
|- | |- | ||
Line 497: | Line 496: | ||
|- | |- | ||
| 10:57 | | 10:57 | ||
− | |Name it as | + | |Name it as “copy and paste”. Now we can click and drag these into our''' copy and paste''' section. |
|- | |- | ||
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. | + | |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 | |
− | + | Using CKEditor and | |
− | + | 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'''. |
|- | |- | ||
| 11:59 | | 11:59 | ||
− | | The video at this link | + | | The video at this link summarizes the Spoken Tutorial project. Please download and watch it. |
|- | |- | ||
| 12:06 | | 12:06 | ||
− | | The Spoken Tutorial Project | + | | 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 | ||
− | | This is Varsha Venkatesh signing off. Thanks for joining. | + | | This is Varsha Venkatesh, signing off. Thanks for joining. |
|} | |} |
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. |