TPS
/
ORIENT
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add custom toolbar button support 

Style toolbar
Refs #2005
This commit is contained in:
Samuel Georges 2016-05-20 04:35:40 +10:00
parent a6ac4f50ce
commit d02a922868
13 changed files with 850 additions and 2394 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
modules/backend/ServiceProvider.php
View File

@ -67,11 +67,17 @@ class ServiceProvider extends ModuleServiceProvider
$combiner->registerBundle('~/modules/backend/assets/less/october.less');
$combiner->registerBundle('~/modules/backend/assets/js/october.js');
$combiner->registerBundle('~/modules/backend/widgets/table/assets/js/build.js');
$combiner->registerBundle('~/modules/backend/formwidgets/richeditor/assets/less/richeditor.less');
$combiner->registerBundle('~/modules/backend/formwidgets/richeditor/assets/js/build.js');
$combiner->registerBundle('~/modules/backend/formwidgets/codeeditor/assets/less/codeeditor.less');
$combiner->registerBundle('~/modules/backend/formwidgets/codeeditor/assets/js/build.js');
$combiner->registerBundle('~/modules/backend/formwidgets/fileupload/assets/less/fileupload.less');
/*
* Rich Editor is protected by DRM
*/
if (file_exists(base_path('modules/backend/formwidgets/richeditor/assets/vendor/froala_drm'))) {
$combiner->registerBundle('~/modules/backend/formwidgets/richeditor/assets/less/richeditor.less');
$combiner->registerBundle('~/modules/backend/formwidgets/richeditor/assets/js/build.js');
}
});
}

25
modules/backend/formwidgets/RichEditor.php
View File

@ -24,6 +24,11 @@ class RichEditor extends FormWidgetBase
*/
public $fullPage = false;
/**
* @var boolean Determines whether content has HEAD and HTML tags.
*/
public $toolbarButtons = null;
//
// Object properties
//
@ -40,6 +45,7 @@ class RichEditor extends FormWidgetBase
{
$this->fillFromConfig([
'fullPage',
'toolbarButtons',
]);
}
@ -57,12 +63,31 @@ class RichEditor extends FormWidgetBase
*/
public function prepareVars()
{
$this->vars['field'] = $this->formField;
$this->vars['editorLang'] = $this->getValidEditorLang();
$this->vars['fullPage'] = $this->fullPage;
$this->vars['stretch'] = $this->formField->stretch;
$this->vars['size'] = $this->formField->size;
$this->vars['name'] = $this->formField->getName();
$this->vars['value'] = $this->getLoadValue();
$this->vars['toolbarButtons'] = $this->evalToolbarButtons();
}
/**
* Determine the toolbar buttons to use based on config.
* @return string
*/
protected function evalToolbarButtons()
{
$buttons = $this->toolbarButtons;
if (is_string($buttons)) {
$buttons = array_map(function($button) {
return strlen($button) ? $button : '|';
}, explode('|', $buttons));
}
return $buttons;
}
/**

657
modules/backend/formwidgets/richeditor/assets/css/richeditor.css
View File

File diff suppressed because one or more lines are too long

2256
modules/backend/formwidgets/richeditor/assets/js/build-min.js vendored
View File

File diff suppressed because one or more lines are too long

34
modules/backend/formwidgets/richeditor/assets/js/build.js
View File

@ -7,10 +7,36 @@
* @see build-min.js
*
=require ../vendor/froala/js/froala_editor.min.js
=require ../vendor/froala/js/plugins/fullscreen.min.js
=require ../vendor/froala/js/plugins/code_beautifier.min.js
=require ../vendor/froala_drm/js/plugins/code_view.js
=require ../vendor/froala_drm/js/froala_editor.min.js
// Buttons
=require ../vendor/froala_drm/js/plugins/paragraph_style.min.js
=require ../vendor/froala_drm/js/plugins/fullscreen_soft.js
=require ../vendor/froala_drm/js/plugins/code_view_ace.js
=require ../vendor/froala_drm/js/plugins/paragraph_format.min.js
=require ../vendor/froala_drm/js/plugins/align.min.js
=require ../vendor/froala_drm/js/plugins/lists.min.js
=require ../vendor/froala_drm/js/plugins/file.min.js
=require ../vendor/froala_drm/js/plugins/image.min.js
// Cannot be minified twice
=require ../vendor/froala_drm/js/plugins/link.js
=require ../vendor/froala_drm/js/plugins/table.min.js
=require ../vendor/froala_drm/js/plugins/video.min.js
=require ../vendor/froala_drm/js/plugins/quote.min.js
=require ../vendor/froala_drm/js/plugins/font_size.min.js
=require ../vendor/froala_drm/js/plugins/font_family.min.js
=require ../vendor/froala_drm/js/plugins/emoticons.min.js
=require ../vendor/froala_drm/js/plugins/colors.min.js
// Functional
=require ../vendor/froala_drm/js/plugins/url.min.js
=require ../vendor/froala_drm/js/plugins/line_breaker.min.js
=require ../vendor/froala_drm/js/plugins/entities.min.js
=require ../vendor/froala_drm/js/plugins/draggable.min.js
=require ../vendor/froala_drm/js/plugins/code_beautifier.min.js
=require richeditor.js
*/

75
modules/backend/formwidgets/richeditor/assets/js/richeditor.js
View File

@ -39,7 +39,8 @@
linksHandler: null,
stylesheet: null,
fullpage: false,
editorLang: 'en'
editorLang: 'en',
toolbarButtons: null
}
RichEditor.prototype.init = function() {
@ -55,46 +56,39 @@
}
/*
* Initialize Redactor editor
* Initialize Froala editor
*/
this.initFroala()
}
RichEditor.prototype.initFroala = function() {
var froalaOptions = {
editorClass: 'control-richeditor',
height: Infinity // Height set via CSS, enable the scrollbars
editorClass: 'control-richeditor'
}
froalaOptions.toolbarButtons = [
'fullscreen',
'bold',
'italic',
'underline',
'strikeThrough',
'subscript',
'superscript',
'fontFamily',
'fontSize',
'color',
'emoticons',
'inlineStyle',
'paragraphStyle',
'paragraphFormat',
'align',
'formatOL',
'formatUL',
'outdent',
'indent',
'quote',
'insertHR',
'insertLink',
'insertImage',
'insertVideo',
'insertFile',
'insertTable',
'undo',
'redo',
'clearFormatting',
'selectAll',
'html'
]
if (this.options.toolbarButtons) {
froalaOptions.toolbarButtons = this.options.toolbarButtons.split(',')
}
else {
froalaOptions.toolbarButtons = [
'paragraphFormat',
'paragraphStyle',
'quote',
'bold',
'italic',
'align',
'formatOL',
'formatUL',
'insertTable',
'insertLink',
'insertImage',
'insertVideo',
'insertFile',
'insertHR',
'fullscreen',
'html'
]
}
froalaOptions.toolbarButtonsMD = froalaOptions.toolbarButtons
froalaOptions.toolbarButtonsSM = froalaOptions.toolbarButtons
@ -102,6 +96,13 @@
froalaOptions.htmlAllowedEmptyTags = ['figure', 'textarea', 'a', 'iframe', 'object', 'video', 'style', 'script']
froalaOptions.htmlDoNotWrapTags = ['figure', 'script', 'style']
var placeholder = this.$textarea.attr('placeholder')
froalaOptions.placeholderText = placeholder ? placeholder : ''
froalaOptions.height = this.$el.hasClass('stretch')
? Infinity
: $('.height-indicator', this.$el).height()
$.FroalaEditor.ICON_TEMPLATES = {
font_awesome: '<i class="icon-[NAME]"></i>',
text: '<span style="text-align: center;">[NAME]</span>',

79
modules/backend/formwidgets/richeditor/assets/less/_froala.less Normal file
View File

@ -0,0 +1,79 @@
//
// Mods to Froala Editor
//
//
// Wrapper
//
.fr-box.fr-basic.fr-top .fr-wrapper,
.fr-box.fr-basic.fr-bottom .fr-wrapper {
.box-shadow(none);
}
//
// Code mode
//
.fr-box {
.ace_editor {
display: none;
}
.ace_editor {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0;
}
&.fr-code-view .ace_editor {
display: block;
}
}
//
// Full screen
//
.fr-command.fr-btn[data-cmd=fullscreen] {
float: right;
}
//
// Toolbar
//
.fr-toolbar {
border-top-color: transparent;
}
.fr-popup.fr-desktop,
.fr-toolbar.fr-inline.fr-desktop {
.fr-arrow {
top: -@arrow-size;
}
&.fr-above {
.fr-arrow {
bottom: -@arrow-size;
}
}
}
// Command button.
.fr-toolbar, .fr-popup {
.fr-command.fr-btn {
// Dropdown is visible.
&.fr-dropdown.fr-active {
color: @btn-active-text;
}
}
}
.fr-toolbar.fr-bottom,
.fr-toolbar.fr-top {
.box-shadow(none);
border-bottom: 2px solid @color-list-border !important;
}

60
modules/backend/formwidgets/richeditor/assets/less/richeditor.less
View File

@ -10,10 +10,41 @@
@color-richeditor-toolbar-btn-bg-active: #404040;
@color-richeditor-toolbar-btn-color-hover: #ffffff;
@import "../vendor/froala_drm/less/froala.less";
@import "../vendor/froala_drm/less/style.less";
// Buttons
@import "../vendor/froala_drm/less/plugins/fullscreen.less";
@import "../vendor/froala_drm/less/plugins/code_view.less";
@import "../vendor/froala/css/froala_editor.min.css";
@import "../vendor/froala/css/froala_style.min.css";
@import "../vendor/froala/css/plugins/fullscreen.css";
@import "../vendor/froala_drm/less/plugins/file.less";
@import "../vendor/froala_drm/less/plugins/image.less";
@import "../vendor/froala_drm/less/plugins/table.less";
@import "../vendor/froala_drm/less/plugins/video.less";
@import "../vendor/froala_drm/less/plugins/colors.less";
@import "../vendor/froala_drm/less/plugins/emoticons.less";
// Functional
@import "../vendor/froala_drm/less/plugins/line_breaker.less";
@import "../vendor/froala_drm/less/plugins/draggable.less";
// Modifications
@import "_froala.less";
@font-family: @font-family-sans-serif;
@border-radius: @input-border-radius;
@tooltip-bg: #34495e; // Taken from toolbar.variables.less
@tooltip-font-size: @font-size-small;
@arrow-size: 7px;
@ui-border-color: @input-border-color;
@ui-border-top: 1px solid @ui-border-color;
@editor-padding: 20px;
@btn-text: rgba(0,0,0,.5);
@btn-active-text: #222;
//
// Rich Editor
//
.field-flush .field-richeditor {
&, &.editor-focus {
@ -28,10 +59,17 @@
min-height: @size;
}
}
.height-indicator {
height: @size;
display: none;
}
}
.field-richeditor {
border: 1px solid @color-form-field-border;
border: 1px solid @input-border;
.box-shadow(@input-box-shadow);
.border-radius(@input-border-radius);
.transition(@input-transition);
&.editor-focus {
@ -45,14 +83,6 @@
&.size-giant { .richeditor-set-height(@size-giant); }
}
//
// Overrides
//
.fr-toolbar {
border-top: none;
}
//
// Stretch
//
@ -68,6 +98,7 @@
.fr-toolbar {
.border-radius(0) !important;
border-top-color: white;
}
.fr-wrapper {
@ -77,12 +108,13 @@
bottom: 0;
position: absolute;
height: auto !important;
padding: 20px;
.fr-view {
min-height: 0;
}
}
.fr-view, textarea {
height: 100%;
padding: 0;
}
.fr-placeholder {

1
modules/backend/formwidgets/richeditor/assets/vendor/.gitignore vendored
View File

@ -1,2 +1 @@
/froala_drm
/froala

3
modules/backend/formwidgets/richeditor/partials/_richeditor.htm
View File

@ -7,8 +7,11 @@
class="field-richeditor size-<?= $size ?> <?= $stretch?'layout-relative stretch':'' ?>"
<?php if ($editorLang): ?>data-editor-lang="<?= $editorLang ?>"<?php endif ?>
<?php if ($fullPage): ?>data-fullpage="true"<?php endif ?>
<?php if ($toolbarButtons): ?>data-toolbar-buttons="<?= implode(',', $toolbarButtons) ?>"<?php endif ?>
data-links-handler="<?= $this->getEventHandler('onGetPageLinks') ?>"
placeholder="<?= e(trans($field->placeholder)) ?>"
data-control="richeditor">
<textarea name="<?= $name ?>" id="<?= $this->getId('textarea') ?>"><?= e($value) ?></textarea>
<div class="height-indicator"></div>
</div>
<?php endif ?>

23
modules/system/assets/ui/less/popup.variables.less Normal file
View File

@ -0,0 +1,23 @@
//
// Popup
// --------------------------------------------------
@color-popup-header-bg: transparent;
@color-popup-header-text: #2A3E51;
@color-popup-footer-bg: transparent;
@color-popup-content-bg: #f9f9f9;
@popup-box-shadow: ~"0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22)";
@modal-inner-padding: @padding-standard;
@modal-title-padding: @padding-standard;
@modal-title-line-height: @line-height-base;
@modal-content-border-color: rgba(0,0,0,.2);
@modal-content-fallback-border-color: #999;
@modal-backdrop-bg: @overlay-background;
@modal-backdrop-opacity: .5;
@modal-header-border-color: #e5e5e5;
@modal-footer-border-color: @modal-header-border-color;
@modal-lg: 900px;
@modal-md: 600px;
@modal-sm: 300px;

10
modules/system/assets/ui/less/toolbar.variables.less Normal file
View File

@ -0,0 +1,10 @@
//
// Toolbars
// --------------------------------------------------
@color-scroll-indicator: #bbbbbb;
@color-toolbar-editor-bg: #dddddd;
@color-toolbar-editor-btn-color: #404040;
@color-toolbar-editor-btn-bg-hover: #999999;
@color-toolbar-editor-btn-bg-active: #404040;
@color-toolbar-editor-btn-color-hover: #ffffff;

11
modules/system/assets/ui/less/tooltip.variables.less Normal file
View File

@ -0,0 +1,11 @@
//
// Tooltips
// --------------------------------------------------
@tooltip-max-width: 200px;
@tooltip-color: #fff;
@tooltip-bg: #34495e;
@tooltip-opacity: .9;
@tooltip-arrow-width: 5px;
@tooltip-arrow-color: @tooltip-bg;