I have removed the "Advanced"-tab of my Ckeditor table dialog but when I look at the properties of an existing table then the advanced tab is still there. In my config.js I have this
config.removeDialogTabs = "image:advanced;table:advanced;link:advanced;link:target";
When I create a new table then the "Advanced"-tab doesn't show but when I edit an existing table it is there. I'm using version 4.5.6. Why is a removed tab shown?
Here is a screen recording:
The same dialog is actually defined twice with different names. The first one is called table and the other one is called tableProperties.
So you need to add tableProperties:advanced as well:
config.removeDialogTabs = "image:advanced;table:advanced;tableProperties:advanced;link:advanced;link:target";
Related
so I have this page that contains a card, inside it, there is a button named add. when I click on the add button a modal appears which requests you to input the name of the new card after that the modal contains a close and save button after clicking on save a new card should be generated beside the older one.
so the older card is the older one that has to be clicked in order to add new cards beside it.
does anyone know how I can manage to do all this?
i know how to create a card and modal but how to autogenerate a new card is what i dont know.
We could use some code examples to see how this works, but this should be simple using jQuery.
You could take a look at this and see if it helps: https://codepen.io/nickunjchopra/pen/zYZOGop
jQuery(document).ready(function() {
jQuery('.new-card').click(function() {
jQuery('body').append(card);
});
});
.new-card is the button used to create new cards; and I've defined var div in the JS as markup for the new card.
Clicking on a bunch of buttons of my app allows to create different customized instances of CKEditor, furhermore inside the textarerea is created a grid whith layoutmanager plugin. The created editor is resides inside the body of a bootstrap modal.
When one of the buttons is clicked for the first time everything works fine, and i can get the correct start element and the editable area can be accassed properly from my app.
When i dispose the modal i destroy also the instance of CKEditor and the associated view (the app involves also Backbone.js) is removed:
$('#tallModal').one('hidden.bs.modal', function(e) {
if (this.ckeditor) {
CKEDITOR.instances[this.model.get("uniqueId")].destroy();
this.ckeditor = null;
}
this.view.close();
}.bind(this)).modal('hide');
this.ckeditor is created as follows:
this.ckeditor = $("#"+ this.model.get("uniqueId")).ckeditor(config.rte.ckeditor, $deferred.resolve).editor;
When i click another button the modal displays the correct editor instance but when this line in my code is reached (this._editor is an alias of this.ckeditor):
return this._editor.getSelection().getStartElement();
the following error is raised:
TypeError: Cannot read property 'getStartElement' of null
Debugging the code i discovered that when the editor is destroyed and then created again the editor object(this._editor) has the property status="destroyed", while when everything is working properly status="ready"
I tried this solution CKEditor issue with Bootstrap modal and many others with no luck, the line this.$element.trigger( 'focus' ); is called anyway.
I found myself an answer:
this._editor = CKEDITOR.instances[this.model.get("uniqueId")];
I had this line inside the initialize method of a Backbone.View but in this way i only get the reference to the destroyed instance.
The editor instance inside this._editor must be "refreshed" each time i want to do something with the result of:
return this._editor.getSelection().getStartElement();
I've got a rails app using bootstrap with a form page that has the option to add additional form fields. The tutorial from this Railscast episode heavily influenced this form page add fields feature. I have a need to watch the add fields so that I can hide a warning panel in the new well created. Here is the code that will not work(in coffeescript):
$('#classifications_forms').on 'change', (event) ->
container = $('.classifications_form').last()
$('#premium-divide', container).hide()
Here is the code in jquery:
$('#classifications_forms').on('change', function(event) {
var container;
container = $('.classifications_form').last();
return $('#premium-divide', container).hide();
});
I have tried an on click event for the add fields button, but it's late in the event watching as it will not hide the panel. If I hit the button a second time, it will hide the panel on the previously created well, so I know the code was working to hide the panel. My thinking is to hide the panel on the last well created, and I thought that a change on #classifications_forms would give me the event needed to hide the last well, but I guess its missing something on the event. What is missing above?
Here is a jsfiddle demonstrating the problem.
Because I was using bootstrap, I found a class to apply to the panel which took care of my problem:
.hidden
All,
I am working on a Django application that uses the TinyMCE editor and the tables plugin for TinyMCE. Users have requested custom table classes (let's say some should be red and others should be blue).
This is easy enough to do in CSS. And I can override the HTML to do this. But there is a combobox in the TinyMCE table editor dialog box that says "class" and if I type something into this it shows up in the class attribute of the table.
My question is how can I have custom classes automatically appear in that combobox?
I've noticed that the table plugin's init() function has the line
addClassesToList('class', "table_styles");
But I can't work out where "table_styles" are defined.
Any suggestions?
P.S.
I've seen in the documentation that I can just pass "table_styles" to the init() function. However, that function doesn't seem to ever explicitly get called. Is there a way I can add this dynamically?
in tables.js add the following code:
function init() {
settings = tinyMCE.settings;
settings["table_styles"] = "make stuff red=red;make stuff blue=blue;" + settings["table_styles"];
tinyMCE.settings["table_styles"] = settings["table_styles"];
I'm currently building an application using Sencha Touch. We have a certain Carousel on a page that contains multiple items. Upon clicking a button on a different panel, certain items are added and removed to the panel.
The problem: all works as planned for the first click, but clicking upon clicking the same button again, the functionality stops working and the Carousel display turns blank, with none of the items visible.
Below is the handler for the buttons that change the content of the carousel itemsCarousel. The function adds itemPanels[ b.getBadgeText() ] to the itemsCarousel's items. For the first four clicks or so, this works great. After around then, when I click a button, all the items in the Carousel vanish, and I cannot add or remove any more content, even invoking the Carousel manually from the console.
handler: function(b, e) {
itemsCarousel.insert(1, itemPanels[ b.getBadgeText() ]);
itemsCarousel.doLayout(); itemsCarousel.doComponentLayout();
itemsCarousel.setActiveItem(1);
itemsCarousel.remove(0, false);
}
Things I have attempted:
Changing the order by inserting the item at slot 0, setting 0 active, and then removing 1.
Putting javascript breakpoints on each of the lines, seeing where the carousel goes blank. Sometimes it occours at the .insert() statement, sometimes at the .remove().
Doing all this manually, from the console.
Tweaking the autoDestroy parameter in the .remove() call (as seen above) and in the declaration of itemsCarousel.
If you need more code I can post whatever you think may be relevant, I didn't want to pollute this thread with excess code. Thanks for your help!
Edit: If anyone knows another way to reproduce the same functionality, I am open to that as well. I am thinking perhaps creating a dummy holder Container with one item, a carousel, and deleting the entire carousel and re-adding a brand new (with the new items) one upon the button click?
Well, I figured out how to reproduce the functionality using a different method.
I built multiple carousels, each containing the panels I wanted, and then had a root panel that simply sets the active carousel based on button presses. For example, the hierarchy looks like this now:
rootPanel
{
carousel[0]
{
panel1
panel2
}
carousel[1]
{
panel3
panel4
}
...
}
and I perform rootPanel.setActiveItem(x) to display the new carousel.