Develop Reference

fillEmptyBlocks config in CKEditor 4.6.2 does not help manipulate insertion of <br> tags in empty DIVs

Problem 1: I consume the following plugins as part of a customized build of the basic version of CKEditor 4.6.2 - basicstyles, dialogui, dialog, clipboard, button, toolbar, enterkey, floatingspace, undo, divarea. The empty DIV container blocks have <br> elements added by CKEditor which I am trying to prevent.
The config file looks like this -
CKEDITOR.editorConfig = function(config) {
config.title = false;
config.allowedContent = true;
config.fillEmptyBlocks = false;
// Toolbar groups configuration.
config.toolbar = ...
};
fillEmptyBlocks = false; did not prevent CKEditor 4.6.2 from inserting the <br> elements. I tried doing what https://stackoverflow.com/a/34849579 suggests by having all the line-break rules set to FALSE and I could not get around the problem.
I tried it with the whole basic version of CKEditor 4.6.2 and the released version of 4.5.11 and this still occurs in them. However, this problem does not exist in CKEditor 4.1.3 and 4.4.0. Am I missing something as part of a config or should I have any additional plugin to not have this issue with 4.6.2?
Problem 2:
Pressing backspace in an empty div block removes the div block from the DOM. This again happens with 4.6.2 and 4.5.11 and not on 4.1.3 or 4.4.0, is there a config that I could be missing?
Edited: <br> tags are being inserted despite having fillEmptyBlocks set to false in all the versions post CKEditor 4.4.7, it does not happen with 4.4.6. Looking at the release notes, http://dev.ckeditor.com/ticket/12735 is the change that has gone into 4.4.7 Is there another way to fix this then?

I have developed similar kind of WYSIWYG editor using CKEDITOR 4 where everything is working fine although I used ckeditor.replace
However, I uploaded it in the github. So, you can refer there and compare and fix your code if you want.
Click here for the github project.
Please ask me if you face any problems!!

Please try this code it is working for me:
For removing br on load
$('your_id').ckeditor();
CKEDITOR.on('instanceReady', function() {
$('div.application').find('br').remove(); // remove br tag added on empty divs
});
for removing &nbsp use this in destroy function:
for(CKname in CKEDITOR.instances) // delete multiple instances of ckeditor
{
CKEDITOR.instances[CKname].destroy(function(){
$("your_id").html(function (i, html) {
return html.replace(/ /g, ''); // remove
});
})
}

HTML carousel/slide show on apples website

I found this carousel on apples website where it has the 3 radio presenters, and was wondering how i could create this effect or if there is a carousel like this available.
I did some research and found a similar stackoverflow question which links to slick.js so I am wondering if apple use slick and have customized it to do this or they found a new carousel that makes this effect occur.
From inspecting the carousel i found the class zine-gallery-content but searching that didn't help.
Does anyone know how i can make this carousel? It is also responsive.

It looks custom to me. They've called it 'ac-gallery' within their code. They tend to prepend things with ac-, ac-analytics, etc.
I'll let you know how I figured this out. I inspected the slider and was looking for a wrapper class or ID with the words 'gallery', 'carousel', 'slider' or something similar. I noticed the carousel contained the ID #zine-gallery. I then looked for one of their javascript files that looked like the primary file where most of the code is compiled to. I found a file called main.built.js. I opened this file and searched for zine-gallery, which did exist. I then opened my web inspector, opened the "Sources" tab and found main.built.js. I then clicked the "Pretty Print" button (The {} icon next to the line and column number. This formats the uglified javascript and allows you to read it more easily.
The following leads me to believe it's custom:
this.gallery = B.create({
id: this.galleryId,
el: this.wrapper,
section: this,
model: this.slides,
triggerSelector: this.triggerSelector,
trigger: {
events: ["mouseover", "click"]
}
})
Usually a plugin would include it's name in the creation process. Also, right below the following gallery methods are defined:
C._removeActiveStates,
C._animateNewStation,
C._blendToNewBackgroundColor,
C.activate,
C.deactivate,
C.animateIn,
C.onRequestAnimationFrame,
C.onScroll,
C.onResize, etc.

Share Quill toolbar across multiple editors

With the great Quill rich text editor for Javascript I'm trying to make two or more editors share the same toolbar.
I suppose (from documentation) that this is not possible right away at the moment, so I'm trying to "simulate" this by adding the toolbar module through API on the editor that has been clicked as the latter:
// this uses jQuery
$editorTag.click(function(e){
var tag = e.target;
var editor = getEditorByTag(tag);
if( editor )
editor.addModule('toolbar',{container:'#toolbar'});
});
It seems to work, but I suspect that Quill doesn't like adding many times the same module over and over on the same object since eventually it spits:
(node) warning: possible EventEmitter memory leak detected. 11
listeners added. Use emitter.setMaxListeners() to increase limit.
quill.js (row 4727)
So is there a way to remove a previously added module? Something like:
// installs editor
var editor = new Quill('#editor');
// adds toolbar module
editor.addModule('toolbar',{container:'#toolbar'});
// removes just added toolbar module
editor.removeModule('toolbar');

I encountered the same problem the other day, and have found a solution that works for our usecase. This is basically what I've done:
I'm creating one instance of Quill, using a custom toolbar positioned
at the top. The editor element is placed in a temporary, hidden,
container. When the user double clicks any of the three text
containers (Editables), the editor element will be transplanted form
the temporary container to a new location inside the Editable. If a
user hits the escape key, the Editable will be deactivated, moving the
editor element back to the temporary container.
You can test it here: https://codesandbox.io/s/hungry-pine-o8oh9?file=/src/App.js
GitHub repo: https://github.com/maxfahl/Quill-Edit-Multiple
Feel free to use the code however you'd like.

A solution that keeps the history of your Quills is to extends Toolbar and register it has a module
class ToolbarAlt extends Toolbar {
resetToolbar () {
this.container.childNodes.forEach(el => {
const clone = el.cloneNode(true);
el.parentNode.replaceChild(clone, el);
});
this.container.childNodes.forEach((input) => {
this.attach(input);
}, this);
}
}
Quill.register('modules/toolbar', ToolbarAlt, true);
Then call your Toolbar with the quill.getModule('toolbar') when you go focusin one editor

inject into iframe from wysihtml5 text area

I've turned a simple text box into one with editing features using the wysihtml5 editor. The project necessitates that the text box inject its html into an iframe. Previous to installing the editor, things were working great. Now, the jQuery for the iframe injection no longer works, since the editor has converted the textarea to an iframe. Any ideas on how I might convert the following jQuery to work with the editor?
(function() {
var frame = $('iframe#preview'),
contents = frame.contents(),
body = contents.find('body'),
styleTag = contents
.find('head')
.append('<style>*{font-family:arial}h2{color:#CC6600}</style>')
.children('style');
$('textarea').focus(function() {
var $this = $(this);
$this.keyup(function() {
body.html( $this.val() );
});
});
})();
I know that something needs to change in the $('textarea').focus call, I just don't know what. I'm new to the javascript/jQuery world and have tried a few possibilities, but so far haven't been able to figure this one out.
Many thanks for any insight.

As i know (probably i know what im talking), you cannot apply css styling to iframes outside of iframe (from parent document). You should TRY to embed styling inside iframe. Its because browser styling works with document, but iframe its another document and must ship with own css styling. Hope this helps

Inline Editing But Instance Doesn't Exist

I have my own custom non-jQuery ajax which I use for programming web applications. I recently ran into problems with IE9 using TinyMCE, so am trying to switch to CKeditor
The editable text is being wrapped in a div, like so:
<div id='content'>
<div id='editable' contenteditable='true'>
page of inline text filled with ajax when links throughout the site are clicked
</div>
</div>
When I try to getData on the editable content using the examples in the documentation, I get an error.
I do this:
CKEDITOR.instances.editable.getData();
And get this:
Uncaught TypeError: Cannot call method 'getData' of undefined
So I figure that it doesn't know where the editor is in the dom... I've tried working through all editors to get the editor name, but that doesn't work-- no name appears to be found.
I've tried this:
for(var i in CKEDITOR.instances) {
alert(CKEDITOR.instances[i].name);
}
The alert is just blank-- so there's no name associated with it apparently.
I should also mention, that despite my best efforts, I cannot seem to get the editable text to have a menu appear above it like it does in the Massive Inline Editing Example
Thanks for any assistance you can bring.
Jason Silver
UPDATE:
I'm showing off my lack of knowledge here, but I had never come across "contenteditable='true'" before, so thought that because I was able to type inline, therefore the editor was instantiated somehow... but now I'm wondering if the editor is even being applied to my div.
UPDATE 2:
When the page is loaded and the script is initially called, the div does not exist. The editable div is sent into the DOM using AJAX. #Zee left a comment below that made me wonder if there is some other command that should be called in order to apply the editor to that div, so I created a button in the page with the following onclick as a way to test this approach: (adapted from the ajax example)
var editor,html='';config = {};editor=CKEDITOR.appendTo('editable',config, html );
That gives the following error in Chrome:
> Uncaught TypeError: Cannot call method 'equals' of undefined
> + CKEDITOR.tools.extend.getEditor ckeditor.js:101
> b ckeditor.js:252
> CKEDITOR.appendTo ckeditor.js:257
> onclick www.pediatricjunction.com:410
Am I headed in the right direction? Is there another way to programmatically tell CKEditor to apply the editor to a div?
UPDATE 3:
Thanks to #Reinmar I had something new to try. The most obvious way for me to test to see if this was the solution was to put a button above the content editable div that called CKEDITOR.inlineAll() and inline('editable') respectively:
<input type='button' onclick=\"CKEDITOR.inlineAll();\" value='InlineAll'/>
<input type='button' onclick=\"CKEDITOR.inline('editable');\" value='Inline'/>
<input type='button' onclick=\"var editor = CKEDITOR.inline( document.getElementById( 'editable' ) );\" value='getElementById'/>
This returned the same type of error in Chrome for all three buttons, namely:
Uncaught TypeError: Cannot call method 'equals' of undefined ckeditor.js:101
+ CKEDITOR.tools.extend.getEditor ckeditor.js:101
CKEDITOR.inline ckeditor.js:249
CKEDITOR.inlineAll ckeditor.js:250
onclick
UPDATE 4:
Upon further fiddling, I've tracked down the problem being related to json2007.js, which is a script I use which works with Real Simple History (RSH.js). These scripts have the purpose of tracking ajax history, so as I move forward and back through the browser, the AJAX page views is not lost.
Here's the fiddle page: http://jsfiddle.net/jasonsilver/3CqPv/2/

When you want to initialize inline editor there are two ways:
If element which is editable (has contenteditable attribute) exists when page is loaded CKEditor will automatically initialize an instance for it. Its name will be taken from that element's id or it will be editor<number>. You can find editors initialized automatically on this sample.
If this element is created dynamically, then you need to initialize editor on your own.
E.g. after appending <div id="editor" contenteditable="true">X</div> to the document you should call:
CKEDITOR.inline( 'editor' )
or
CKEDITOR.inlineAll()
See docs and docs.
You can find editor initialized this way on this sample.
The appendTo method has different use. You can initialize themed (not inline) editor inside specified element. This method also accepts data of editor (as 3rd arg), when all other methods (CKEDITOR.inline, CKEDITOR.replace, CKEDITOR.inlineAll) take data from the element they are replacing/using.
Update
I checked that libraries you use together with CKEditor are poorly written and cause errors you mentioned. Remove json2007.js and rsh.js and CKEditor works fine.

OK, so I have tracked down the problem.
The library I was using for tracking Ajax history and remembering commands for the back button, called Real Simple History, was using a script called json2007 which was intrusive and extended native prototypes to the point where things broke.
RSH.js is kind of old, and I wasn't using it to it's full potential anyway, so my final solution was to rewrite the essential code I needed for that, namely, a listener that watched for anchor (hash) changes in the URL, then parsed those changes and resubmitted the ajax command.
var current_hash = window.location.hash;
function check_hash() {
if ( window.location.hash != current_hash ) {
current_hash = window.location.hash;
refreshAjax();
}
}
hashCheck = setInterval( "check_hash()", 50 );
'refreshAjax()' was an existing function anyway, so this is actually a more elegant solution than I was using with Real Simple History.
After stripping out the json2007.js script, everything else just worked, and CKEditor is beautiful.
Thanks so much for your help, #Reinmar... I appreciate your patience and effort.