CKeditor : Configure plugin through CKeditor's configuration - plugins

I'm looking for any trick to configure my plugin with arguments in CKEditor's configuration. I have to pass some parameters that I can only pass when my view is displayed.
I want something like this (sample with jQuery adapter) :
jQuery('textarea.wysiwyg').ckeditor(function(){},{
'width' : '640px',
'resize_maxWidth' : '640px',
'extraPlugins' : 'my_plugin',
'toolbar' : [['Bold', 'Italic', '-', 'NumberedList', 'BulletedList'],['Link', 'Unlink','-','MyPlugin'],['Paste','PasteFromWord'],['Source']]
'my_plugin' : {
'param1' : 'value1',
'param2' : 'value2',
}
});
But I have'nt found yet any information about plugin configuration with CKEditor.

I answer to my own question :
Plugin method init receive editor as argument, editor contain config (which can be called editor.config) so you can access all configuration defined when you have created your ckeditor instance.
With my sample in my first post, you can access configuration in your plugin like this way :
CKEDITOR.plugins.add( 'my_plugin',
{
init: function( editor )
{
var param1 = editor.config.value1;
}
}
I think that it's not the best way to do because It adds some extra properties to CKEDITOR.config prototype. It could be better to have a property CKEDITOR.config.extraConfig which is a map of properties by plugins.

Pass the values to the plugin during editor initialization
jQuery('textarea.wysiwyg').ckeditor(function(){},
{
config.extraConfig : { 'param1' : 'value1', 'param2' : 'value2' }
});
and access the values in the plugin
CKEDITOR.plugins.add( 'my_plugin',
{
init: function( editor )
{
var param1 = editor.extraConfig.param1;
var param2 = editor.extraConfig.param2;
}
}

Related

Yii2 rest: checkAccess on restAction

After tackling this other question we would now like to check if the authenticated user can view, update or delete an existing record. Since checkAccess() is called by default in all restActions the following seemed the most logic thing to try:
public function checkAccess($action, $model = null, $params = []) {
if(in_array($action, ['view', 'update', 'delete'])) {
if(Yii::$app->user->identity->customer->id === null
|| $model->customer_id !== Yii::$app->user->identity->customer->id) {
throw new \yii\web\ForbiddenHttpException('You can\'t '.$action.' this item.');
}
}
}
But the API seems to ignore this function. We added this function in our controller. The actions (view, update and delete) are the default restActions.
Our BaseController sets actions like this:
...
'view' => [
'class' => 'api\common\components\actions\ViewAction',
'modelClass' => $this->modelClass,
'checkAccess' => [$this, 'checkAccess'],
'scenario' => $this->viewScenario,
],
...
Are we forgetting something?
Just add the following inside your custom action before executing any other code as it was done in the default view action (see source code here):
if ($this->checkAccess) {
call_user_func($this->checkAccess, $this->id, $model);
}
note: $this->checkAccess is defined in parent yii\rest\Action so your custom ActionView class need to either extend yii\rest\Action or redefine the variable public $checkAccess;
We obviously should have seen that the viewAction is not the default but an altered api\common\components\actions\ViewAction ... Not sure how we missed that...

TYPO3-6.2 Extbase custom content type -> invalid value

I made an extbase Extension for custom content elements. Since this is my first extension I started with a simple "hello_world_ce". This are my files:
ext_tables.php
<?php
$TCA['tt_content']['types']['hello_world_ce']['showitem'] = '--palette--;LLL:EXT:hello_world/Resources/Private/Language/locallang_mod.xlf:content_element.hello_world.general;general, --palette--;LLL:EXT:hello_world/Resources/Private/Language/locallang_mod.xlf:content_element.hello_world.header;header';
ext_localconf.php
<?php
\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addPageTSConfig('<INCLUDE_TYPOSCRIPT: source="FILE:EXT:'.$_EXTKEY.'/Configuration/TypoScript/ModWizards.ts">');
ModWizards.ts
mod.wizards {
newContentElement {
wizardItems {
hello_world {
header = LLL:EXT:hello_world/Resources/Private/Language/locallang_mod.xlf:content_tab_header
elements {
hello_world_ce {
icon = gfx/c_wiz/regular_header.gif
title = LLL:EXT:hello_world/Resources/Private/Language/locallang_mod.xlf:content_element.hello_world
description = LLL:EXT:hello_world/Resources/Private/Language/locallang_mod.xlf:content_element.hello_world.description
tt_content_defValues {
CType = hello_world_ce
}
}
}
}
show = *
}
}
}
In the TYPO3 Backend I see my content element and can add it to a page but the dropdown menu for the content type says INVALID VALUE ("hello_world_ce")
What am I missing?
EDIT: I found the missing part. I needed to add my content type to the CType array
ext_tables.php
$backupCTypeItems = $GLOBALS['TCA']['tt_content']['columns']['CType']['config']['items'];
$GLOBALS['TCA']['tt_content']['columns']['CType']['config']['items'] = array(
array(
'LLL:EXT:'.$_EXTKEY.'/Resources/Private/Language/locallang_mod.xlf:content_tab_header',
'--div--'
),
array(
'LLL:EXT:'.$_EXTKEY.'/Resources/Private/Language/locallang_mod.xlf:content_element.hello_world',
'hello_world_ce',
'i/tt_content_header.gif'
)
);
foreach($backupCTypeItems as $key => $value){
$GLOBALS['TCA']['tt_content']['columns']['CType']['config']['items'][] = $value;
}
The question was edited, but I think there is a better way to achieve the solution.
Only to be clear about the problem:
The content element hello_world_ce was not added to the "types" dropdown by adding a new content element.
The hint in the question is correct it was not defined for the CType field.
But instead of manipulating the array you could use a core function:
// Adds the content element to the "Type" dropdown
\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addPlugin(
array(
'LLL:EXT:your_extension_key/Resources/Private/Language/locallang_mod.xlf:content_element.hello_world',
'hello_world_ce',
'i/tt_content_header.gif'
),
'CType',
'your_extension_key'
);
Here is a very good example of how to add your own content element in the version TYPO3 7.6.
Note: This function is accessible in TYPO3 6.2 as well.

tinymce adding p tags automatically?

Im using tinymce and saving it to a database.
When I edit the saved content using tinymce and save again, it inserts a p tag at the beginning.
Editing the content over and over again leaves a large gap at the beginning of the content.
DOes anyone know a fix?
TinyMce automatically add "<p>" in new lines.
You can set this option in tinyMce initialization like this:
tinyMCE.init({
mode : "textareas",
theme : "advanced",
force_br_newlines : false,
force_p_newlines : false,
forced_root_block : '',
});
Hope it will help
Fonski
For me it worked by making "force_br_newlines : true" instead of false.
tinyMCE.init({
mode : "textareas",
theme : "advanced",
force_br_newlines : true,
force_p_newlines : false,
forced_root_block : ''
});
I hope it helps
I am sure that #Fonski answer is correct but thought I would update this for anyone else that did was confused as to where to put the code. I placed the following in my _config.php file to get it to work:
$defaultEditorConfig = HtmlEditorConfig::get('cms');
$defaultEditorConfig->setOptions(
array(
'mode' => 'textareas',
'theme' => 'advanced',
'force_br_newlines' => false,
'force_p_newlines' => false,
'forced_root_block' => ''
)
);
Note: If you just want to remove the p tag that automatically wraps image tags (etc) all you need to set is the 'forced_root_block' => '' option.
EDIT: This advice is for those using SilverStripe, I posted this thinking the questions was SilverStripe specific.
From tinymce.js v4.1.10 code:
newBlockName = (settings.force_p_newlines ? 'p' : '') || settings.forced_root_block;
So the key to avoid <p> seems to be as stated before
settings.force_p_newlines = false
and
settings.forced_root_block = ''

Changing the height of ckeditor from a zend form

I am trying to set the height of a ckeditor I am using. Here is what I currently have:
$this->addElement('textarea', 'text_field', array(
'filters' => array('StringTrim'),
'validators' => array(
array('StringLength', true, array(0, 3000)),
),
'decorators' => array('ViewHelper'),
'required' => false,
'attribs' => array('class' => 'ckeditor'),
'label' => 'Please enter text below',
'value' => isset($this->_text_data[0]['text']) ? $this->_text_data[0]['text'] : ''
));
This comes from my form, this is then called in my .phtml file by the following:
<?=$this->element->getElement('text_field')?>
I have looked everywhere and tried adding:
'height' => '100px',
and:
'config' => array(
'toolbar' => 'Full',
'width' => '550px',
'height' => '100px',
),
But neither of these have worked. The main reason I need this is I have a text area (using the ckeditor in order to allow the input information to be formatted in a particular way) which is quite long (the default height I am assuming) but it is only ever a few lines input into the box, hence the reason I want it smaller as it takes up too much space on the page.
Thanks in advance
Iain
I made a form element and a helper using ZendX_JQuery_View_Helper_UiWidget to create a CKEditor with the jQuery adapter. Here's the code of both files :
ZendExt_Form_Element_CKEditor :
class ZendExt_Form_Element_CKEditor extends ZendX_JQuery_Form_Element_UiWidget
{
/**
* Use formCKeditor view helper by default
* #var string
*/
public $helper = 'formCKEditor';
/**
* Default ckeditor options
*
* #var array
*/
public $jQueryParams = array(
'toolbar' => 'Basic'
);
}
And ZendExt_View_Helper_FormCKEditor :
class ZendExt_View_Helper_FormCKEditor extends ZendX_JQuery_View_Helper_UiWidget
{
static $set = false;
public function formCKEditor($name, $value = null, $params = null, $attribs = null)
{
$hTextA = new Zend_View_Helper_FormTextarea();
$hTextA -> setView($this -> view);
$xhtml = $hTextA -> formTextarea($name, $value, $attribs);
$xhtml .= '<script type="text/javascript">$(document).ready(function(){$("#' . $this->_normalizeId($name) . '").ckeditor(' . (!is_null($params) ? 'function(){},' . Zend_Json_Encoder::encode($params) : '') . ')});</script>';
if (self::$set == false) {
$this -> view -> headScript() -> appendFile($this -> view -> baseUrl() . '/js/ckeditor/ckeditor.js');
$this -> view -> headScript() -> appendFile($this -> view -> baseUrl() . '/js/ckeditor/adapters/jquery.js');
self::$set = true;
}
return $xhtml;
}
}
You can use it as any other ZF form element once you copied these 2 files into :
* libraries/ZendExt/Form/Element/ for ZendExt_Form_Element_CKEditor class
* libraries/ZendExt/View/Helper/ for ZendExt_View_Helper_FormCKEditor class
and added the ZendExt namespace in your configuration file (or if you already have a library of yours and want to use it, just put both files in it and change the name of the classes to reflect yours). Then, you'll have tel ZF that ZendExt/View/Helper is a directory to look in for view helpers (in a .ini config file it would look like : resources.view.helperPath.ZendExt_View_Helper = "ZendExt/View/Helper").
Then in your code, just call $ckEditor = new ZendExt_Form_Element_CKEditor(); to create a new CKEditor. You may then add all params you want to the element using $ckEditor -> setJQueryParam($key, $value); as specified in the documentation here : http://framework.zend.com/manual/fr/zendx.jquery.html . For example : $ckEditor -> setJQueryParam('height', '100px');. I understand it's not a jQuery component, but it was the easiest way to be able to make it as everything needed is available there.
To display it, in your view just do <?=$this -> ckEditor?> and you're good.
Make sure you put your ckeditor.js and adapters/jquery.js in your public directory under /js/ckeditor/ or change the path accordingly in the helper.
You'll need to specify the dimensions of the editor when you create it (i.e., in the Javascript part). CKEditor replaces the original form element with its own code, so your changes in the dimensions will be lost.
For instance, if you create it using the jQuery interface, it would be something like the following:
var config = {
width: '550px',
height: '100px'
};
// Initialize the editor.
$('.jquery_ckeditor').ckeditor(config);
Hope that helps...

Creating a new TinyMCE form widget

I'm using tinyMCE in my forms and have noticed that I only use two configurations : a very limited one, for things like comments, and a more complex one, for the administators of the site.
For the moment I do that by repeating this sort of code in each form :
//TinyMCE
$this->widgetSchema['comment'] = new sfWidgetFormTextareaTinyMCE(array(
'width' => 550,
'height' => 150,
'config' => '
theme_advanced_buttons1 : "bold,italic,separator,bullist,separator,link, sub,sup,separator,charmap",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_path : false,
language : "fr"
'
));
Could I (and how) create two widgets, say TinyMCEsmall and TinyMCEfull so that I don't have to repeat code ?
Like this:
class sfWidgetFormTextareaTinyMCESmall extends sfWidgetFormTextareaTinyMCE
{
protected function configure($options = array(), $attributes = array())
{
parent::configure($options, $attributes);
//assuming there are no options on the parent class that you need, call setOptions. If you need to retain some, make individual setOption calls.
$this->addOption('width', 550);
$this->addoption('height', 150);
$this->addOption('config', '
theme_advanced_buttons1 : "bold,italic,separator,bullist,separator,link, sub,sup,separator,charmap",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_path : false,
language : "fr"
');
}
}
Note that options you pass in will still take precedence.
sure, create a class that extends the sfWidgetFormTextareaTinyMCE and put your specifics in its constructor.
put it in let's say a var called myTinyMCE
and call at last in the constructor the parent::constructor(myTinyMCE)
where you give the setup as a parameter.
then in the form don't call the sfWidgetFormTextareaTinyMCE anymore, but your class you created...
class myClass extends sfWidgetFormTextareaTinyMCE {
public class __construct(){
myTinyMCE = array(
'width' => 550,
'height' => 150,
'config' => '
theme_advanced_buttons1 : "bold,italic,separator,bullist,separator,link, sub,sup,separator,charmap",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_path : false,
language : "fr"
'
);
parent::__construct(myTinyMCE);
}
}
more info on that can be found here How do I get a PHP class constructor to call its parent's parent's constructor