I'm using the Ckeditor bundle on Symfony, and I'm trying to set the characters limit for the form field with the displaying the remained chars counter.
I found information about props like "maxLength", "maxChar", "maxWord" and so on, but it not works:
$builder->add('description', CKEditorType::class, [
'config' => array(
'uiColor' => '#ffffff',
'toolbar' => [ [ "Image", "-", "Styles", "Format", "-", "Bold", "Italic", "Underline", "-", "Maximize" ] ],
'maxChar' => 2,
'showCharCount' => true
),
]);
On the official Ckeditor documentation is mentioned about a special plugin for this, but I don't know, if it works with Symfony. Does anybody know, how to set it?
Tnanks for your answers.
Related
Hello I'm developing an Elementor plugin that I have a transform setting in my widget like this :
$repeater->add_responsive_control(
'rp_translatex_header' ,
[
'label' => esc_html('Header Translate X ') ,
'type' => \Elementor\Controls_Manager::NUMBER ,
'devices' => [ 'desktop', 'tablet', 'mobile' ],
'min' => -100,
'max' => 100,
'selectors' => [
'{{WRAPPER}} {{CURRENT_ITEM}} hth' => 'transform:translate({{VALUE}}vw,{{rp_translatey_header.VALUE}}vh)',
]
]
);
in selectors I use another control value for translateY , this work well until the responsive mode !
on mobile or tablet the translateY value that come from another control doesn't work and return the desktop value (form target control) for fixing this I should use rp_translatey_header_mobile.VALUE for getting mobile mode value !
but this is not my ideal way to fix this and I'm sure that is a way for doing this I want something like :
'selectors' => [
// for normal mode (desktop)
'{{WRAPPER}} {{CURRENT_ITEM}} div' =>
'transform:translate({{VALUE}}vw,{{rp_translatey_header.VALUE}}vh)',
// for mobile mode
'{{WRAPPER}} {{CURRENT_ITEM}} div' =>
'transform:translate({{VALUE}}vw,{{rp_translatey_header_mobile.VALUE}}vh)',
]
I can get value by {{your_control_id.VALUE}} very well by I have problem in responsive mode , {{your_control_id.VALUE}} just return the value on desktop and in mobile mode it will return desktop value again ! what should I do ? with using your_control_id_mobile the proplem will solve but i want to use all mode value ! how can i tell to control and selector in which screen use desktop and mobile
I find the solution !
i
I added two more selector and just before the {{WRAPPER}} I added (mobile ) / (tablet) /(desktop ) like this :
'selectors' => [
'(desktop){{WRAPPER}} {{CURRENT_ITEM}} div' => 'transform:translate({{rp_translatex_text.VALUE}}vw,{{VALUE}}vh)',
'(tablet){{WRAPPER}} {{CURRENT_ITEM}} div' => 'transform:translate({{rp_translatex_text_tablet.VALUE}}vw,{{VALUE}}vh)',
'(mobile){{WRAPPER}} {{CURRENT_ITEM}} div' => 'transform:translate({{rp_translatex_text_mobile.VALUE}}vw,{{VALUE}}vh)',
] ,
and for each responsive mode get the responsive id like your_id_mobile.VALUE !
I'm trying to build a custom set of column blocks using InnerBlocks and am having trouble passing attributes to block templates. To start, I scaffolded a new plugin using Create-Guten-Block. I then created two blocks, one to serve as a row container, and one for individual columns.
Here is a simplified version of how I'm creating the main container (with two columns hard-coded for testing):
registerBlockType( 'wabe/multi-column-block', {
title: __( 'Multi-Column' ),
icon: 'columns',
category: 'common',
keywords: [
__( 'columns' ),
__( 'grid' ),
],
attributes: {
layout: {
type: 'string',
},
},
edit: () => {
return (
<div>
{ /* inspector controls for choosing a layout will go here */ }
<InnerBlocks
template={ [
[ 'wabe/multi-column-column', { columnwidth: '6' }, [
[ 'core/paragraph', { content: 'Insert column content here.' } ],
],
],
[ 'wabe/multi-column-column', { columnwidth: '6' }, [
[ 'core/paragraph', { content: 'Insert column content here.' } ],
],
],
] }
/>
</div>
);
},
save: () => {
// This is a dynamic block
return (
<InnerBlocks.Content />
);
},
} );
... and how I'm creating the individual column block:
registerBlockType( 'wabe/multi-column-column', {
title: __( 'Multi-Column Column' ),
icon: 'columns',
category: 'common',
keywords: [
__( 'columns' ),
__( 'grid' ),
],
attributes: {
columnwidth: {
type: 'string',
default: '',
},
},
edit: ( props ) => {
return (
<div>
<p>Width: { props.attributes.columnwidth }</p>
<InnerBlocks />
</div>
);
},
save: () => {
return (
<InnerBlocks.Content />
);
},
} );
I'll have a custom select for users to choose a column layout, and using that, will determine how many columns to include, and pass the "columnwidth" attribute to each column block. This will tell each column what CSS class to use.
The problem is no matter what I try, that "columnwidth" attribute just will not be passed to the column block. In fact, I can't get it to pass anything, even "className".
I've looked at the code for core columns/column blocks, and can't see what I'm doing wrong. Everything has gone great up until this giant roadblock. Any tips are appreciated.
The block code example you have provided shows you are setting up the InnerBlocks fine. The issue may be a simple oversight that you have missed importing the required dependancy of <InnerBlocks>.
I was able to build your block code successfully once I added the required imports:
import { registerBlockType } from '#wordpress/blocks';
import { __ } from '#wordpress/i18n';
import { InnerBlocks} from '#wordpress/block-editor';
Here is the result:
The code editor shows that your attributes are being passed and being saved.
If you are still encountering an issue, double check that you are clearing your browser cache before retesting and also check the browser console to see if any errors are present.
As you mentioned you have already reviewed the Gutenberg code for Columns/Column, a tip would be to look at how they do variations for creating the options in your Inspector Control. Hope this gets you back on track with creating your block.
I have an Symfony form with CKEditor (installed with composer ("friendsofsymfony/ckeditor-bundle": "^2.2")) and configure it with my custom toolbar.
It's fully worked but i'm trying to switch everything to WebpackEncore, it's actually works but I have an weird problem.
My fos-ckeditor.yml totally works before WebpackEncore
# Read the documentation: https://symfony.com/doc/current/bundles/FOSCKEditorBundle/index.html
twig:
form_themes:
- '#FOSCKEditor/Form/ckeditor_widget.html.twig'
fos_ck_editor:
input_sync: true
default_config: main_config
configs:
main_config:
toolbar: "article_toolbar"
toolbars:
configs:
article_toolbar: [ "#document", "#clipboard", "#editing", "#tools", "/", "#basicstyles", "#paragraph", "#links", "#insert", "/", "#styles", "#colors" ]
items:
document: [ 'Source', '-', 'Preview', '-' ]
clipboard: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ]
editing: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ]
tools: [ 'Maximize', 'ShowBlocks' ]
basicstyles: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'CopyFormatting', 'RemoveFormat' ]
paragraph: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-' ]
links: [ 'Link', 'Unlink', 'Anchor' ]
insert: [ 'Image', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar' ]
styles: [ 'Styles', 'Format', 'Font', 'FontSize' ]
colors: [ 'TextColor', 'BGColor' ]
#filebrowserUploadRoute: "my_route"
#extraPlugins: "wordcount"
Result without WebpackEncore
My new config with WebpackEncore are the same with add this lines
fos_ck_editor:
# ...
base_path: "build/ckeditor"
js_path: "build/ckeditor/ckeditor.js"
jquery_path: "build/ckeditor/adapters/jquery.js"
When I comment on these 3 previous config lines, the toolbar is displayed correctly but WebpackEncore are no longer used.
It seems that WebpackEncore builds the toolbar differently from ckeditor because output HTML doesn't have same structure...
Webpack.config.js
Encore
// ...
.copyFiles([
{from: './node_modules/ckeditor4/', to: 'ckeditor/[path][name].[ext]', pattern: /\.(js|css)$/, includeSubdirectories: false},
{from: './node_modules/ckeditor4/adapters', to: 'ckeditor/adapters/[path][name].[ext]'},
{from: './node_modules/ckeditor4/lang', to: 'ckeditor/lang/[path][name].[ext]'},
{from: './node_modules/ckeditor4/plugins', to: 'ckeditor/plugins/[path][name].[ext]'},
{from: './node_modules/ckeditor4/skins', to: 'ckeditor/skins/[path][name].[ext]'}
])
// ...
Result with WebpackEncore
I followed all instructions in Symfony's installation documentation and Symfony's customize toolbar's documentation
I don't understand where the difference come from... Thank you for your help
When you install ckeditor4, you install its standard version.
You can change the default behavior by modifying the file fos_ckeditor.yaml
For example, by default, you have the following conf (build/ckeditor/config.js) :
config.removeButtons = 'Underline,Subscript,Superscript';
If you want to use these buttons, you can add in the fos_ckeditor.yaml file the option removeButtons
fos_ck_editor:
configs:
nameOfYourConfig:
removeButtons: ~
You can also add plugins with extraPlugins:
fos_ck_editor:
configs:
nameOfYourConfig:
removeButtons: ~
extraPlugins: 'justify'
With the justify plugin, you will be able to use JustifyLeft, JustifyCenter, JustifyRight, JustifyBlock in your toolbar (not possible by default).
You will find below the list of options
https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html
I think there is a conflict with the npm package & encore.
I had the same problem and I have found a dirty solution. It’s not a perfect solution but I have a complete toolbar with encore:
start removing the npm package
yarn remove ckeditor
or ckeditor4
Create your own ckeditor: CK editor builder
After this copy paste your build to
assets/ckeditor/build
in your webpack.js.config remove other ckeditors imports line and only use:
{from: './assets/ckeditor/build', to: 'ckeditor/[path][name].[ext]'},
and in your fos_ckeditor :
fos_ck_editor:
base_path: "build/ckeditor"
js_path: "build/ckeditor/ckeditor.js"
For me it worked.
I encountered the same issue today and this happens because NPM installs the standard-all edition of ckeditor by default.
But FOSCKEditor download the full edition when using the command line.
So if you want to manage ckeditor with Webpack Encore, you also need to install the full edition using NPM:
npm install ckeditor/ckeditor4-releases#full/stable
See: https://ckeditor.com/docs/ckeditor4/latest/guide/dev_package_managers.html#usage
how do I enable the Rich Text Editor for a custom content element in TYPO3 8.7?
I tried
$GLOBALS['TCA']['tt_content']['types']['myCustomElement'] = array('showitem' => '--palette--;
LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xml:palette.general;
general,header,subheader,header_link,bodytext,
richtext:rte_transform[flag=rte_enabled|mode=ts_css],rte_enabled;
image,--div--;
LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xml:tabs.appearance,--palette--;
LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xml:palette.frames;
frames,--div--;
LLL:EXT:cms/locallang_ttc.xlf:tabs.access,--palette--;
LLL:EXT:cms/locallang_ttc.xlf:palette.visibility;
visibility,--palette--;
LLL:EXT:cms/locallang_ttc.xlf:palette.access;
access,--div--;
LLL:EXT:lang/locallang_tca.xlf:sys_category.tabs.category, categories, tx_gridelements_container, tx_gridelements_columns');
and
$GLOBALS['TCA']['tt_content']['types']['myCustomElement']['columnsOverrides']['bodytext']['defaultExtras'] = 'richtext[*]:rte_transform[mode=ts_css]';
in TCA/Overrides in my Extension. What am I missing?
I have improve your code and its work properly now
$myfield=[
'showitem' => '
--palette--; LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xml:palette.general; general,header,subheader,header_link,bodytext,image,
--div--;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xml:tabs.appearance,
--palette--;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xml:palette.frames;frames,
--div--;LLL:EXT:cms/locallang_ttc.xlf:tabs.access,
--palette--;LLL:EXT:cms/locallang_ttc.xlf:palette.visibility;visibility,
--palette--;LLL:EXT:cms/locallang_ttc.xlf:palette.access;access,
--div--;LLL:EXT:lang/locallang_tca.xlf:sys_category.tabs.category, categories, tx_gridelements_container, tx_gridelements_columns
',
'columnsOverrides' => [
'bodytext' => [
'config' => [
'enableRichtext' => true,
'richtextConfiguration' => 'default'
]
]
]
];
And
$GLOBALS['TCA']['tt_content']['types']['myCustomElement']=$myfield;
May It will help you!!
The RTE in TYPO3 comes from an TYPO3-System-Extension called rte_ckeditor. Somehow I managed to deactivate it. After reactivating it I used the following in my TCA:
$GLOBALS['TCA']['tt_content']['types']['myCustomElement'] = array('showitem' =>'--palette--;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xml:palette.general;general,header,subheader,header_link,bodytext,image,--div--;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xml:tabs.appearance,--palette--;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xml:palette.frames;frames,--div--;LLL:EXT:cms/locallang_ttc.xlf:tabs.access,--palette--;LLL:EXT:cms/locallang_ttc.xlf:palette.visibility;visibility,--palette--;LLL:EXT:cms/locallang_ttc.xlf:palette.access;access,--div--;LLL:EXT:lang/locallang_tca.xlf:sys_category.tabs.category, categories, tx_gridelements_container, tx_gridelements_columns');
$GLOBALS['TCA']['tt_content']['types']['myCustomElement']['columnsOverrides']['bodytext']['defaultExtras'] = 'richtext[*]:rte_transform[mode=ts_css]';
When creating wiki pages in Phabricator's Phriction, I would like to use images as links. So rather than using a normal, textual link like
[[ url | this is a link]]
I would like to use an image for the link
[[ url | {F4711} ]]
Unfortunately, Phabricator renders just the text {F4711} and not the image from the file F4711.
Is this possible with Remarkup?
Any workarounds?
I don't think it is possible in Remarkup. The official documentation doesn't mention a way to do it and I've never seen it done, unfortunately.
Maybe you can use {img https://cdn-images-1.medium.com/fit/c/72/72/1*ZroWAkaLZdsNIBOHSoez3g.jpeg}
Syntax is as follows:
{image <IMAGE_URL>}
Parameters are also supported, like:
{image uri=<IMAGE_URI>, width=500px, height=200px, alt=picture of a moose, href=google.com}
URLs without a protocol are not supported.
see more: https://secure.phabricator.com/D16597
You can add a patch in https://github.com/phacility/phabricator/blob/master/src/applications/files/markup/PhabricatorEmbedFileRemarkupRule.php#L169
like this:
$href = $file->getBestURI();
$sigil = 'lightboxable';
if (isset($options['href'])) {
$href = $options['href'];
$sigil = '';
}
$img = phutil_tag('img', $attrs);
$embed = javelin_tag(
'a',
array(
'href' => $href,
'class' => $image_class,
'sigil' => $sigil,
'meta' => array(
'phid' => $file->getPHID(),
'uri' => $file->getBestURI(),
'dUri' => $file->getDownloadURI(),
'viewable' => true,
'monogram' => $file->getMonogram(),
),
),
$img);
But in this case you cannot set the protocols:
{image uri=<IMAGE_URI>, width=500px, height=200px, alt=picture of a moose, href="//google.com"}
The reason is, phabricator renders first a a Tag with the url from the href attribiute and then the embed F Tag.