mirror of
https://github.com/moodle/moodle.git
synced 2025-03-14 04:30:15 +01:00
MDL-41912 editor_atto: Padding for editable area
This commit is contained in:
parent
65a4f26d8a
commit
a72a759303
@ -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;
|
||||
}
|
||||
|
||||
|
@ -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
@ -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'));
|
||||
|
41
lib/editor/atto/yui/src/editor/js/editor.js
vendored
41
lib/editor/atto/yui/src/editor/js/editor.js
vendored
@ -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'));
|
||||
|
Loading…
x
Reference in New Issue
Block a user