Good evening,
is it possible to link two contenteditable divs so that if text of div 1 automatically overflows in div 2 and "backflows" in div 1 if deleted again?
As in text editors like word, i want that a new page (div) is created, if the first overflows but also text from higher pages flow back into lower pages if text is deleted. Also with Images and other elements.
Is something like that possible with HTML / CSS / javascript?
I know that in firefox an on overflow event listener is working which doesnt work in other browsers...
Best regards
Daniel
Related
Is there any way to set minimal count of pages to pdf? So my current need looks like:
I have an header on second page that should be shown
First page has content that can overflow to second page
It is not acceptable to have 3 pages
So I need 2 pages in both cases:
First page fits to single page (so I should create second page manually)
First page overflows (at create second page by its content)
Single workaround that I found - overflow by empty (<br/>s) content. But I wanna do it with css.
I've tried to use #page:first but it wouldn't work in common css manner (like #page:first .break-page{...})
I've tried to use #page:first {break-page-after:always} - it wouldn't work...
I have a CKEditor widget resembling a tab-module.
As editables I have defined a span.title and div.content.
When I am in editing mode inside a span.title and then paste something using CTRL+V, the span gets broken and I have two spans. As if it gets divided on whatever position I paste.
When I am in editing mode inside a div.content and then paste something using CTRL+V, the contents of the clipboard are correctly inserted into that div.
Is it because span is an inline-element and div is a block-element and CKEditor doesnt allow pasting into inline-elements?
Can I somehow change this behaviour?
CKEditor allows pasting of block and inline elements (keep in mind that content filtering (ACF) can be used which also affects pasting) so it is probably not the issue in this case.
I would also make sure that the content which you are trying to paste does not contain any HTML which may cause the behavior you described.
If you could provide widget HTML/template or code which you are using I will be glad to investigate this issue in more depth.
I had this issue when trying to have a <cite> element as an editable. Trick was to tweak the CKEDITOR.dtd properties.
// This prevents the pasting from splitting parent element.
delete CKEDITOR.dtd.$removeEmpty.cite;
// This tells the editor to allow editing in this element.
CKEDITOR.dtd.$editable.cite = 1;
I imagine this would affect the behavior of all <cite> elements in any editor currently loaded. Not ideal in all cases for most elements, but for our requirements for a blockquote/pullquote widget, the <cite> element is only allowed inside our <blockquote> elements in any editor.
How can I show documents created with Ckeditor in read only so that they as much as possible like in the editing mode but without having to create the editor for each message?
In my project users can send messages to each other among many other things and they create the messages using Ckeditor. I would to render message threads in readonly mode without having to create the Ckeditor for each message. Doing that would be slow and would consume a lot of vertical space. Another problem with that approach is that removing the toolbar removes formatting. I would like to just have the messages in div tags and add a class to them and then include Ckeditor css file. Or also acceptable would be to have one element with certain class whose children would get the Ckeditor styles. Before putting the messages in the html response I do whitelisting on the server so the docs are safe to put inside for example a div tag.
I solved this by wrapping the message in an iframe element and added dynamically a style element that links to the Ckeditor style sheet. Now the message gets Ckeditor styles and I don't need to create the editor at all in the read only state and the rest of my page unaffected by the Ckeditor styles.
I am using CKEditor 4.4.5.
Users use the text colour icon to change the colour of a word which works fine. When one checks the underlying HTML, it shows:
<p><span style="color:#FF0000">test </span></p>
However when clicks the "source" icon again to return to the standard non HTML view, the colouring has gone, although the underlying HTML is still correct. If you take this HTML and render it in a browser it will work correctly. So it seems that CKEditor is not able to render text colour correctly, unless freshly changed using the text colour icon.
We had customers thinking that the colour had not changed, and then trying to fix the issue in the HTML, which resulted in the total corruption of the HTML due to human error.
Is this a bug, or am I missing something?
Thanks.
As for CKEditor it might so happen that Advanced Content Filter will strip undesired tags / attributes.
If you don't have colorbutton plugin, CKEditor will strip this span (see standard demo).
You have 2 simple solutions:
Add colorbutton plugin.
Simply add to your config:
config.extraPlugins = 'colorbutton';
Add ACF proper rule.
config.extraAllowedContent = 'span{color}';
For more informations about ACF see Content Filtering (ACF).
I have a site with about 10 pages. On each page its the same layout and just the image changes. Is it possible (EG with HTML or AJAX) to animate the image change when you navigate to a new page?
I want the appearance to be as close to a normal jQuery slider as possible:
http://jquery.malsup.com/cycle2/demo/prevnext.php
I haven't used the Cycle 2 plugin as I need each page to have a separate URL. The Cycle 2 plug in does have bookmark-able slides but they use fragment identifiers for each 'page' which social media sharing widgets sometimes ignore. So mysite.com/#page3 is shared as mysite.com, meaning the first not third slide is linked to.
The social media sharing widgets also use meta data from the page which doesn't change per slide as its still the same page.
You can use CSS3 page transitions, remain on one page and just manipulate the URL as you need to. See for example: Change the URL in the browser without loading the new page using JavaScript
Here's a good answer to your question using HTML5 Transitions:
HTML 5 page transitions
Hope this helps!