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

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 thi...")
 
Line 5: Line 5:
 
|-
 
|-
 
| 00:01
 
| 00:01
−
|  Welcome to the '''Spoken tutorial''' on''' Editing Existing Content.'''
+
|  ''' Editing Existing Content.''' પરનાં સ્પોકન ટ્યુટોરીયલમાં સ્વાગત છે.
  
 
|-
 
|-
 
| 00:06
 
| 00:06
−
| In this tutorial, we will learn about  '''Inline editing'''
+
| આ ટ્યુટોરીયલમાં આપણે '''Inline editing''' વિશે શીખીશું.
  
 
|-
 
|-
−
| 00:10
+
| 00:10
−
|using '''CKEditor '''and
+
| '''CKEditor ''' વાપરીને અને
  
 
|-
 
|-
−
| 00:12
+
| 00:12
−
|configuring '''CKEditor'''.
+
| '''CKEditor''' કોન્ફીગર કરીને.
  
 
|-
 
|-
−
| 00:15
+
| 00:15
−
| To record this tutorial, I am using:
+
| આ ટ્યુટોરીયલ રેકોર્ડ કરવા માટે, હું વાપરી રહ્યો છું:
  
 
* '''Ubuntu Operating System'''
 
* '''Ubuntu Operating System'''
−
* '''Drupal 8 '''and
+
* '''Drupal 8 ''' અને
−
* '''Firefox '''web browser.
+
* '''Firefox ''' વેબ બ્રાઉઝર.
  
 
|-
 
|-
−
| 00:24
+
| 00:24
−
|You can use any web browser as per your choice.
+
| તમે તમારા પસંદનું કોઈપણ વેબ બ્રાઉઝર વાપરી શકો છો.
  
 
|-
 
|-
−
| 00:28
+
| 00:28
−
| Let us open our website which we created earlier.
+
| ચાલો આપણે પહેલા બનાવેલી આપણી વેબસાઈટ ખોલીએ.
  
 
|-
 
|-
 
| 00:32
 
| 00:32
−
| First, we will learn about''' Inline Editing'''.
+
| પહેલા, આપણે ''' Inline Editing''' વિશે શીખીશું.
  
 
|-
 
|-
 
| 00:36
 
| 00:36
−
| Hover the cursor over the''' Title.''' On the right hand side, we will see a''' pencil icon'''.
+
| કર્સરને ''' Title''' પર ફેરવો. જમણી બાજુએ, આપણને એક ''' pencil icon''' દેખાશે.
  
 
|-
 
|-
 
| 00:43
 
| 00:43
−
| When we hover over the''' Title''', it will ask us to configure the''' block.'''
+
| જ્યારે આપણે ''' Title''' પર માઉસ ફેરવીએ છીએ ત્યારે, તે આપણને ''' block''' કોન્ફીગર કરવા માટે પૂછશે.
  
 
|-
 
|-
 
| 00:48
 
| 00:48
−
| Click on''' Configure block.''' The''' block''' is the general block for''' Page Title.'''
+
| ''' Configure block''' પર ક્લીક કરો. ''' block''' એ ''' Page Title''' માટે સામાન્ય બ્લોક છે.
  
 
|-
 
|-
 
| 00:54
 
| 00:54
−
| Changing this will change the way''' Page Titles''' appear on every''' node'''.
+
| આને બદલવાથી દરેક '''node''' પર ''' Page Titles''' દ્રશ્યમાન થવાની રીત બદલાશે.
  
 
|-
 
|-
 
| 00:59
 
| 00:59
−
| Click on''' Go back to site.''' Hover over the''' pencil''' here and click on''' Configure block.'''
+
| ''' Go back to site''' પર ક્લીક કરો. અહીં ''' pencil''' પર ફેરવો અને ''' Configure block''' પર ક્લીક કરો.
  
 
|-
 
|-
−
| 01:06
+
| 01:06
−
|If you want to change the tabs, you can change them here.
+
| તમને જો ટેબો બદલવા હોય તો, તમે તે અહીં બદલી શકો છો.
  
 
|-
 
|-
 
| 01:10
 
| 01:10
−
| I will leave it as it is.
+
| હું તેને એવું જ રહેવા દઈશ.
  
 
|-
 
|-
 
| 01:13
 
| 01:13
−
| Click''' Back to site'''.
+
| ''' Back to site''' ક્લીક કરો.
  
 
|-
 
|-
 
| 01:16
 
| 01:16
−
| Now, click on the''' pencil''' in the''' Content area'''.
+
| હવે, ''' Content area''' માં ''' pencil''' પર ક્લીક કરો.
  
 
|-
 
|-
−
| 01:20
+
| 01:20
−
|You will see three options–''' Quick edit, Edit''' and''' Delete.'''
+
| તમને ત્રણ વિકલ્પો દેખાશે –''' Quick edit, Edit''' અને ''' Delete.'''
  
 
|-
 
|-
 
| 01:25
 
| 01:25
−
| '''Quick edit''' is '''front end''' editing in an '''inline window.'''
+
| '''Quick edit''' એ '''inline window''' માં '''front end''' એડિટિંગ છે.
  
 
|-
 
|-
−
| 01:29
+
| 01:29
−
|'''Edit''' takes us back to the main editing window for a node.
+
| '''Edit''' આપણને નોડ માટે મુખ્ય એડિટિંગ વિન્ડોમાં પાછી લઇ જાય છે.
  
 
|-
 
|-
−
| 01:33
+
| 01:33
−
|'''Delete''' will delete the node after confirmation.
+
| '''Delete''' એ ખાતરી કર્યા પછીથી નોડને રદ્દ કરશે.
  
 
|-
 
|-
 
| 01:37
 
| 01:37
−
| Let’s click on''' Quick edit '''to edit our node in an inline fashion.
+
| ચાલો આપણી નોડને આંતરિક શૈલીમાં એડિટ કરવા માટે ''' Quick edit ''' પર ક્લીક કરીએ.
  
 
|-
 
|-
 
| 01:41
 
| 01:41
−
| 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.
+
| જ્યારે આપણે તેના પર ક્લીક કરીએ છીએ તો, આપણે વધુ કન્ટેન્ટને ઉમેરવા, સ્ત્રોતને જોવા અને ઉપરાંત અમુક ટેક્સ્ટને બોલ્ડ કરવામાં સમર્થ છીએ.
  
 
|-
 
|-
 
| 01:53
 
| 01:53
−
| Once we make a change,''' Drupal''' asks us to '''save'''. Click''' Save''' to update the node.
+
| એકવાર આપણે ફેરફાર કરી લઈએ તો, ''' Drupal''' તેને સંગ્રહવા માટે પૂછે છે. નોડને અપડેટ કરવા માટે ''' Save''' પર ક્લીક કરો.
  
 
|-
 
|-
 
| 02:00
 
| 02:00
−
| Now, let’s learn to change an''' article node''', say''' Welcome to Drupalville.'''
+
| હવે, ચાલો ''' article node''' ને બદલવાનું શીખીએ, માનો કે ''' Welcome to Drupalville.'''
  
 
|-
 
|-
 
| 02:06
 
| 02:06
−
| Click on''' Quick edit.''' Notice that the''' Title''' and the''' body''' fields are editable here in the '''front end'''.
+
| ''' Quick edit''' પર ક્લીક કરો. નોંધ લો કે '''front end''' માં ''' Title''' અને ''' body''' ફીલ્ડો અહીં એડિટ કરી શકાય એવા છે.
  
 
|-
 
|-
−
| 02:14
+
| 02:14
−
|But we can't edit the image.
+
| પરંતુ આપણે ઇમેજને એડિટ કરી શકતા નથી.
  
 
|-
 
|-
 
| 02:17
 
| 02:17
−
| In order to edit the image, we need to go into the''' edit screen.'''
+
| ઇમેજને એડિટ કરવા માટે, આપણને ''' edit screen''' માં જવું પડશે.
  
 
|-
 
|-
−
| 02:22
+
| 02:22
−
|Now we can make changes to the '''body''' and '''save''' it.
+
| હવે આપણે '''body''' માં ફેરફાર કરી શકીએ છીએ અને તેને સંગ્રહીશું.
  
 
|-
 
|-
 
| 02:26
 
| 02:26
−
| I can also edit the''' tags''' in the '''Quick edit '''window.
+
| સાથે જ હું '''Quick edit ''' વિન્ડોમાં ''' tags''' પણ એડિટ કરી શકું છું.
  
 
|-
 
|-
 
| 02:30
 
| 02:30
−
| The front end editing in''' Drupal''' is suitable for simple edits.
+
| ''' Drupal''' માં ફ્રન્ટ એંડ એડિટિંગ સાદા એડિટો માટે યોગ્ય છે.
  
 
|-
 
|-
 
| 02:34
 
| 02:34
−
| '''Edit''' tab is a fantastic feature of''' Drupal '''to update the content anytime.
+
| કન્ટેન્ટને કોઈપણ સમયે અપડેટ કરવા માટે '''Edit''' ટેબ એ ''' Drupal ''' ની એક ઉત્તમ વિશિષ્ટતા છે.
  
 
|-
 
|-
−
| 02:40
+
| 02:40
−
| '''Wysiwyg Editor''' was mentioned several times before.
+
| '''Wysiwyg Editor''' એ પહેલા પણ ઘણી વખત ઉલ્લેખાયી હતી.
  
 
|-
 
|-
−
| 02:44
+
| 02:44
−
| It stands for '''what you see is what you get.'''
+
| તે '''what you see is what you get''' આ માટે ઉભી રહે છે.
  
 
|-
 
|-
−
| 02:48
+
| 02:48
−
| '''Wysiwyg Editor''' is quite helpful.
+
| '''Wysiwyg Editor''' એ ઘણી મદદગાર છે.
  
 
|-
 
|-
−
| 02:52
+
| 02:52
−
| Let’s change''' Text Format''' to''' Full HTML''' first.
+
| ચાલો પહેલા ''' Text Format''' ને ''' Full HTML''' માં બદલીએ.
  
 
|-
 
|-
−
| 02:58
+
| 02:58
−
|This will give us an idea of the formatting options available in the''' Wysiwyg Editor.'''
+
| આ આપણને ''' Wysiwyg Editor''' માં ઉપલબ્ધ ફોર્મેટિંગ વિકલ્પોનો વિચાર આપશે.
  
 
|-
 
|-
−
| 03:04
+
| 03:04
−
| In''' Drupal,''' the''' CKEditor''' comes with''' Drupal core'''.
+
| ''' Drupal''' માં, ''' CKEditor''' એ ''' Drupal core''' સાથે આવે છે.
  
 
|-
 
|-
−
| 03:09
+
| 03:09
−
|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".
+
| ચાલો એક નજર ફેરવી લઈએ. "Welcome to our site" આ ટેક્સ્ટને હાઈલાઈટ કરો.
  
 
|-
 
|-
−
| 03:20
+
| 03:20
−
|Change the format from''' Normal''' to''' Heading 2.'''
+
| ફોર્મેટ ''' Normal''' માંથી ''' Heading 2''' માં બદલો.
  
 
|-
 
|-
−
| 03:24
+
| 03:24
−
|Immediately,''' Drupal''' gives a preview of what the text will look like.
+
| તુરત જ, ટેક્સ્ટ કેવી દેખાશે તેનો પ્રિવ્યું ''' Drupal''' આપે છે.
  
 
|-
 
|-
 
| 03:30
 
| 03:30
−
| This is determined by the '''theme''' and the''' cascading style sheets''' or''' CSS''' that the theme gives us.
+
| આ નિશ્ચિત થાય છે '''theme''' અને ''' cascading style sheets''' અથવા ''' CSS''' દ્વારા જે કે આપણને થીમ દ્વારા અપાય છે.
  
 
|-
 
|-
 
| 03:38
 
| 03:38
−
| Let us add some more text here, “Editing Drupal nodes is really fun!”.
+
| ચાલો અહીં અમુક વધુ ટેક્સ્ટ ઉમેરીએ, “Editing Drupal nodes is really fun!”.
  
 
|-
 
|-
 
| 03:44
 
| 03:44
−
| Now highlight that text, turn off the''' Italics''' and create a '''hyperlink''' for that text.
+
| હવે તે ટેક્સ્ટને હાઈલાઈટ કરો, ''' Italics''' ને બંધ કરો અને તે ટેક્સ્ટ માટે એક '''hyperlink''' બનાવો.
  
 
|-
 
|-
−
| 03:52
+
| 03:52
−
| Here, let’s say, http://drupal.org/ . Click on '''Save.'''
+
| અહીં, ચાલો માનો કે, http://drupal.org/ . '''Save''' પર ક્લીક કરો.
  
 
|-
 
|-
−
| 04:00
+
| 04:00
−
|Hover the '''mouse''' and notice that the text is now '''hyperlinked'''.
+
| માઉસને ફેરવો અને નોંધ લો કે ટેક્સ્ટ હવે '''hyperlinked''' છે.
  
 
|-
 
|-
 
| 04:04
 
| 04:04
−
| To remove the '''hyperlink''', highlight the text and click on''' Unlink.'''
+
| '''hyperlink''' ને રદ્દ કરવા માટે, ટેક્સ્ટને હાઈલાઈટ કરો અને ''' Unlink''' પર ક્લીક કરો.
  
 
|-
 
|-
−
| 04:10
+
| 04:10
−
|To '''undo''' a change, press''' Ctrl+Z.'''
+
| ફેરફારને '''undo''' કરવા માટે ''' Ctrl+Z''' દાબો.
  
 
|-
 
|-
 
| 04:14
 
| 04:14
−
| We can also add''' ordered''' and''' unordered lists''' by clicking on the''' Bullets and numbering icons''' here.
+
| આપણે અહીં ''' Bullets and numbering icons''' પર ક્લીક કરીને ''' ordered''' અને ''' unordered lists''' પણ ઉમેરી શકીએ છીએ.
  
 
|-
 
|-
−
| 04:21
+
| 04:21
−
|Click on''' Unordered list'''. Then add''' bullets - one, two, three.'''
+
| ''' Unordered list''' પર ક્લીક કરો. ત્યારબાદ ''' bullets - one, two, three''' ઉમેરો.
  
 
|-
 
|-
−
| 04:28
+
| 04:28
−
|Next, click on''' Ordered list''' and add''' one, two''' and''' three.'''
+
| આગળ, ''' Ordered list''' પર ક્લીક કરો અને ''' one, two''' અને ''' three''' ઉમેરો.
  
 
|-
 
|-
−
| 04:34
+
| 04:34
−
| To use''' Block quotes''', highlight some text and click the''' Block Quote''' link.
+
| ''' Block quotes''' વાપરવા માટે, અમુક ટેક્સ્ટને હાઈલાઈટ કરો અને ''' Block Quote''' લીંક પર ક્લીક કરો.
  
 
|-
 
|-
−
| 04:40
+
| 04:40
−
|Once again, the formatting is managed by our''' theme.'''
+
| ફરી એક વાર, ફોર્મેટિંગ આપણી ''' theme''' દ્વારા વ્યવસ્થાપિત થાય છે.
  
 
|-
 
|-
 
| 04:46
 
| 04:46
−
| We can easily insert images also. I have chosen this file which I had uploaded on the first''' node'''.
+
| આપણે ઇમેજને પણ સરળતાથી દાખલ કરી શકીએ છીએ. મેં આ ફાઈલને પસંદ કરી છે જેને મેં પહેલી ''' node''' પર અપલોડ કરી હતી.
  
 
|-
 
|-
−
| 04:56
+
| 04:56
−
| In the''' Alternate Text''' field, I’ll type “Drupal Logo”.
+
| ''' Alternate Text''' ફિલ્ડમાં, હું ટાઈપ કરીશ “Drupal Logo”.
  
 
|-
 
|-
−
| 05:02
+
| 05:02
−
|Under''' Align''', I will choose''' Right'''. Add a''' Caption''' if you want.
+
| ''' Align''' અંતર્ગત, હું ''' Right''' પસંદ કરીશ. જો તમને જોઈએ તો એક ''' Caption''' ઉમેરો.
  
 
|-
 
|-
−
| 05:08
+
| 05:08
−
|Lastly, click on''' Save.'''
+
| છેલ્લે, ''' Save''' પર ક્લીક કરો.
  
 
|-
 
|-

Revision as of 22:21, 31 August 2016

Time
Narration
00:01 Editing Existing Content. પરનાં સ્પોકન ટ્યુટોરીયલમાં સ્વાગત છે.
00:06 આ ટ્યુટોરીયલમાં આપણે Inline editing વિશે શીખીશું.
00:10 CKEditor વાપરીને અને
00:12 CKEditor કોન્ફીગર કરીને.
00:15 આ ટ્યુટોરીયલ રેકોર્ડ કરવા માટે, હું વાપરી રહ્યો છું:
  • Ubuntu Operating System
  • Drupal 8 અને
  • Firefox વેબ બ્રાઉઝર.
00:24 તમે તમારા પસંદનું કોઈપણ વેબ બ્રાઉઝર વાપરી શકો છો.
00:28 ચાલો આપણે પહેલા બનાવેલી આપણી વેબસાઈટ ખોલીએ.
00:32 પહેલા, આપણે Inline Editing વિશે શીખીશું.
00:36 કર્સરને Title પર ફેરવો. જમણી બાજુએ, આપણને એક pencil icon દેખાશે.
00:43 જ્યારે આપણે Title પર માઉસ ફેરવીએ છીએ ત્યારે, તે આપણને block કોન્ફીગર કરવા માટે પૂછશે.
00:48 Configure block પર ક્લીક કરો. block એ Page Title માટે સામાન્ય બ્લોક છે.
00:54 આને બદલવાથી દરેક node પર Page Titles દ્રશ્યમાન થવાની રીત બદલાશે.
00:59 Go back to site પર ક્લીક કરો. અહીં pencil પર ફેરવો અને Configure block પર ક્લીક કરો.
01:06 તમને જો ટેબો બદલવા હોય તો, તમે તે અહીં બદલી શકો છો.
01:10 હું તેને એવું જ રહેવા દઈશ.
01:13 Back to site ક્લીક કરો.
01:16 હવે, Content area માં pencil પર ક્લીક કરો.
01:20 તમને ત્રણ વિકલ્પો દેખાશે – Quick edit, Edit અને Delete.
01:25 Quick edit એ inline window માં front end એડિટિંગ છે.
01:29 Edit આપણને નોડ માટે મુખ્ય એડિટિંગ વિન્ડોમાં પાછી લઇ જાય છે.
01:33 Delete એ ખાતરી કર્યા પછીથી નોડને રદ્દ કરશે.
01:37 ચાલો આપણી નોડને આંતરિક શૈલીમાં એડિટ કરવા માટે Quick edit પર ક્લીક કરીએ.
01:41 જેમ આપણે માઉસ ફેરવશું, તે આપણને વ્યક્તિગત નોડનાં વિભિન્ન વિભાગોમાં લઇ જાય છે.
01:47 જ્યારે આપણે તેના પર ક્લીક કરીએ છીએ તો, આપણે વધુ કન્ટેન્ટને ઉમેરવા, સ્ત્રોતને જોવા અને ઉપરાંત અમુક ટેક્સ્ટને બોલ્ડ કરવામાં સમર્થ છીએ.
01:53 એકવાર આપણે ફેરફાર કરી લઈએ તો, Drupal તેને સંગ્રહવા માટે પૂછે છે. નોડને અપડેટ કરવા માટે Save પર ક્લીક કરો.
02:00 હવે, ચાલો article node ને બદલવાનું શીખીએ, માનો કે Welcome to Drupalville.
02:06 Quick edit પર ક્લીક કરો. નોંધ લો કે front end માં Title અને body ફીલ્ડો અહીં એડિટ કરી શકાય એવા છે.
02:14 પરંતુ આપણે ઇમેજને એડિટ કરી શકતા નથી.
02:17 ઇમેજને એડિટ કરવા માટે, આપણને edit screen માં જવું પડશે.
02:22 હવે આપણે body માં ફેરફાર કરી શકીએ છીએ અને તેને સંગ્રહીશું.
02:26 સાથે જ હું Quick edit વિન્ડોમાં tags પણ એડિટ કરી શકું છું.
02:30 Drupal માં ફ્રન્ટ એંડ એડિટિંગ સાદા એડિટો માટે યોગ્ય છે.
02:34 કન્ટેન્ટને કોઈપણ સમયે અપડેટ કરવા માટે Edit ટેબ એ Drupal ની એક ઉત્તમ વિશિષ્ટતા છે.
02:40 Wysiwyg Editor એ પહેલા પણ ઘણી વખત ઉલ્લેખાયી હતી.
02:44 તે what you see is what you get આ માટે ઉભી રહે છે.
02:48 Wysiwyg Editor એ ઘણી મદદગાર છે.
02:52 ચાલો પહેલા Text Format ને Full HTML માં બદલીએ.
02:58 આ આપણને Wysiwyg Editor માં ઉપલબ્ધ ફોર્મેટિંગ વિકલ્પોનો વિચાર આપશે.
03:04 Drupal માં, CKEditor એ Drupal core સાથે આવે છે.
03:09 મૂળભૂત રીતે તે ચાલુ હોય છે અને કોન્ફીગર કરી શકાય એવી હોય છે.
03:14 ચાલો એક નજર ફેરવી લઈએ. "Welcome to our site" આ ટેક્સ્ટને હાઈલાઈટ કરો.
03:20 ફોર્મેટ Normal માંથી Heading 2 માં બદલો.
03:24 તુરત જ, ટેક્સ્ટ કેવી દેખાશે તેનો પ્રિવ્યું Drupal આપે છે.
03:30 આ નિશ્ચિત થાય છે theme અને cascading style sheets અથવા CSS દ્વારા જે કે આપણને થીમ દ્વારા અપાય છે.
03:38 ચાલો અહીં અમુક વધુ ટેક્સ્ટ ઉમેરીએ, “Editing Drupal nodes is really fun!”.
03:44 હવે તે ટેક્સ્ટને હાઈલાઈટ કરો, Italics ને બંધ કરો અને તે ટેક્સ્ટ માટે એક hyperlink બનાવો.
03:52 અહીં, ચાલો માનો કે, http://drupal.org/ . Save પર ક્લીક કરો.
04:00 માઉસને ફેરવો અને નોંધ લો કે ટેક્સ્ટ હવે hyperlinked છે.
04:04 hyperlink ને રદ્દ કરવા માટે, ટેક્સ્ટને હાઈલાઈટ કરો અને Unlink પર ક્લીક કરો.
04:10 ફેરફારને undo કરવા માટે Ctrl+Z દાબો.
04:14 આપણે અહીં Bullets and numbering icons પર ક્લીક કરીને ordered અને unordered lists પણ ઉમેરી શકીએ છીએ.
04:21 Unordered list પર ક્લીક કરો. ત્યારબાદ bullets - one, two, three ઉમેરો.
04:28 આગળ, Ordered list પર ક્લીક કરો અને one, two અને three ઉમેરો.
04:34 Block quotes વાપરવા માટે, અમુક ટેક્સ્ટને હાઈલાઈટ કરો અને Block Quote લીંક પર ક્લીક કરો.
04:40 ફરી એક વાર, ફોર્મેટિંગ આપણી theme દ્વારા વ્યવસ્થાપિત થાય છે.
04:46 આપણે ઇમેજને પણ સરળતાથી દાખલ કરી શકીએ છીએ. મેં આ ફાઈલને પસંદ કરી છે જેને મેં પહેલી node પર અપલોડ કરી હતી.
04:56 Alternate Text ફિલ્ડમાં, હું ટાઈપ કરીશ “Drupal Logo”.
05:02 Align અંતર્ગત, હું Right પસંદ કરીશ. જો તમને જોઈએ તો એક Caption ઉમેરો.
05:08 છેલ્લે, 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

Bharat636, Jyotisolanki

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