Sortable div with TinyMCE inline - tinymce

The code posted by vijayscode (https://stackoverflow.com/questions/34850038/tinymce-4-not-working-with-sortable-jquery-divs/59896435#59896435) doesn't work for me.
TinyMCE doesn't work even before I start ordering. Does sorting work with TinyMCE in when using inline mode?
For example, if I add the inline: true option to this code ... TinyMCE is not loaded immediately
http://fiddle.tinymce.com/33faab
Can you show me a working example on http://fiddle.tinymce.com/

You are really asking two questions so let me try to answer them separately...
 
Inline Mode
In order to use inline mode you need to target a block element (e.g. div) on the page as opposed to a textarea. This is explained in the documentation:
https://www.tiny.cloud/docs/configure/editor-appearance/#inline
If you want to use TinyMCE in inline mode you will need to adjust your HTML accordingly.
 
Sorting
As is discussed in SO post you linked to the act of dragging and dropping parts of the DOM impacts TinyMCE because the underlying DOM element that is linked to TinyMCE technically gets removed from the DOM when you start dragging and then a new element is inserted when you perform the drop. Because of this what you want to do is remove() TinyMCE before the DOM element is removed and then init() again after the new DOM element is placed back into the DOM.
I would not recommend using the mceAddEditor and mceRemoveEditor to do this work. Instead I would:
Call remove() to detach TinyMCE from the DOM element.
Let the drag/drop complete
Call init() on the DOM element after its placed back into the page.
Calling init() after the element is back in the page would allow you to determine the element's class/id/etc and call init() with the correct configuration.

Related

TYPO3 How to create a custom "infobox"?

I am trying to make an "Infobox" with TYPO3.
In my HTML Template i have the Infobox:
<div id="infobox">
<!-- ###infobox### start -->
CONTENT from the backend
<!-- ###infobox### start -->
</div>
...
Now in my Backend, i have a content element, that keeps the content for my Infobox in the Frontend:
What i want to do is: If i disable the content element via the "disable button" in the backend, i want to change the CSS of my #infobox (adding display:none) or if I re-enable it I want to remove the display:none.
I hope I could explain my issue and hope someone can help me.
As far as I understand, you want the disabled flag of the content element to only influence the rendered output, not switch off the rendering.
I fear that this is not easily possible. The disabled column is part of TYPO3’s so-called enable fields, for which checks are added all over the place by the TYPO3 API. Due to this, "hidden" records are usually not even selected from the database, so they are also never fed to the rendering engine.
An alternative would be to use a custom content type with a custom field for your purpose, hide the "hidden" field in the form for that type and put the custom field in its place. This can all be done with standard TYPO3 core mechanisms.
What you cannot avoid however is that somebody will be able to hide/disable the content element from the page or list module. This cannot be prevented as your content needs to live in the same table (tt_content) as the rest of the content—and the settings for enable fields are global per table.
You can use an custom fluid content element
see: http://www.creativeworkspace.de/blog/artikel/eigene-inhaltselemente-im-typo3-cms-62x-und-7x/
or: https://docs.typo3.org/typo3cms/extensions/fluid_styled_content/7.6/AddingYourOwnContentElements/Index.html
or you use a custom layout
TCEFORM.tt_content {
layout {
addItems {
item1 = Name of Layout
}
}
}
after this you can get it with {data.layout} in your template
{f:if(contition:'{data.layout} == item1',then:'display:none')}

Assign Class to CKEditor using a DIV

I am using CKEditor in DIV mode, as compared to an IFRAME and I am attempting to assign a class to the editor itself. I have found where to add it to things within the editor, but not the editor itself. And, I would prefer to not wrap the editor within another DIV to get the effect I want.
I am also using version 4 of CKEditor.
Edit: The following was my questions to Reinmar after he suggested the Shared Space plugin, which at least for now I have chosen not to use.
Edit: In response to Reinmar I have begun using the Shared Space plugin, and do see the potential benefits of using it over a DIV.
With that said I have the following code:
<div id="topSpace"></div>
<textarea name="data[ArchiveQuarter][description]" class="userContent" id="editor1" cols="30" rows="6"></textarea>
At the bottom of the page I have:
<script type="text/javascript">
CKEDITOR.disableAutoInline = true;
CKEDITOR.replace( 'editor1', {
extraPlugins: 'sharedspace',
sharedSpaces: {
top: 'topSpace',
}
});
</script>
It currently creates the toolbar within the top space, and has the textarea, but both of them are disabled. I probably just messed up some of the configuration, but I'm not sure what.
I would greatly prefer it to use the textarea configuration as it is part of a form instead of extracting the data from inline.
You might be interested in using Shared space plugin:
addon page,
sample.
I'm proposing this instead of using div, because I've got mixed feelings regarding divarea plugin. Your original container is wrapped with editor's structure what changes the real context. IMO it's better to use real inline editing + the shared spaces feature to place toolbar and bottom bar where you need them.
Update:
When you're using inline editor, you don't need textarea. Textarea is only a data container which framed or div based editors replace with themselves.
Inline editing is all about editing real existing elements. So this can be your HTML:
<div id="topSpace"></div>
<div class="userContent" id="editor1"><h1>My page</h1><p>Fooo!</p></div>
And JS:
<script type="text/javascript">
CKEDITOR.disableAutoInline = true;
CKEDITOR.inline( 'editor1', {
extraPlugins: 'sharedspace',
sharedSpaces: {
top: 'topSpace',
}
} );
</script>
Note that I used CKEDITOR.inline not CKEDITOR.replace.
And the huge advantage of inline editing is that that <div> is a real element on your page - it is not wrapped (as in div based editor) and its contents is not moved to the frame (as in framed editor). So your content will inherit styles of your page.
The downside is that you need to implement custom data saving, because there's no form. The simplest way is to add a "save" button which clicked will send editor.getData() via AJAX to your server.
BTW. You probably was confused by the fact that in the shared spaces sample 2 editors are framed and 2 are inline. All of them reuses one top space and one bottom space.
BTW2. To make use of inline editing you don't need shared spaces in fact. Then the "floating toolbar" will be used as in here: http://ckeditor.com/demo#inline

Setting values to a form which is not rendered yet

I have a form within a tab. It is second tab so it doesn't render until you open it.
I have tried to submit data to the form with Ext.getCmp('DetailsForm').getForm().setValues(selections[0]); but it says that it is not a function. Probably because it is not rendered yet. What I have to do?
Set the deferredRender config property of your Ext.tab.Panel to deferredRender: false
That will force the rendering of all tabs instead of just active ones. Now the form will be there. As mentioned before I recommend you also to use myTabPanelRef.down('from').getForm().setValues(selections[0]); to access the form.
subscribe to the second tabs show event OR painted event
then look for the form preferably by using .down() method as this wont look with in the entire DOM.
set the values
Use render event of form panel.
Your code will be something like this -
Ext.getCmp('DetailsForm').on('render', function(){
this.getForm().load(selections[0]);
});

jQuery Show/Hide divs using same class not working because of html.push?

The object is to Show-Hide text located under their respective Titles, so a User reads the title and shows or hides text belonging to that title if the User wants to read more.
I tried whatever I could find so far on here, we're talking dynamically setting text coming from a spreadsheet, can't use IDs, must work with .class, must be missing something, I have this piece of code:
... html.push('<div class="comments">' + comment + '</div></div></div>');
but when I try this Show-Hide code nothing happens, even if the error console shows nothing. Basically I want to Show-Hide the .comments class divs with a show-hide toggle link located under each of them. I say them because the .comments divs are reproduced dynamically while extracting text coming from Google spreadsheet cells/row (one .comments div per spreadsheet row). I tried .next, child and parent but they all divorced me so I dunno looks like a dynamic issue. So far I only managed to globally toggle all divs to a visible or hidden state but I need to toggle independantly individual divs.
I prefer a jQuery solution but whatever worked so far was achieved with native javascript.
Note: If a cross-browser truncate function which would append a more-less link after a number of words (var) in each .comments divs would be easier to implement then I would gladly take that option. Thx for any help, remember I am still learning lol!
I have been working on an entirely JS UI project and have brought myself to using $('', { properties }).appendTo(BaseElement) to work best for adding HTML elements because it appropriately manipulates the DOM every time.
If you are having good luck with push elsewhere, however, breakpointing on the line where you do your $('.class').hide() and see what $('.class').length is. Alternately, you can just add alert($('.class').length) to your code if you are unable to breakpoint the code. If it is 0, then your elements have not been properly added to the DOM. Changing to append will ensure they are part of the DOM and therefore targetable via JQuery.

Can I add an element to a RepeatingView without refreshing the latter?

Let's say that I have a RepeatingView with complex elements (for example containing applets). I want to add (or delete) a new element to RepeatingView with ajax, but I don't want to refresh all the elements, because it would cause applets to reload, which I obviously don't want.
I am using wicket 1.4.18
Adding to target only the element that I want to add, does not work, I get:
Component with id (...) was not found while trying to perform markup update. Make sure you called component.setOutputMarkupId(true) on the component whose markup you are trying to update
Take a look at the approach suggested in this Wicket in Action article: Repainting only newly-created repeater items via ajax
The problem when you want to add a new element via AJAX is that there's no root markup tag for the newly added item for Wicket to repaint it.
Quoting the article:
The trick is to give Wicket a tag to repaint via Ajax which can be
accomplished by doing the following:
create the markup tag to represent the new item
add it to the right place in the markup
have Wicket repaint it via Ajax
The code in the article basically prepends some javascript in the ajax submit button's callback that actually creates the markup with the appropriate id for Wicket to be able to replace the element later, when you add it to the AjaxRequestTarget.