CKEditor and VideoEmbed plugin - plugins

Can anybody tell me how can I use embedMedia plugin in ckeditor? I am using drupal 6 and WYSIWYG editor. I have added the folder into plugin folder. And added a line on config.js,
config.extraPlugins += (config.extraPlugins? ',MediaEmbed':
'MediaEmbed');
But I have not seen the option on my configuration. Am I doing anything wrong?
Thanks in advance

You need to add it to your config.toolbar_XXX setting in order to have it appear.
Look in your config.js file for something like:
config.toolbar_XXX
CKEDITOR.config.toolbar_XXX
The standard full toolbar config looks like this:
config.toolbar_Full =
[
{ name: 'document', items : [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ] },
{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
{ name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] },
{ name: 'forms', items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton',
'HiddenField' ] },
'/',
{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','-
','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
{ name: 'links', items : [ 'Link','Unlink','Anchor' ] },
{ name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ] },
'/',
{ name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
{ name: 'colors', items : [ 'TextColor','BGColor' ] },
{ name: 'tools', items : [ 'Maximize', 'ShowBlocks','-','About' ] }
];
You would need to add an entry for your plugin in the spot you want the button to appear. Check the plugin readme to see what the button should be called.
If you don't see this in your config.js file, you can add it there and insert the name of the button for the embedmedia plugin. It looks like the name of the button is "MediaEmbed", try adding it next to one of the current buttons (add 'MediaEmbed') and it should be visible in the toobar.
It might be helpful to take a look at the CKEditor docs to gain a better understanding of how the toolbar is customized:
CKEditor Toolbar

Related

I need to disable advanced table options

I am trying to disable the advanced options of the table, cells and rows and I am applying the code according to the documentation but I am not getting results.
my code is as follows:
tinymce.init({
selector: '#mensaje',
height: 520,
language: 'es_MX',
menubar: false,
plugins: ['table', 'lists'],
toolbar: [
{ name: 'history', items: [ 'undo', 'redo' ] },
{ name: 'formatting', items: [ 'bold', 'italic', 'underline' ] },
{ name: 'alignment', items: [ 'alignleft', 'aligncenter', 'alignright', 'alignjustify' ] },
{ name: 'listas', items: [ 'bullist', 'numlist'] },
{ name: 'tablas', items: [ 'table' ] }
],
table_advtab: false,
table_cell_advtab: false,
table_row_advtab: false
});
Those options seem to work when I load your configuration into a TinyMCE Fiddle:
https://fiddle.tiny.cloud/htiaab
What is different in your environment?

Can I set defaultRefinement on hierarchicalMenu in the .js version of instantsearch (not react)

I can see that there is an defaultRefinement option on the react widget hierarchicalMenu, but I can't find it in the .js docs. Is there an equivalent in .js?
If not, is there a workaround?
instantsearch.widgets.hierarchicalMenu({
container: '#ais-filterCatMenu',
defaultRefinement: 'Sofa > Sovesofa',
attributes: [
'categories.lvl0',
'categories.lvl1',
],
...
}),
With Instantsearch.js you can define an initialUiState when initializing the search client.
https://www.algolia.com/doc/api-reference/widgets/instantsearch/js/#widget-param-initialuistate
const search = instantsearch({
// ...
initialUiState: {
indexName: {
query: 'phone',
page: 5,
},
},
});
I found the source of https://instantsearchjs.netlify.app/stories/?path=/story/refinements-hierarchicalmenu--with-default-selected-item on their github repo here
For example you can do something like this
const search = instantsearch({
indexName: 'instant_search',
searchClient,
initialUiState: {
instant_search: { //instant_search is index name
hierarchicalMenu: {
'hierarchicalCategories.lvl0': [
'Cell Phones > Cell Phone Accessories > Car Chargers',
],
},
},
},
});
search.addWidgets([
instantsearch.widgets.hierarchicalMenu({
container: '#hierarchical-menu',
attributes: [
'hierarchicalCategories.lvl0',
'hierarchicalCategories.lvl1',
'hierarchicalCategories.lvl2',
'hierarchicalCategories.lvl3',
],
}),
]);
which will end up looking like this. codesandbox demo

TinyMCE API v4 windowManager.open - What widgets can I configure for the body option?

I would like to fill the body of a modal dialog with custom HTML, generated by Javascript.
The documentation for this method is mostly empty.
I have only found examples for
loading an external file or
adding a textbox.
Is there a documentation for the available types? More specifically, is there a type to add general markup to the body of a dialog from a Javascript variable?
After I beautified the minified version of tinymce, i found that these may be some of the body types for windowManager.open. I'm not sure how to use them all, as all this info was gathered through trial and fail. Since the documentation is really bad, no real info can be gathered. Also here's a link which includes some good info on checkbox.
https://wordpress.stackexchange.com/questions/172853/how-disable-checkbox-when-listbox-value-changes-in-tinymce
It took me an hour or so to check and test all so I really hope this will save you the trouble of doing it yourself.
LE: textbox params: textbox settings table
https://www.tiny.cloud/docs-4x/api/tinymce.ui/tinymce.ui.textbox/
LE2: you can try and browse all the tinymce.ui.* elements mentioned down and check if it has a settings table, I think it may be used as a valid parameter for body if they have it
LE3: this is the old documentation http://archive.tinymce.com/wiki.php/api4:index, since it's more useful than the new one it's the only documentation available now https://www.tinymce.com/docs/api/
{
type : 'listbox',
name : 'listbox',
label : 'listbox',
values : [
{ text: 'Test1', value: 'test1' },
{ text: 'Test2', value: 'test2' },
{ text: 'Test3', value: 'test3' }
],
value : 'test2' // Sets the default
},
{
type : 'combobox',
name : 'combobox',
label : 'combobox',
values : [
{ text: 'Test', value: 'test' },
{ text: 'Test2', value: 'test2' }
]
},
{
type : 'textbox',
name : 'textbox',
label : 'textbox',
tooltip: 'Some nice tooltip to use',
value : 'default value'
},
{
type : 'container',
name : 'container',
label : 'container',
html : '<h1>container<h1> is <i>ANY</i> html i guess...<br/><br/><pre>but needs some styling?!?</pre>'
},
{
type : 'tooltip',
name : 'tooltip',
label : 'tooltip ( you dont use it like this check textbox params )'
},
{
type : 'button',
name : 'button',
label : 'button ( i dont know the other params )',
text : 'My Button'
},
{
type : 'buttongroup',
name : 'buttongroup',
label : 'buttongroup ( i dont know the other params )',
items : [
{ text: 'Button 1', value: 'button1' },
{ text: 'Button 2', value: 'button2' }
]
},
{
type : 'checkbox',
name : 'checkbox',
label : 'checkbox ( it doesn`t seem to accept more than 1 )',
text : 'My Checkbox',
checked : true
},
{
type : 'colorbox',
name : 'colorbox',
label : 'colorbox ( i have no idea how it works )',
// text : '#fff',
values : [
{ text: 'White', value: '#fff' },
{ text: 'Black', value: '#000' }
]
},
{
type : 'panelbutton',
name : 'panelbutton',
label : 'panelbutton ( adds active state class to it,visible only on hover )',
text : 'My Panel Button'
},
{
type : 'colorbutton',
name : 'colorbutton',
label : 'colorbutton ( no idea... )',
// text : 'My colorbutton'
},
{
type : 'colorpicker',
name : 'colorpicker',
label : 'colorpicker'
},
{
type : 'radio',
name : 'radio',
label : 'radio ( defaults to checkbox, or i`m missing something )',
text : 'My Radio Button'
}
Googling for this question I found an answer:
editor.windowManager.open({
title: 'My dialog',
body: [{
type: 'container',
html: "Hello world!"
}]
});
I've found this way of specifying modal dialog body:
var dialogBody = '<p>Whatever you want here</p>';
editor.windowManager.open({
title: 'Dialog Title',
html: dialogBody,
buttons: [{
text: 'Do Action',
subtype: 'primary',
onclick: function() {
// TODO: handle primary button click
(this).parent().parent().close();
}
},
{
text: 'Close',
onclick: function() {
(this).parent().parent().close();
}
}]
});

Simply creating a toolbar in Ext JS

So I have a panel with a top and bottom toolbar that is created within the dockedItems config:
dockedItems: [
Ext.create('AM.view.TopToolbar',{}), // //This line alone breaks the app
{ //Toolbars
xtype: 'toolbar',
dock: 'bottom',
items: [
{ text: 'About', itemId: 'about' },
'-',
{ text: 'Legal', itemId: 'legal' },
...
The code works fine in FF, but breaks in IE9. I think it has to do with the syntax of my create statement, but I cannot find a solution on the forums.
Here's my TopToolbar class:
Ext.define('AM.view.TopToolbar', {
extend: 'Ext.toolbar.Toolbar',
alias: 'widget.toptoolbar',
defaults: { arrowCls: '' }, //Removing black arrow from toolbar items
items: [
{ text : 'Tools',
menu : {
items: [
//rest of my toolbar items and menus
All file structures are correct and working.
Namespace is 'AM'
Application breaks in Internet Explorer-have not tried in Chrome or Safari
I get this Error
: SCRIPT16389: Unspecified error.
ext-all.js, line 38 character 51878
Any ideas?
Cheers!

Multiple plugins in one treegrid (fail) - Extjs 4.1

i have a treegrid and 2 plugin like
plugins: [
{
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
},
{
ptype: 'treefilter',
allowParentFolders: true
}
]
If i use one of them that will working well but if i using both i will get error like
How to fix this error thanks.
You are enclosing your Ext.create in braces {}. Remove those and you should be fine:
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
}),
{
ptype: 'treefilter',
allowParentFolders: true
}
]