Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Support Table Cell Vertical Alignment Configuration #332

Merged
merged 3 commits into from

3 participants

@mjrpes

This allows for table cell vertical alignment to be set in the cell properties of a table.

mjrpes added some commits
@mjrpes

Added support for vertical alignment, used by table plugin.

@mjrpes mjrpes Update Formatter.js
th can be vertical aligned too
ebe5cd9
@DArtagan

Please discuss and merge. Currently occupying two of the top feature requests in the tracker (6056 & 6491).

@spocke
Owner

This makes sense and nice that the formats for it can be configured. But it will break all existing language packs.

@mjrpes

How does one get around this issue when there is a change to user interface wording?

@spocke spocke merged commit c74fc4f into tinymce:master
@spocke
Owner

Pulled this one in. Would be nice to have the full name of the contributor to add to the changelog.

@DArtagan

Thank you mjrpes and spocke; it's really great to have this in trunk.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Feb 13, 2014
  1. @mjrpes

    Update Formatter.js

    mjrpes authored
  2. @mjrpes

    Update Plugin.js

    mjrpes authored
    Added support for vertical align
Commits on Feb 15, 2014
  1. @mjrpes

    Update Formatter.js

    mjrpes authored
    th can be vertical aligned too
This page is out of date. Refresh to see the latest.
View
13 js/tinymce/classes/Formatter.js
@@ -75,6 +75,19 @@ define("tinymce/Formatter", [
function defaultFormats() {
register({
+
+ valigntop: [
+ {selector: 'td,th', styles: {'verticalAlign': 'top'}}
+ ],
+
+ valignmiddle: [
+ {selector: 'td,th', styles: {'verticalAlign': 'middle'}}
+ ],
+
+ valignbottom: [
+ {selector: 'td,th', styles: {'verticalAlign': 'bottom'}}
+ ],
+
alignleft: [
{selector: 'figure,p,h1,h2,h3,h4,h5,h6,td,th,tr,div,ul,ol,li', styles: {textAlign: 'left'}, defaultBlock: 'div'},
{selector: 'img,table', collapsed: false, styles: {'float': 'left'}}
View
29 js/tinymce/plugins/table/classes/Plugin.js
@@ -45,6 +45,12 @@ define("tinymce/tableplugin/Plugin", [
editor.formatter.remove('align' + name, {}, elm);
});
}
+
+ function unApplyVAlign(elm) {
+ each('top middle bottom'.split(' '), function(name) {
+ editor.formatter.remove('valign' + name, {}, elm);
+ });
+ }
function tableDialog() {
var dom = editor.dom, tableElm, data;
@@ -231,7 +237,7 @@ define("tinymce/tableplugin/Plugin", [
]
},
{
- label: 'Alignment',
+ label: 'H Align',
name: 'align',
type: 'listbox',
text: 'None',
@@ -243,6 +249,20 @@ define("tinymce/tableplugin/Plugin", [
{text: 'Center', value: 'center'},
{text: 'Right', value: 'right'}
]
+ },
+ {
+ label: 'V Align',
+ name: 'valign',
+ type: 'listbox',
+ text: 'None',
+ minWidth: 90,
+ maxWidth: null,
+ values: [
+ {text: 'None', value: ''},
+ {text: 'Top', value: 'top'},
+ {text: 'Middle', value: 'middle'},
+ {text: 'Bottom', value: 'bottom'}
+ ]
}
]
},
@@ -269,6 +289,13 @@ define("tinymce/tableplugin/Plugin", [
if (data.align) {
editor.formatter.apply('align' + data.align, {}, cellElm);
}
+
+ // Apply/remove vertical alignment
+ unApplyVAlign(cellElm);
+ if (data.valign) {
+ editor.formatter.apply('valign' + data.valign, {}, cellElm);
+ }
+
});
editor.focus();
Something went wrong with that request. Please try again.