MDL-41912 editor_atto: Padding for editable area

This commit is contained in:
Frederic Massart 2013-09-25 16:47:58 +08:00
parent 65a4f26d8a
commit a72a759303
5 changed files with 118 additions and 32 deletions

View File

@ -1,24 +1,29 @@
div.editor_atto {
.editor_atto_content_wrap {
background-color: white;
border: 1px solid #BBB;
width: 100%;
}
.editor_atto_content {
padding: 4px;
}
.editor_atto_content_wrap,
.editor_atto + textarea {
width: 100%;
padding: 0;
resize: vertical;
border-radius: 0;
border: 1px solid #BBB;
border-top: none;
}
.editor_atto + textarea {
border-radius: 0;
resize: vertical;
margin-top: -1px;
}
div.editor_atto_toolbar {
display: block;
background: #F2F2F2;
min-height: 42px;
border-top: 1px solid #BBB;
border-left: 1px solid #BBB;
border-right: 1px solid #BBB;
border: 1px solid #BBB;
width: 100%;
padding: 0 0 9px 0;
}
@ -53,7 +58,7 @@ div.editor_atto_toolbar div.atto_group {
background: #FFF;
}
.editor_atto img {
.editor_atto_content img {
resize: both; overflow: auto;
}

View File

@ -15,15 +15,34 @@ YUI.add('moodle-editor_atto-editor', function (Y, NAME) {
// You should have received a copy of the GNU General Public License
// along with Moodle. If not, see <http://www.gnu.org/licenses/>.
/**
* Atto editor.
*
* @package editor_atto
* @copyright 2013 Damyon Wiese <damyon@moodle.com>
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
/**
* Classes constants.
*/
CSS = {
CONTENT: 'editor_atto_content',
CONTENTWRAPPER: 'editor_atto_content_wrap',
TOOLBAR: 'editor_atto_toolbar',
WRAPPER: 'editor_atto'
};
/**
* Atto editor main class.
* Common functions required by editor plugins.
*
* @package editor-atto
* @package editor_atto
* @copyright 2013 Damyon Wiese <damyon@moodle.com>
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
M.editor_atto = M.editor_atto || {
/**
* List of attached button handlers to prevent duplicates.
*/
@ -309,12 +328,22 @@ M.editor_atto = M.editor_atto || {
*/
init : function(params) {
var textarea = Y.one('#' +params.elementid);
var wrapper = Y.Node.create('<div class="' + CSS.WRAPPER + '" />');
var atto = Y.Node.create('<div id="' + params.elementid + 'editable" ' +
'contenteditable="true" ' +
'spellcheck="true" ' +
'class="editor_atto"/>');
'class="' + CSS.CONTENT + '" />');
var cssfont = '';
var toolbar = Y.Node.create('<div class="editor_atto_toolbar" id="' + params.elementid + '_toolbar" role="toolbar"/>');
var toolbar = Y.Node.create('<div class="' + CSS.TOOLBAR + '" id="' + params.elementid + '_toolbar" role="toolbar"/>');
// Editable content wrapper.
var content = Y.Node.create('<div class="' + CSS.CONTENTWRAPPER + '" />');
content.appendChild(atto);
// Add everything to the wrapper.
wrapper.appendChild(toolbar);
wrapper.appendChild(content);
// Bleh - why are we sent a url and not the css to apply directly?
var css = Y.io(params.content_css, { sync: true });
@ -328,10 +357,8 @@ M.editor_atto = M.editor_atto || {
// Copy text to editable div.
atto.append(textarea.get('value'));
// Add the toolbar to the page.
textarea.get('parentNode').insert(toolbar, textarea);
// Add the editable div to the page.
textarea.get('parentNode').insert(atto, textarea);
// Add the toolbar and editable zone to the page.
textarea.get('parentNode').insert(wrapper, textarea);
atto.setStyle('color', textarea.getStyle('color'));
atto.setStyle('lineHeight', textarea.getStyle('lineHeight'));
atto.setStyle('fontSize', textarea.getStyle('fontSize'));

File diff suppressed because one or more lines are too long

View File

@ -15,15 +15,34 @@ YUI.add('moodle-editor_atto-editor', function (Y, NAME) {
// You should have received a copy of the GNU General Public License
// along with Moodle. If not, see <http://www.gnu.org/licenses/>.
/**
* Atto editor.
*
* @package editor_atto
* @copyright 2013 Damyon Wiese <damyon@moodle.com>
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
/**
* Classes constants.
*/
CSS = {
CONTENT: 'editor_atto_content',
CONTENTWRAPPER: 'editor_atto_content_wrap',
TOOLBAR: 'editor_atto_toolbar',
WRAPPER: 'editor_atto'
};
/**
* Atto editor main class.
* Common functions required by editor plugins.
*
* @package editor-atto
* @package editor_atto
* @copyright 2013 Damyon Wiese <damyon@moodle.com>
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
M.editor_atto = M.editor_atto || {
/**
* List of attached button handlers to prevent duplicates.
*/
@ -309,12 +328,22 @@ M.editor_atto = M.editor_atto || {
*/
init : function(params) {
var textarea = Y.one('#' +params.elementid);
var wrapper = Y.Node.create('<div class="' + CSS.WRAPPER + '" />');
var atto = Y.Node.create('<div id="' + params.elementid + 'editable" ' +
'contenteditable="true" ' +
'spellcheck="true" ' +
'class="editor_atto"/>');
'class="' + CSS.CONTENT + '" />');
var cssfont = '';
var toolbar = Y.Node.create('<div class="editor_atto_toolbar" id="' + params.elementid + '_toolbar" role="toolbar"/>');
var toolbar = Y.Node.create('<div class="' + CSS.TOOLBAR + '" id="' + params.elementid + '_toolbar" role="toolbar"/>');
// Editable content wrapper.
var content = Y.Node.create('<div class="' + CSS.CONTENTWRAPPER + '" />');
content.appendChild(atto);
// Add everything to the wrapper.
wrapper.appendChild(toolbar);
wrapper.appendChild(content);
// Bleh - why are we sent a url and not the css to apply directly?
var css = Y.io(params.content_css, { sync: true });
@ -328,10 +357,8 @@ M.editor_atto = M.editor_atto || {
// Copy text to editable div.
atto.append(textarea.get('value'));
// Add the toolbar to the page.
textarea.get('parentNode').insert(toolbar, textarea);
// Add the editable div to the page.
textarea.get('parentNode').insert(atto, textarea);
// Add the toolbar and editable zone to the page.
textarea.get('parentNode').insert(wrapper, textarea);
atto.setStyle('color', textarea.getStyle('color'));
atto.setStyle('lineHeight', textarea.getStyle('lineHeight'));
atto.setStyle('fontSize', textarea.getStyle('fontSize'));

View File

@ -13,15 +13,34 @@
// You should have received a copy of the GNU General Public License
// along with Moodle. If not, see <http://www.gnu.org/licenses/>.
/**
* Atto editor.
*
* @package editor_atto
* @copyright 2013 Damyon Wiese <damyon@moodle.com>
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
/**
* Classes constants.
*/
CSS = {
CONTENT: 'editor_atto_content',
CONTENTWRAPPER: 'editor_atto_content_wrap',
TOOLBAR: 'editor_atto_toolbar',
WRAPPER: 'editor_atto'
};
/**
* Atto editor main class.
* Common functions required by editor plugins.
*
* @package editor-atto
* @package editor_atto
* @copyright 2013 Damyon Wiese <damyon@moodle.com>
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
M.editor_atto = M.editor_atto || {
/**
* List of attached button handlers to prevent duplicates.
*/
@ -307,12 +326,22 @@ M.editor_atto = M.editor_atto || {
*/
init : function(params) {
var textarea = Y.one('#' +params.elementid);
var wrapper = Y.Node.create('<div class="' + CSS.WRAPPER + '" />');
var atto = Y.Node.create('<div id="' + params.elementid + 'editable" ' +
'contenteditable="true" ' +
'spellcheck="true" ' +
'class="editor_atto"/>');
'class="' + CSS.CONTENT + '" />');
var cssfont = '';
var toolbar = Y.Node.create('<div class="editor_atto_toolbar" id="' + params.elementid + '_toolbar" role="toolbar"/>');
var toolbar = Y.Node.create('<div class="' + CSS.TOOLBAR + '" id="' + params.elementid + '_toolbar" role="toolbar"/>');
// Editable content wrapper.
var content = Y.Node.create('<div class="' + CSS.CONTENTWRAPPER + '" />');
content.appendChild(atto);
// Add everything to the wrapper.
wrapper.appendChild(toolbar);
wrapper.appendChild(content);
// Bleh - why are we sent a url and not the css to apply directly?
var css = Y.io(params.content_css, { sync: true });
@ -326,10 +355,8 @@ M.editor_atto = M.editor_atto || {
// Copy text to editable div.
atto.append(textarea.get('value'));
// Add the toolbar to the page.
textarea.get('parentNode').insert(toolbar, textarea);
// Add the editable div to the page.
textarea.get('parentNode').insert(atto, textarea);
// Add the toolbar and editable zone to the page.
textarea.get('parentNode').insert(wrapper, textarea);
atto.setStyle('color', textarea.getStyle('color'));
atto.setStyle('lineHeight', textarea.getStyle('lineHeight'));
atto.setStyle('fontSize', textarea.getStyle('fontSize'));