Browse Source

Fix CKEditor styles when creating HTML documents or single blocks - refs BT#14381

* `editor.css`         file deprecated.
* `editor_content.css` contains the base for the created content with CKEditor (blocks or documents).
                       It's loaded internally by CKEditor to show the Styles select.
                       It's loaded globally by Chamilo in template.lib.php to apply its styles to the HTML blocks created with CKEditor.
* `document.css`       is only used in the head from the created HTML document.
                       Include the `editor_content.css` file by importing internally.
Angel Fernando Quiroz Campos 6 years ago
parent
commit
bb760de133

+ 36 - 0
app/Resources/public/css/document.css

@@ -0,0 +1,36 @@
+/*
+Stylesheet for HTML documents created with CKEditor.
+
+This stylesheet must import editor_content.css file
+*/
+@import url(./editor_content.css);
+
+body {
+    color: #666;
+    font-family: 'Open Sans', sans-serif;
+    line-height: 30px;
+    padding: 1em;
+}
+
+blockquote {
+    background: #f9f9f9;
+    border-left: 8px solid #ccc;
+    font: 14px/20px italic Times, serif;
+    margin: 1.5em 10px;
+    padding: 0.5em 10px;
+    quotes: "\201C" "\201D" "\2018" "\2019";
+    display: inline-block;
+}
+
+blockquote:before {
+    color: #ccc;
+    content: open-quote;
+    font-size: 4em;
+    line-height: 0.1em;
+    margin-right: 0.25em;
+    vertical-align: -0.4em;
+}
+
+blockquote p {
+    display: inline;
+}

+ 2 - 0
app/Resources/public/css/editor.css

@@ -1,4 +1,6 @@
 /*
+    Deprecated stylesheet. Use document.css.
+
     Theme Name: Frame Scorm
     URI Project: http://www.chamilo.org
     Description: Styles main base of Chamilo LMS appearance, works with Bootstrap 3.0.x

+ 205 - 0
app/Resources/public/css/editor_content.css

@@ -0,0 +1,205 @@
+/*
+Stylesheet for HTML blocks created with CKEditor to embed in Chamilo pages.
+*/
+
+@font-face {
+    font-family: 'Open Sans';
+    font-style: normal;
+    font-weight: 300;
+    src: local('Open Sans Light'), local('OpenSans-Light'), url(themes/chamilo/fonts/OpenSans-Light.woff2) format('woff2'), url(themes/chamilo/fonts/OpenSans-Light.woff) format('woff');
+}
+
+@font-face {
+    font-family: 'Open Sans';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Open Sans'), local('OpenSans'), url(themes/chamilo/fonts/OpenSans.woff2) format('woff2'), url(themes/chamilo/fonts/OpenSans.woff) format('woff');
+}
+
+@font-face {
+    font-family: 'Open Sans';
+    font-style: normal;
+    font-weight: 600;
+    src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(themes/chamilo/fonts/OpenSans-Semibold.woff2) format('woff2'), url(themes/chamilo/fonts/OpenSans-Semibold.woff) format('woff');
+}
+
+@font-face {
+    font-family: 'Open Sans';
+    font-style: normal;
+    font-weight: 700;
+    src: local('Open Sans Bold'), local('OpenSans-Bold'), url(themes/chamilo/fonts/OpenSans-Bold.woff2) format('woff2'), url(themes/chamilo/fonts/OpenSans-Bold.woff) format('woff');
+}
+
+body {
+    font-family: 'Open Sans', sans-serif;
+}
+
+/* Hack for show Bootstrap alerts in CKEditor' style select */
+.cke_panel_listItem a > * {
+    margin-bottom: 0;
+}
+
+.ck {
+    display: block;
+    font-style: normal;
+    font-weight: normal;
+    line-height: 1;
+    font-size-adjust: none;
+    font-stretch: normal;
+    font-feature-settings: normal;
+    font-language-override: normal;
+    font-kerning: auto;
+    font-synthesis: weight style;
+    font-variant: normal;
+}
+
+.ck-article {
+    text-transform: uppercase;
+    color: #E95839;
+    font-weight: bold;
+    background: url(../../main/img/document/border-title.png) repeat-x 0 80%;
+    padding-bottom: 2%;
+    margin-bottom: 10px;
+}
+
+.ck-article:before {
+    content: "\f15c";
+    margin-right: 5px;
+    font-family: FontAwesome;
+    font-weight: normal;
+}
+
+.ck-paragraph-box {
+    background-color: #F5EEE2;
+    padding: 2% 3%;
+    line-height: 20px;
+}
+
+.ck-title {
+    display: block;
+    font-weight: bold;
+    color: #000;
+}
+
+.ck-title2 {
+    padding-top: 0;
+    margin-top: 0;
+    font-weight: 500;
+    position: relative;
+    color: #000;
+}
+
+.ck-title2:after {
+    background-color: #E95839;
+    margin: 10px 0px 0px;
+    width: 50px;
+    height: 2px;
+    display: block;
+    content: "";
+
+}
+
+.ck-stand-out {
+    background-color: yellow;
+}
+
+.ck-style1 {
+    height: 6px;
+    background: url(../../main/img/document/hr-1.png) repeat-x 0 0;
+    border: 0;
+}
+
+.ck-style2 {
+    height: 6px;
+    background: url(../../main/img/document/hr-2.png) repeat-x 0 0;
+    border: 0;
+}
+
+.ck-style3 {
+    border-top: 1px dashed #8c8b8b;
+}
+
+.ck-style3:after {
+    content: '\002702';
+    display: inline-block;
+    position: relative;
+    top: -12px;
+    left: 40px;
+    padding: 0 3px;
+    background: #FFF;
+    color: #8c8b8b;
+    font-size: 18px;
+}
+
+.img-va-baseline {
+    vertical-align: baseline;
+}
+
+.img-va-top {
+    vertical-align: top;
+}
+
+.img-va-bottom {
+    vertical-align: bottom;
+}
+
+.img-va-middle {
+    vertical-align: middle;
+}
+
+.img-va-super {
+    vertical-align: super;
+}
+
+.img-va-sub {
+    vertical-align: sub;
+}
+
+.img-va-text-top {
+    vertical-align: text-top;
+}
+
+.img-va-text-bottom {
+    vertical-align: text-bottom;
+}
+
+figure.image {
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    display: inline-block;
+    margin-bottom: 1em;
+    padding: 5px;
+}
+
+.cke_widget_image.pull-right,
+img.pull-right,
+figure.image.pull-right {
+    margin-left: 1em;
+}
+
+.cke_widget_image.pull-left,
+img.pull-left,
+figure.image.pull-left {
+    margin-right: 1em;
+}
+
+.text-center .img-responsive {
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.cke_widget_image.pull-left figure.image,
+.cke_widget_image.pull-right figure.image,
+figure.image.pull-left,
+figure.image.pull-right {
+    display: block;
+}
+
+figure.image figcaption {
+    text-align: left;
+    background-color: #f3f3f3;
+    padding-top: 0px;
+    margin: 0px;
+    border-radius: 0px;
+    padding-left: 5px;
+}

+ 2 - 2
main/document/document.php

@@ -744,8 +744,8 @@ if (isset($_GET['curdirpath']) && $_GET['curdirpath'] == '/certificates' &&
 
         // Remove media=screen to be available when printing a document
         $new_content_html = str_replace(
-            api_get_path(WEB_CSS_PATH).'editor.css" media="screen"',
-            api_get_path(WEB_CSS_PATH).'editor.css" ',
+            ' media="screen"',
+            '',
             $new_content_html
         );
 

+ 2 - 2
main/inc/lib/certificate.lib.php

@@ -645,8 +645,8 @@ class Certificate extends Model
 
             // Remove media=screen to be available when printing a document
             $certificateContent = str_replace(
-                api_get_path(WEB_CSS_PATH).'editor.css" media="screen"',
-                api_get_path(WEB_CSS_PATH).'editor.css" ',
+                ' media="screen"',
+                '',
                 $certificateContent
             );
 

+ 1 - 1
main/inc/lib/formvalidator/FormValidator.class.php

@@ -950,7 +950,7 @@ EOT;
         $config['style'] = false;
         if ($fullPage) {
             $config['fullPage'] = true;
-            // Adds editor.css in ckEditor
+            // Adds editor_content.css in ckEditor
             $config['style'] = true;
         }
 

+ 14 - 1
main/inc/lib/javascript/ckeditor/config_js.php

@@ -1,6 +1,8 @@
 <?php
 /* For licensing terms, see /license.txt */
 
+use Chamilo\CoreBundle\Component\Utils\ChamiloApi;
+
 require_once __DIR__.'/../../../global.inc.php';
 
 $moreButtonsInMaximizedMode = false;
@@ -9,7 +11,18 @@ if (api_get_setting('more_buttons_maximized_mode') === 'true') {
 }
 
 $template = new Template();
-$template->setStyleMenuInCkEditor();
+$template->assign(
+    'bootstrap_css',
+    api_get_path(WEB_PUBLIC_PATH).'assets/bootstrap/dist/css/bootstrap.min.css'
+);
+$template->assign(
+    'font_awesome_css',
+    api_get_path(WEB_PUBLIC_PATH).'assets/fontawesome/css/font-awesome.min.css'
+);
+$template->assign(
+    'css_editor',
+    ChamiloApi::getEditorBlockStylePath()
+);
 $template->assign('moreButtonsInMaximizedMode', $moreButtonsInMaximizedMode);
 $courseId = api_get_course_int_id();
 $courseCondition = '';

+ 2 - 15
main/inc/lib/template.lib.php

@@ -1,6 +1,7 @@
 <?php
 /* For licensing terms, see /license.txt */
 
+use Chamilo\CoreBundle\Component\Utils\ChamiloApi;
 use Chamilo\CoreBundle\Entity\SessionRelCourseRelUser;
 use Chamilo\UserBundle\Entity\User;
 
@@ -643,21 +644,6 @@ class Template
         $this->assign('video_features', $defaultFeatures);
     }
 
-    /**
-     * Sets the "styles" menu in ckEditor.
-     *
-     * Reads css/themes/xxx/editor.css if exists and shows it in the menu, otherwise it
-     * will take the default web/editor.css file
-     */
-    public function setStyleMenuInCkEditor()
-    {
-        $cssEditor = api_get_cdn_path(api_get_path(WEB_CSS_PATH).'editor.css');
-        if (is_file(api_get_path(SYS_CSS_PATH).$this->themeDir.'editor.css')) {
-            $cssEditor = api_get_path(WEB_CSS_PATH).$this->themeDir.'editor.css';
-        }
-        $this->assign('css_editor', $cssEditor);
-    }
-
     /**
      * Prepare custom CSS to be added at the very end of the <head> section.
      *
@@ -677,6 +663,7 @@ class Template
         }
 
         $css[] = api_get_cdn_path(api_get_path(WEB_CSS_PATH).$this->themeDir.'default.css');
+        $css[] = api_get_cdn_path(ChamiloApi::getEditorBlockStylePath());
 
         $css_file_to_string = null;
         foreach ($css as $file) {

+ 9 - 6
main/template/default/javascript/editor/ckeditor/config_js.tpl

@@ -32,22 +32,22 @@ CKEDITOR.editorConfig = function (config) {
         },
         {
             name : 'Alert Success',
-            element : 'p',
+            element : 'div',
             attributes : { 'class': 'alert alert-success' }
         },
         {
             name : 'Alert Info',
-            element : 'p',
+            element : 'div',
             attributes : { 'class': 'alert alert-info' }
         },
         {
             name : 'Alert Warning',
-            element : 'p',
+            element : 'div',
             attributes : { 'class': 'alert alert-warning' }
         },
         {
             name : 'Alert Danger',
-            element : 'p',
+            element : 'div',
             attributes : { 'class': 'alert alert-danger' }
         },
         {
@@ -109,8 +109,11 @@ CKEDITOR.editorConfig = function (config) {
     // Allows to use "class" attribute inside divs and spans.
     config.allowedContent = true;
     // Option to set the "styles" menu
-    config.contentsCss = '{{ css_editor }}';
-    config.customConfig = '{{ _p.web_main ~ 'inc/lib/javascript/ckeditor/config_js.php'}}';
+    config.contentsCss = [
+        '{{ bootstrap_css }}',
+        '{{ font_awesome_css }}',
+        '{{ css_editor }}',
+    ];
 };
 
 // Sets default target to "_blank" in link plugin

+ 1 - 1
plugin/customcertificate/src/print_certificate.php

@@ -109,7 +109,7 @@ $htmlText .= '
 $htmlText .= '
     <link rel="stylesheet"
         type="text/css"
-        href="'.api_get_path(WEB_CSS_PATH).'editor.css">';
+        href="'.api_get_path(WEB_CSS_PATH).'document.css">';
 $htmlText .= '<body>';
 foreach ($userList as $userInfo) {
     $studentId = $userInfo['user_id'];

+ 4 - 7
src/Chamilo/CoreBundle/Component/Editor/CkEditor/CkEditor.php

@@ -4,6 +4,7 @@
 namespace Chamilo\CoreBundle\Component\Editor\CkEditor;
 
 use Chamilo\CoreBundle\Component\Editor\Editor;
+use Chamilo\CoreBundle\Component\Utils\ChamiloApi;
 
 //use Symfony\Component\Routing\Generator\UrlGenerator;
 
@@ -55,13 +56,9 @@ class CkEditor extends Editor
     {
         $style = '';
         if (trim($this->value) == '<html><head><title></title></head><body></body></html>' || $this->value == '') {
-            $cssFile = api_get_path(SYS_CSS_PATH).'themes/'.api_get_visual_theme().'/editor.css';
-            if (!is_file($cssFile)) {
-                $cssFile = api_get_path(WEB_CSS_PATH).'editor.css';
-            } else {
-                $cssFile = api_get_path(WEB_CSS_PATH).'themes/'.api_get_visual_theme().'/editor.css';
-            }
-            $style = '<link href="'.$cssFile.'" rel="stylesheet" type="text/css" />';
+            $style = api_get_css_asset('bootstrap/dist/css/bootstrap.min.css')
+                .api_get_css_asset('fontawesome/css/font-awesome.min.css')
+                .api_get_css(ChamiloApi::getEditorDocStylePath());
         }
 
         $html = '<textarea id="'.$this->getName().'" name="'.$this->getName().'" class="ckeditor">

+ 36 - 0
src/Chamilo/CoreBundle/Component/Utils/ChamiloApi.php

@@ -253,4 +253,40 @@ class ChamiloApi
 
         return $prefix.$text;
     }
+
+    /**
+     * Get the stylesheet path for HTML documents created with CKEditor
+     *
+     * @return string
+     */
+    public static function getEditorDocStylePath()
+    {
+        $visualTheme = api_get_visual_theme();
+
+        $cssFile = api_get_path(SYS_CSS_PATH)."themes/$visualTheme/document.css";
+
+        if (is_file($cssFile)) {
+            return api_get_path(WEB_CSS_PATH)."themes/$visualTheme/document.css";
+        }
+
+        return api_get_path(WEB_CSS_PATH).'document.css';
+    }
+
+    /**
+     * Get the stylesheet path for HTML blocks created with CKEditor
+     *
+     * @return string
+     */
+    public static function getEditorBlockStylePath()
+    {
+        $visualTheme = api_get_visual_theme();
+
+        $cssFile = api_get_path(SYS_CSS_PATH)."themes/$visualTheme/editor_content.css";
+
+        if (is_file($cssFile)) {
+            return api_get_path(WEB_CSS_PATH)."themes/$visualTheme/editor_content.css";
+        }
+
+        return api_get_path(WEB_CSS_PATH).'editor_content.css';
+    }
 }

+ 10 - 1
src/Chamilo/CoreBundle/Composer/ScriptHandler.php

@@ -203,7 +203,16 @@ class ScriptHandler
     {
         $appCss = __DIR__.'/../../../../app/Resources/public/css/';
         $newPath = __DIR__.'/../../../../web/css/';
-        $cssFiles = ['base.css', 'chat.css', 'editor.css', 'markdown.css', 'print.css', 'responsive.css', 'scorm.css'];
+        $cssFiles = [
+            'base.css',
+            'chat.css',
+            'document.css',
+            'editor_content.css',
+            'markdown.css',
+            'print.css',
+            'responsive.css',
+            'scorm.css',
+        ];
 
         $fs = new Filesystem();