New structure for the ckeditor dependencies see #5875
The new structure allows the use of other editors such as TinyMce, that plays well with elfinder. The dependencies were moved inside ChamiloLMS/Component/Editor classes. Now the editor is used as a service. The problem with ckeditor is that, it does not works properly in smartphones/tablets event with the latest version 4.3.1.10.x
Julio Montoya
13 years ago
parent
06e081dbc5
commit
9bf39ae027
@ -0,0 +1,41 @@ |
||||
{% extends app.template_style ~ "/layout/no_layout.tpl" %} |
||||
|
||||
{% block body %} |
||||
<!-- elFinder CSS (REQUIRED) --> |
||||
<link rel="stylesheet" type="text/css" media="screen" href="{{ _p.web_lib }}elfinder/css/elfinder.min.css"> |
||||
<link rel="stylesheet" type="text/css" media="screen" href="{{ _p.web_lib }}elfinder/css/theme.css"> |
||||
|
||||
<!-- elFinder JS (REQUIRED) --> |
||||
<script type="text/javascript" src="{{ _p.web_lib }}elfinder/js/elfinder.min.js"></script> |
||||
|
||||
<!-- elFinder translation (OPTIONAL) --> |
||||
<script type="text/javascript" src="{{ _p.web_lib }}elfinder/js/i18n/elfinder.ru.js"></script> |
||||
|
||||
<script type="text/javascript"> |
||||
|
||||
var FileBrowserDialogue = { |
||||
init: function() { |
||||
// Here goes your code for setting your custom things onLoad. |
||||
}, |
||||
mySubmit: function (URL) { |
||||
// pass selected file path to TinyMCE |
||||
top.tinymce.activeEditor.windowManager.getParams().setUrl(URL); |
||||
|
||||
// close popup window |
||||
top.tinymce.activeEditor.windowManager.close(); |
||||
} |
||||
} |
||||
|
||||
$().ready(function() { |
||||
var elf = $('#elfinder').elfinder({ |
||||
// set your elFinder options here |
||||
url : '{{ url('editor_connector') }}', // connector URL (REQUIRED) |
||||
getFileCallback: function(file) { // editor callback |
||||
// actually file.url - doesnt work for me, but file does. (elfinder 2.0-rc1) |
||||
FileBrowserDialogue.mySubmit(file); // pass selected file path to TinyMCE |
||||
} |
||||
}).elfinder('instance'); |
||||
}); |
||||
</script> |
||||
<div id="elfinder"></div> |
||||
{% endblock %} |
||||
@ -1 +0,0 @@ |
||||
{% extends app.template_style ~ "/../default/javascript/elfinder.tpl" %} |
||||
@ -1,54 +0,0 @@ |
||||
<?php |
||||
/* For licensing terms, see /license.txt */ |
||||
namespace ChamiloLMS\Component\CkEditor; |
||||
|
||||
class CkEditor extends Editor |
||||
{ |
||||
|
||||
/** |
||||
* @param string $name |
||||
* @param \Symfony\Component\Translation\Translator $translator |
||||
*/ |
||||
public function __construct($name, \Symfony\Component\Translation\Translator $translator) |
||||
{ |
||||
$this->name = $name; |
||||
$this->toolbarSet = 'Basic'; |
||||
$this->value = ''; |
||||
$this->config = array(); |
||||
$this->setConfigAttribute('width', '100%'); |
||||
$this->setConfigAttribute('height', '200'); |
||||
$this->setConfigAttribute('fullPage', false); |
||||
$this->translator = $translator; |
||||
} |
||||
|
||||
/** |
||||
* Return the HTML code required to run editor. |
||||
* |
||||
* @return string |
||||
*/ |
||||
public function createHtml() |
||||
{ |
||||
$Html = '<textarea id="'.$this->name.'" name="'.$this->name.'" class="ckeditor" >'.$this->value.'</textarea>'; |
||||
$Html .= $this->editorReplace(); |
||||
|
||||
return $Html; |
||||
} |
||||
|
||||
/** |
||||
* @return string |
||||
*/ |
||||
public function editorReplace() |
||||
{ |
||||
$toolbar = new Toolbar\Basic($this->toolbarSet); |
||||
$toolbar->setLanguage($this->translator->getLocale()); |
||||
$config = $toolbar->getConfig(); |
||||
$javascript = $this->toJavascript($config); |
||||
$html = "<script> |
||||
CKEDITOR.replace('".$this->name."', |
||||
$javascript |
||||
); |
||||
</script>"; |
||||
|
||||
return $html; |
||||
} |
||||
} |
||||
@ -0,0 +1,62 @@ |
||||
<?php |
||||
/* For licensing terms, see /license.txt */ |
||||
namespace ChamiloLMS\Component\Editor\CkEditor; |
||||
|
||||
use ChamiloLMS\Component\Editor\Editor; |
||||
use ChamiloLMS\Component\Editor\Toolbar; |
||||
|
||||
/** |
||||
* Class CkEditor |
||||
* @package ChamiloLMS\Component\Editor\CkEditor |
||||
*/ |
||||
class CkEditor extends Editor |
||||
{ |
||||
|
||||
/** |
||||
* @return string |
||||
*/ |
||||
public function getTemplate() |
||||
{ |
||||
return 'javascript/editor/ckeditor/elfinder.tpl'; |
||||
} |
||||
|
||||
/** |
||||
* @param array $files |
||||
*/ |
||||
public function getJavascriptToInclude(& $files) |
||||
{ |
||||
$jsFolder = api_get_path(WEB_LIBRARY_PATH).'javascript/'; |
||||
$files[] = $jsFolder.'ckeditor/ckeditor.js'; |
||||
} |
||||
|
||||
/** |
||||
* Return the HTML code required to run editor. |
||||
* |
||||
* @return string |
||||
*/ |
||||
public function createHtml() |
||||
{ |
||||
$html = '<textarea id="'.$this->getName().'" name="'.$this->getName().'" class="ckeditor" >'.$this->value.'</textarea>'; |
||||
$html .= $this->editorReplace(); |
||||
|
||||
return $html; |
||||
} |
||||
|
||||
/** |
||||
* @return string |
||||
*/ |
||||
public function editorReplace() |
||||
{ |
||||
$toolbar = new Toolbar($this->toolbarSet, $this->config, 'CkEditor'); |
||||
$toolbar->setLanguage($this->translator->getLocale()); |
||||
$config = $toolbar->getConfig(); |
||||
$javascript = $this->toJavascript($config); |
||||
$html = "<script> |
||||
CKEDITOR.replace('".$this->getName()."', |
||||
$javascript |
||||
); |
||||
</script>"; |
||||
|
||||
return $html; |
||||
} |
||||
} |
||||
@ -1,10 +1,13 @@ |
||||
<?php |
||||
/* For licensing terms, see /license.txt */ |
||||
namespace ChamiloLMS\Component\Editor\Toolbar; |
||||
namespace ChamiloLMS\Component\Editor\CkEditor\Toolbar; |
||||
|
||||
/** |
||||
* Class TestQuestionDescription |
||||
* @package ChamiloLMS\Component\Editor\CkEditor\Toolbar |
||||
*/ |
||||
class TestQuestionDescription |
||||
{ |
||||
|
||||
public function getConfig() |
||||
{ |
||||
$config['toolbarGroups'] = array( |
||||
@ -0,0 +1,81 @@ |
||||
<?php |
||||
/* For licensing terms, see /license.txt */ |
||||
namespace ChamiloLMS\Component\Editor\TinyMce; |
||||
|
||||
use ChamiloLMS\Component\Editor; |
||||
|
||||
/** |
||||
* Class TinyMce |
||||
* @package ChamiloLMS\Component\Editor\TinyMce |
||||
*/ |
||||
class TinyMce extends Editor\Editor |
||||
{ |
||||
|
||||
/** |
||||
* @param array $files |
||||
*/ |
||||
public function getJavascriptToInclude(& $files) |
||||
{ |
||||
$jsFolder = api_get_path(WEB_LIBRARY_PATH).'javascript/'; |
||||
$files[] = $jsFolder.'tinymce/tinymce.min.js'; |
||||
} |
||||
|
||||
/** |
||||
* @return string |
||||
*/ |
||||
public function getTemplate() |
||||
{ |
||||
return 'javascript/editor/tinymce/elfinder.tpl'; |
||||
} |
||||
|
||||
/** |
||||
* Return the HTML code required to run editor. |
||||
* |
||||
* @return string |
||||
*/ |
||||
public function createHtml() |
||||
{ |
||||
$html = '<textarea id="'.$this->name.'" name="'.$this->name.'" class="ckeditor" >'.$this->value.'</textarea>'; |
||||
$html .= $this->editorReplace(); |
||||
|
||||
return $html; |
||||
} |
||||
|
||||
/** |
||||
* @return string |
||||
*/ |
||||
public function editorReplace() |
||||
{ |
||||
$toolbar = new Toolbar($this->toolbarSet, $this->config, 'TinyMce'); |
||||
$toolbar->setLanguage($this->translator->getLocale()); |
||||
$config = $toolbar->getConfig(); |
||||
$config['selector'] = "#".$this->name; |
||||
$javascript = $this->toJavascript($config); |
||||
$javascript = str_replace('"elFinderBrowser"', "elFinderBrowser", $javascript); |
||||
|
||||
$html = "<script> |
||||
function elFinderBrowser (field_name, url, type, win) { |
||||
tinymce.activeEditor.windowManager.open({ |
||||
file: '".$this->urlGenerator->generate('filemanager')."', |
||||
title: 'elFinder 2.0', |
||||
width: 900, |
||||
height: 450, |
||||
resizable: 'yes' |
||||
}, { |
||||
setUrl: function (url) { |
||||
win.document.getElementById(field_name).value = url; |
||||
} |
||||
}); |
||||
return false; |
||||
} |
||||
|
||||
$(document).ready(function() { |
||||
tinymce.init( |
||||
$javascript |
||||
); |
||||
}); |
||||
</script>"; |
||||
|
||||
return $html; |
||||
} |
||||
} |
||||
@ -1,54 +0,0 @@ |
||||
<?php |
||||
/* For licensing terms, see /license.txt */ |
||||
namespace ChamiloLMS\Component\CkEditor; |
||||
|
||||
class TinyMceEditor extends Editor |
||||
{ |
||||
|
||||
/** |
||||
* @param string $name |
||||
* @param \Symfony\Component\Translation\Translator $translator |
||||
*/ |
||||
public function __construct($name, \Symfony\Component\Translation\Translator $translator) |
||||
{ |
||||
$this->name = $name; |
||||
$this->toolbarSet = 'Basic'; |
||||
$this->value = ''; |
||||
$this->config = array(); |
||||
$this->setConfigAttribute('width', '100%'); |
||||
$this->setConfigAttribute('height', '200'); |
||||
$this->setConfigAttribute('fullPage', false); |
||||
$this->translator = $translator; |
||||
} |
||||
|
||||
/** |
||||
* Return the HTML code required to run editor. |
||||
* |
||||
* @return string |
||||
*/ |
||||
public function createHtml() |
||||
{ |
||||
$Html = '<textarea id="'.$this->name.'" name="'.$this->name.'" class="ckeditor" >'.$this->value.'</textarea>'; |
||||
$Html .= $this->editorReplace(); |
||||
|
||||
return $Html; |
||||
} |
||||
|
||||
/** |
||||
* @return string |
||||
*/ |
||||
public function editorReplace() |
||||
{ |
||||
$toolbar = new Toolbar\Basic($this->toolbarSet); |
||||
$toolbar->setLanguage($this->translator->getLocale()); |
||||
$config = $toolbar->getConfig(); |
||||
$javascript = $this->toJavascript($config); |
||||
$html = "<script> |
||||
CKEDITOR.replace('".$this->name."', |
||||
$javascript |
||||
); |
||||
</script>"; |
||||
|
||||
return $html; |
||||
} |
||||
} |
||||
@ -0,0 +1,69 @@ |
||||
<?php |
||||
/* For licensing terms, see /license.txt */ |
||||
|
||||
namespace ChamiloLMS\Component\Editor; |
||||
|
||||
/** |
||||
* Class Toolbar |
||||
* @package ChamiloLMS\Component\Editor |
||||
*/ |
||||
class Toolbar |
||||
{ |
||||
public $config; |
||||
|
||||
/** |
||||
* @param string $toolbar |
||||
* @param array $config |
||||
* @param string $prefix |
||||
*/ |
||||
public function __construct($toolbar = null, $config = array(), $prefix = null) |
||||
{ |
||||
if (!empty($toolbar)) { |
||||
$class = __NAMESPACE__."\\".$prefix."\\Toolbar\\".$toolbar; |
||||
if (class_exists($class)) { |
||||
$toolbarObj = new $class; |
||||
$this->setConfig($toolbarObj->getConfig()); |
||||
} |
||||
} |
||||
|
||||
if (!empty($config)) { |
||||
$this->updateConfig($config); |
||||
} |
||||
} |
||||
|
||||
/** |
||||
* @param array $config |
||||
*/ |
||||
public function setConfig(array $config) |
||||
{ |
||||
$this->config = $config; |
||||
} |
||||
|
||||
/** |
||||
* @param array $config |
||||
*/ |
||||
public function updateConfig(array $config) |
||||
{ |
||||
if (empty($this->config)) { |
||||
$this->setConfig($config); |
||||
} else { |
||||
$this->config = array_merge($this->config, $config); |
||||
} |
||||
} |
||||
|
||||
/** |
||||
* @return array |
||||
*/ |
||||
public function getConfig() |
||||
{ |
||||
return $this->config; |
||||
} |
||||
|
||||
/** |
||||
* @param $language |
||||
*/ |
||||
public function setLanguage($language) |
||||
{ |
||||
$this->config['language'] = $language; |
||||
} |
||||
} |
||||
Loading…
Reference in new issue