Blogs

2011.03.13

Kā papildināt WordPress iebūvēto TinyMCE WYSIWYG redaktoru ar jaunām iespējām neizmantojot WordPress spraudņus. Tabulas pogas pievienošana

WordPress pēc noklusējuma piedāvā 2 variantus lapu un rakstu rediģēšanai – teksta rakstīšanu HTML kodā un WYSIWYG (What you see is what you get) redaktoru. WordPress WYSIWYG redaktors balstās uz TinyMCE bāzes, kas ir bezmaksas (Open source) Javascript/HTML WYSIWYG redaktors. Savā būtībā WYSIWYG aiztaupa vienkāršiem lietotājiem, sava emuāra vai mājas lapas uzturētājiem, galvassāpes, kuras varētu rasties, mācoties un tad pašrocīgi rakstot mājas lapas saturu HTML kodā. Šāds redaktors ievērojami ietaupa laiku un padara mājas lapas administrēšanu stipri vienkāršāku.

WordPress TinyMCE WYSIWYG jeb vizuālais redaktors pēc noklusējuma ļauj mainīt teksta formatējumu, krāsas, izmērus, piešķirt treknrakstu, slīprakstu, pasvītrojumu, līdzināšanu, sarakstus u.c., kas ir daudz, taču ne vienmēr pietiekoši – pats bieži esmu sastapies ar situāciju, kad ir nepieciešams papildināt WordPress vizuālo redaktoru ar jaunām iespējām, piemēram, tabulu pārvaldīšanu, jo ar roku veidot HTML kodu tabulām nav nekāds aizraujošais pasākums.

Wordpress TinyMCE vizuālais redaktors pēc noklusējuma

Protams, ja pašam nav nekādas vēlēšanās veikt izmaiņas kodā un iedziļināties tehniskākos sīkumos, ir pieejami dažādi WordPress spraudņi, kas papildus iespējas vizuālajam TinyMCE redaktoram pievienos automātiski, piemēram, TinyMCE Advanced.

WordPress vizuālā redaktora papildināšana nav ļoti sarežģīta, taču ir vēlamas vismaz nelielas priekšzināšanas WordPress datu struktūrā, HTML, PHP un Javascript valodās. Lai WordPress vizuālajam TinyMCE redaktoram pievienotu tabulas rediģēšanas iespējas, jāveic sekojošais.

1. Lejupielādējiet TinyMCE jaunāko versiju no oficiālās mājas lapas

2. Atarhivējiet lejupielādēto arhīvu, atveriet tinymce/jscripts/tiny_mce/plugins/ un augšuplādējiet mapi “table” WordPress mapē wp-includes/js/tinymce/plugins/

3. Atveriet datni wp-admin/includes/post.php, atrodiet kodā rindiņu $plugins = array(‘safari’, ‘inlinepopups’, … un tās galā pievienojiet ‘table’. Rezultātā rindiņa izskatās aptuveni šādi:

$plugins = array('safari', 'inlinepopups', 'spellchecker', 'paste', 'wordpress', 'media', 'fullscreen', 'wpeditimage', 'wpgallery', 'tabfocus', 'table');

4. Pēc tam šajā pat datnē atrodiet rindiņu, kura sākas ar $mce_buttons_2 = apply_filters un pievienojiet tās galā “table”, “tablecontrols”. Rezultātā rindiņa izskatās sekojoši:

$mce_buttons_2 = apply_filters('mce_buttons_2', array('formatselect', 'underline', 'justifyfull', 'forecolor', '|', 'pastetext', 'pasteword', 'removeformat', '|', 'media', 'charmap', '|', 'outdent', 'indent', '|', 'undo', 'redo', 'wp_help', '|', 'table', 'tablecontrols' ));

5. Atveriet wp-includes/js/tinymce/plugins/table/editor_plugin.js datni, nokopējiet visu tajā esošo kodu, atveriet datni wp-includes/js/tinymce/wp-tinymce.js.gz un atrodiet rindiņu pie datnes beigām “// mark as loaded” un virs tās iestarpiniet iepriekš nokopēto kodu.

Atveriet savu WordPress instalāciju administrācijas režīmā un pārliecinieties par veiktajām izmaiņām. Ja neredzat jaunās tabulu pārvaldības pogas, iespējams nepieciešams dzēst pārlūkprogrammas kešatmiņu.

Wordpress TinyMCE ar tabulas rediģēšanas pogām

Pārbaudot TinyMCE vizuālā redaktora tabulas iestatījumu nosaukumus, redzams, ka tie ir grūti saprotami, lai novērstu šo valodas brāķi, nepieciešams veikt vēl dažas papildus darbības.

Wordpress TinyMCE tabulas valodas kļūdas

1. Atveriet datni wp-includes/js/tinymce/langs/wp-langs.php un pirms pēdējās koda rindiņas ievietojiet sekojošo kodu:

tinyMCE.addI18n("' . $language . '.table_dlg",{
general_tab:"' . mce_escape( __('General') ) . '",
advanced_tab:"' . mce_escape( __('Advanced') ) . '",
general_props:"' . mce_escape( __('General properties') ) . '",
advanced_props:"' . mce_escape( __('Advanced properties') ) . '",
rowtype:"' . mce_escape( __('Row in table part') ) . '",
title:"' . mce_escape( __('Insert/Modify Table') ) . '",
width:"' . mce_escape( __('Width') ) . '",
height:"' . mce_escape( __('Height') ) . '",
cols:"' . mce_escape( __('Cols') ) . '",
rows:"' . mce_escape( __('Rows') ) . '",
cellspacing:"' . mce_escape( __('Cellspacing') ) . '",
cellpadding:"' . mce_escape( __('Cellpadding') ) . '",
border:"' . mce_escape( __('Border') ) . '",
align:"' . mce_escape( __('Alignment') ) . '",
align_default:"' . mce_escape( __('Default') ) . '",
align_left:"' . mce_escape( __('Left') ) . '",
align_right:"' . mce_escape( __('Right') ) . '",
align_middle:"' . mce_escape( __('Center') ) . '",
row_title:"' . mce_escape( __('Table row properties') ) . '",
cell_title:"' . mce_escape( __('Table cell properties') ) . '",
cell_type:"' . mce_escape( __('Cell type') ) . '",
valign:"' . mce_escape( __('Vertical alignment') ) . '",
align_top:"' . mce_escape( __('Top') ) . '",
align_bottom:"' . mce_escape( __('Bottom') ) . '",
bordercolor:"' . mce_escape( __('Border color') ) . '",
bgcolor:"' . mce_escape( __('Background color') ) . '",
merge_cells_title:"' . mce_escape( __('Merge table cells') ) . '",
id:"' . mce_escape( __('Id') ) . '",
style:"' . mce_escape( __('Style') ) . '",
langdir:"' . mce_escape( __('Language direction') ) . '",
langcode:"' . mce_escape( __('Language code') ) . '",
mime:"' . mce_escape( __('Target MIME Type') ) . '",
ltr:"' . mce_escape( __('Left to right') ) . '",
rtl:"' . mce_escape( __('Right to left') ) . '",
bgimage:"' . mce_escape( __('Background image') ) . '",
summary:"' . mce_escape( __('Summary') ) . '",
td:"' . mce_escape( __('Data') ) . '",
th:"' . mce_escape( __('Header') ) . '",
cell_cell:"' . mce_escape( __('Update current cell') ) . '",
cell_row:"' . mce_escape( __('Update all cells in row') ) . '",
cell_all:"' . mce_escape( __('Update all cells in table') ) . '",
row_row:"' . mce_escape( __('Update current row') ) . '",
row_odd:"' . mce_escape( __('Update odd rows in table') ) . '",
row_even:"' . mce_escape( __('Update even rows in table') ) . '",
row_all:"' . mce_escape( __('Update all rows in table') ) . '",
thead:"' . mce_escape( __('Table Head') ) . '",
tbody:"' . mce_escape( __('Table Body') ) . '",
tfoot:"' . mce_escape( __('Table Foot') ) . '",
scope:"' . mce_escape( __('Scope') ) . '",
rowgroup:"' . mce_escape( __('Row Group') ) . '",
colgroup:"' . mce_escape( __('Col Group') ) . '",
col_limit:"' . mce_escape( __('You have exceeded the maximum number of columns') ) . '",
row_limit:"' . mce_escape( __('You have exceeded the maximum number of rows') ) . '",
cell_limit:"' . mce_escape( __('You have exceeded the maximum number of cells') ) . '",
missing_scope:"' . mce_escape( __('Are you sure you want to continue without specifying a scope for this table header cell. Without it, it may be difficult for some users with disabilities to understand the content or data displayed of the table') ) . '",
caption:"' . mce_escape( __('Table caption') ) . '",
frame:"' . mce_escape( __('Frame') ) . '",
frame_none:"' . mce_escape( __('none') ) . '",
frame_groups:"' . mce_escape( __('groups') ) . '",
frame_rows:"' . mce_escape( __('rows') ) . '",
frame_cols:"' . mce_escape( __('cols') ) . '",
frame_all:"' . mce_escape( __('all') ) . '",
rules:"' . mce_escape( __('rules') ) . '",
rules_void:"' . mce_escape( __('avoid') ) . '",
rules_above:"' . mce_escape( __('above') ) . '",
rules_below:"' . mce_escape( __('below') ) . '",
rules_hsides:"' . mce_escape( __('hsides') ) . '",
rules_lhs:"' . mce_escape( __('lhs') ) . '",
rules_rhs:"' . mce_escape( __('rhs') ) . '",
rules_vsides:"' . mce_escape( __('vsides') ) . '",
rules_box:"' . mce_escape( __('box') ) . '",
rules_border:"' . mce_escape( __('border') ) . '"
});

2. Saglabājiet veiktās izmaiņas un pārliecinieties par rezultātu.

Wordpress TinyMCE tabulas valoda pēc labojumiem

Kategorijā: Wordpress

Citi raksti

Tavs viedoklis

Jaunākie darbi