I need to use a wysiwyg editor on my website.
I use symfony 4.
I've tried to use ckeditor 5 CDN (https://ckeditor.com/ckeditor-5/download/)
The view works well but the symfony form is not submitted. (the textareatype may kills the form because with ckeditor it is changed into many divs and the textarea section may be considered blank)
this is the code of the textarea which is in the form.
->add('content', TextareaType::class, [
'label' => "Content label",
'required' => true,
'attr' => [
'class' => "ckeditor"
]
])
and the code of the script
<script>
ClassicEditor
.create( document.querySelector( '.ckeditor' ) )
.catch( error => {
console.error( error );
} );
</script>
Thanks. it's hopeless how it's difficult to use a simple wysiwyg editor ..
I found the solution.
I emphasize that i use CKEditor 5.
ClassicEditor
.create( document.querySelector( '.ckeditor' ) )
.then( editor => {
theEditor = editor;
} )
.catch( error => {
console.error( error );
} );
document.getElementById("news_submit").addEventListener("click", function() {
theEditor.updateSourceElement();
});
the method is now "updateSourceElement" with CKEditor 5.
edit: this answer is for ckeditor 4 not for 5
ckeditor not update field in real time. You need to call updateElement ckeditor function before submit your form.
See: https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_editor.html#method-updateElement
Related
I have several fields on a form. Some of them are simple inputs, others are datetimepickers, a few of them are CKEditors. I handle the form submit manually, so I need to manually update the source fields for the CKEditor instances to get all modification before I save it to a MySQL database. I put all the instances to an array (I see its content in Chrome's web developer tool), but when I try to use destroy or updateSourceElement methods on one item from this array, I get "TypeError, item.updateSourceElement is not a function" messages.
I use this code:
const CKeditors = {};
...
function createEditor( elementId ) {
return ClassicEditor
.create( document.querySelector( elementId ),
{
toolbar: [ "heading", "|", "bold", "italic", "link", "bulletedList", "numberedList"]
})
.then( editor => {
CKeditors[ elementId ] = editor;
})
.catch( err => console.error( err.stack ) );
}
createEditor("#'.$mezo['mezonev'].'_tartalom"); // $mezo['mezonev'].'_tartalom is the unique name of the input field
function submitAllCKeditors(){
for (item in CKeditors)
{
item.updateSourceElement();
}
}
...
and somewhere later when I handle the onlick event, I call "submitAllCKeditors();" I see the array's content with the proper ids, but I get error for the item.updateSourceElement();
What am I doing wrong?
The reply allowed html style with inline button but unfortunately it is not possible to use markdown style with inline button.
const inlineButtons = () => {
const inlineLinks = [
{
title: 'Google',
link: 'https://www.google.com/',
},
{
title: 'DuckDuckGo.com',
link: 'https://www.duckduckgo.com/',
},
];
const buttonLinks = inlineLinks.map(({ title, link }) =>
Markup.markdown().urlButton(title, link),
);
return Extra.markup(m => m.inlineKeyboard(buttonLinks, { columns: 1 }));
};
// Reply message
ctx.reply(
`<b>show_inline</b> *${show_inline}*`,
show_inline ? inlineButtons()
);
With the current code there is no style with in the message
There's Extra.markdown() and Extra.HTML()
Both ctx.reply() and ctx.replyWithHTML() works, the key point is the Extra.< Something >.markup
Try not mix replyWithHTML() with Extra.markdown() // Doesn't make sense
ANS:
ctx.replyWithHTML(
"<b>show_inline</b>",
Extra.HTML().markup(m =>
m.inlineKeyboard([
m.callbackButton("Single", "single"),
m.callbackButton("Range", "range")
])
)
);
Got my idea from https://github.com/telegraf/telegraf/issues/443
Edit:
For markdown, a single _ is invalid
<b>show_inline\</b> *${show_inline}*
Use Escape \\:
<b>show\\_inline</b> *${show_inline}*
Markup doesn't have a function called markdown()
(I use TS to check the functions they have)
I don't think you can style the inline keyboard text
I'm using ACF Blocks and have the following block.
acf_register_block_type(array(
'name' => 'columns',
'title' => __('Columns'),
'description' => __('For complex multi colomn rows.'),
// 'category' => 'formatting',
'render_template' => get_template_directory() . '/includes/blocks/templates/columns.php',
'enqueue_style' => get_template_directory_uri() . '/includes/blocks/css/columns.css',
'enqueue_script' => get_template_directory_uri() . '/includes/blocks/js/columns.js',
'keywords' => array('rows', 'content', 'column'),
'supports' => array('align' => array('wide', 'full')),
'mode' => 'auto',
));
I need to run some JS when I click on the block in the editor to open it for editing. I don't know if there is a standard way of doing this so I thought I could just use a click event to run my function, but it won't fire. Here is a pic of the block in the DOM.
Block HTML
I added the script following the docs here. (At the bottom there is a "Adding block scripts" example)
Here is my trimmed down JS...
(function($){
var initializeBlock = function ($block) {
$('body').on('click', 'div[data-type="acf/columns"]', function () {
console.log('teeeeeeeest');
});
//... Other JS put here works
}
if (window.acf) {
window.acf.addAction('render_block_preview/type=columns', initializeBlock);
}
})(jQuery);
How come this click function won't fire? Is there another way of doing this?
I am using the default datepicker like this :
echo $this->Form->control(
'created',
[
'label' => __('Start date'),
'type' => 'date',
'id' => 'datetimepicker',
'default' => date('d-m-Y') #Set time for today
]
);
But its kinda ugly:
Is it possible to change it to a proper datepicker with a calendar instead of 3 dropdown fields?
If not is it possible at least to change the order of the fields and the language?
EDIT
After comment suggestions I decided to use jquery datepicker like this:
echo $this->Form->control('created', ['label' => 'Start date']);
<script>
$( function() {
$( "#created" ).datepicker();
} );
</script>
But (probably) because created id is in the model it is overriding it and shows the same default datepicker, I have to change the id in order to work, but then its value is not saved....
If I set the type to text it displays the jquery calendar but the date saved is 0000-00-00 00:00:00
I've had a look through the forum already, but can't seem to find an answer for my specific problem.
So, I've installed a third party 'store locator' plugin on my Magento store but I keep getting a js error message about MissingKeyMapError. I've already applied for an API key - but my problem is I'm not sure where in the code I should put this key.
API Key
I'm in Googlemap.php in the app folder for this particular plugin and I think it should go in here somewhere but not entirely sure.
This is what's contained in Googlemap.php:
class Clarion_Storelocator_Block_Adminhtml_Storelocator_Edit_Tab_Googlemap extends Mage_Adminhtml_Block_Widget_Form
{
protected function _prepareForm()
{
$model = Mage::registry('storelocator_data');
$form = new Varien_Data_Form();
$this->setForm($form);
$fieldset = $form->addFieldset('form_General_Googlemap', array('legend'=>Mage::helper('clarion_storelocator')->__('Google Map')));
$radiusConfigValue = Mage::getStoreConfig('clarion_storelocator_general_setting/clarion_storelocator_display_setting/default_radius');
$fieldset->addField('radius', 'text', array(
'label' => Mage::helper('clarion_storelocator')->__('Radius'),
'note' => Mage::helper('clarion_storelocator')->__('Radius is in miles. If kept blank then default configured radius will be used (System > Configuration > Store Locator)'),
'name' => 'radius',
'value' => $radiusConfigValue,
));
$fieldset->addField('latitude', 'text', array(
'label' => Mage::helper('clarion_storelocator')->__('Latitude'),
'class' => 'validate-number',
'required' => true,
'name' => 'latitude',
));
$fieldset->addField('longitude', 'text', array(
'label' => Mage::helper('clarion_storelocator')->__('Longitude'),
'class' => 'validate-number',
'required' => true,
'name' => 'longitude',
));
$zoomLevelConfigValue = Mage::getStoreConfig('clarion_storelocator_general_setting/clarion_storelocator_display_setting/zoom_level');
$fieldset->addField('zoom_level', 'text', array(
'label' => Mage::helper('clarion_storelocator')->__('Zoom Level '),
'note' => Mage::helper('clarion_storelocator')->__('If kept blank then default configured zoom level will be used (System > Configuration > Store Locator)'),
'name' => 'zoom_level',
'value' => $zoomLevelConfigValue,
));
$data = $model->getData();
if(!empty($data)) {
$form->setValues($data);
}
return parent::_prepareForm();
}
}**
Any help/suggestions would be much appreciated!
Thanks in advance,
Letitia
I also had same issue with this extension just find the xml file under your theme layout mainly named with clarion_storelocator.xml in this find google api path under script tag in line no #32 replace with src="//maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&key=YOUR_API_KEY" async="" defer="defer" type="text/javascript"> under script tag
Remember to put your api key.
Enjoy Coding :)