We Keep Coding

Is it possible in CkEditor or TinyMce to split the toolbar or menu bar from editor?

I am using rich text editor ckeditor in my website which works fine but i want this to look something like a text editor used by blogger like shown in the image below. how is it possible?
this is how i want it to be

CKEditor 4.x you have the sharedspace plugin which allows you anchoring editor toolbar in specified element and use it for all editors you have on your web page.
You can find a demo of sharedspace plugin with source code here: https://sdk.ckeditor.com/samples/sharedspace.html
About moving all toolbar items into a single line. Please open standard or full sample and play around with the Toolbar Configurator. If you remove row separators, you will get single line toolbar. Next you just need to copy the toolbar configuration and paste it into config.js (if you want to use it for all editors) or into editor instance configuration (if you want to use it for a single editor).
NOTE: The available space in that sample is too small to fit all the buttons in a single line but of course on your web page the available space may be wider.

You may be able to get something similar to this if you use TinyMCE's inline mode. https://www.tinymce.com/docs/get-started/use-tinymce-inline/

If you use the inline editing option for TinyMCE you can define a fixed location for its toolbar/menubar:
https://www.tinymce.com/docs/configure/editor-appearance/#fixed_toolbar_container
Based on your picture you can place it in a div that is located at the top of the page and it will appear there as opposed to "attached" the editor.

Ckeditor 4.5.7 strips HTML tags despite config.allowedContent = true

I am using ckeditor 4.5.7 and I want the user to insert arbitrary HTML code into the page. For now the users cannot even insert tags like <h3>test</h3> - the <h3> tags are automatically converted to <p> after the data is saved (this is occurring in a SharePoint page).
As per docs here - http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-allowedContent - and multiple topics here on StackOverflow, I have set this option in config.js to disable content filtering but it seems it has no effect:
config.allowedContent = true;
I also tried listing specific tags in this option, as well as in config.extraAllowedContent, but none of it seems to have any effect. Any tags like <h1> are stripped anyway.
What else could I have missed?

My first thought was to check the CKEDITOR.filter.disallowedContentRules. As noted here, "They have precedence over allowed content rules." However, the Disallowed Content Guide notes: "It is not possible to disallow content when the Advanced Content Filter is disabled by setting CKEDITOR.config.allowedContent to true."
Without knowing more about your config, my recommendation is to use Comandeer's jsfiddle for discovering what your allowed content is.

Turns out the solution was on the SharePoint side. It was SharePoint that was stripping the HTML tags.
The multi-line text field that contained CKEditor had this property:
textfield.SPRichTextMode = SPRichTextMode.Compatible;
After removing this line it worked.

Force ignore Prettify within Redactor Editor?

I am currently looking for a way to implement prettify into my website to allow for code snippets to be posted within the content of pages.
The Problem:
I am using Redactor WYSIWYG and this is causing some problems within the editor (prettify styles the code block within the editor, adding the styled html to the HTML view as well as the submission of the content to the database)
Is there any way to force redactor to ignore the prettify styling when editing content, and only have the styling applied to the final submitted content (when displayed on a page).
Display Example: Prettify on front end only (no styling submitted with the content).
Editor Example: I don't want the editor to be prettified.
Problem Example: This is why I don't want the editor to apply prettify.
The problem with this is, when you come back to edit the article it applies the prettify styling within the content, and then that styling displays as plain text (as part of the content of the code snippet).
Is there any way to force ignore prettify within Redactor or a work around to my problem?
Prettify source: https://github.com/google/code-prettify
Redactor: http://imperavi.com/redactor/

For anyone else interested in using Prettify in conjunction with Redactor on their website, I resolved my issue with the following javascript:
$(document).ready(function() {
if (!$('#redactor').length){
//Redactor Editor Not Found
var x = document.createElement('script');
x.src = 'js/prettify/run_prettify.js?autoload=true';
document.getElementsByTagName("head")[0].appendChild(x);
}
});
On load, the script will look for anything containining id="redactor" and if it is not found, it then loads the prettify script, otherwise if redactor is found (meaning you have an editor on the page), it is never loaded.
This keeps redactor from inheriting prettify styling within the editor and submitting it within your content.

Why doesn't the Facebook "Like" button honor its parameters when inserted via JavaScript?

I just discovered that the iframe version of the Facebook Like button doesn't honor its query parameters when the iframe is created with JavaScript, rather than included directly in the document's HTML.
Please have a look at this jsFiddle that I created:
http://jsfiddle.net/qQsCC/
I generated a Like button at the URL linked above and first included the HTML exactly as it was provided. Then, I broke it down into the JavaScript code needed to create and append an identical element to the DOM.
In the "Result" window, you'll see the HTML version of the button on top, and the JavaScript-created version below. While the value of the src attribute is identical for both (as well as all other HTML attributes), the lower button doesn't appear to honor any of the parameters that I've passed, such as colorscheme or font.
Does anyone know why this is happening, or have any suggestions for how I might avoid this behavior?
The use case here is that I'm creating HTML ads that will include the iframe version of the "Like" button; a requirement is that the ad can only load 50KB of data initially, then up to 1MB after window.onload has fired. Since the "Like" button weighs in over 50KB alone, I need to construct the iframe using JavaScript after window.onload rather than just including the <iframe> element in the ad's HTML.

When you add url using HTML, html entities are automatically decoded. This doesn't nappen in javascript. So you need to decode the url before passing it to javasript eg:
like.src = 'http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2F&send=false&layout=standard&width=450&show_faces=false&action=like&colorscheme=dark&font=arial&height=35';
Hope this helps
Updated JSfidle:
http://jsfiddle.net/qQsCC/1/

Inserting "placeholders" with an FCKeditor plugin to be later replaced with dynamic content

I'm writing a plugin for FCKeditor that's meant to insert placeholders for dynamic content into the HTML. The interface look like this:
Currently, the plugin inserts the following HTML:
<div title="Dynamic Element: E-Cards (sidebar)" class="dynamicelement ecards-sidebar"> </div>
The snippet of Javascript in my plugin that accomplishes the actual insertion of these placeholders is this:
function insertNewDiv() {
var divNode = oEditor.FCK.EditorDocument.createElement('div');
oEditor.FCK.InsertElement(divNode);
oEditor.FCK.Focus();
oEditor.FCK.Events.FireEvent('OnSelectionChange');
return divNode;
}
To make it look nice in the FCKeditor window, I'm applying some CSS to the FCKeditor window, including the following, that writes the title in there:
.dynamicelement:before {
content: attr(title);
}
Anyway, other than the styling, FCKeditor treats these div elements no differently than any other div element in its window. This is not good for me.
I need these placeholders to have the following traits:
Insertion of content into the placeholder is not allowed.
Clicking it should select it as a whole.
Tapping the delete key when it's selected should delete it.
The only way to edit it (apart from deleting it) is to select it, then click the toolbar button to open an edit dialog.
It should always be considered a block-level element
It doesn't matter if the HTML output uses a custom tag name or not (<dynamicelement> instead of <div class="dynamicelement">).
Does the FCKeditor API provide a way to give it command like, "Treat every element that matches the selector 'div.dynamicelement' the following way: ..." ?
Also, is there another FCKeditor plugin that does a similar thing that I can refer to that I might have overlooked in my research?
EDIT: By the way, I already know about CKeditor. I'm using FCKeditor for a couple of reasons: it's working for my CMS, the configuration options I'm using are perfect for my clients (except, obviously, for the placeholder thing), etc..

I solved this by duplicating the code that makes the "Page Break" button work.
While wading through the source code, I learned that FCKeditor has a native method for inserting placeholders.
Create a "fake image" and insert it into the editor DOM. You can style the image however you want.
Using Javascript, connect it to the div in question.
Hide the div (it still appears in the source and in your output though).
While in WYSIWYG mode, you're playing with this fake image, and the changes are being carried over to the div.
There a few bits and pieces that need to be in the plugin to make this work. If you grep for FCK__PageBreak, you will find them all in the source, ready to be copied into your plugin. FCK__PageBreak is the class name of the Page Break's fake image.

You might be able to use ProtectedSource to get what you want:
The editor offers a way to "protect" part of the source to remain untouched while editing or changing views. Just use the "FCKConfig.ProtectedSource.Add" function in the configuration file.
But:
Note that there currently isn't any way to "lock" displayed content in the editor. The content protected with ProtectedSource will actually be invisible during editing. It may be used instead, for example, to protect custom non standard tags or server side scripts. By default, FCKeditor uses it to protect <script> tags from activation during editing.
You might be able to use this together with a placeholder image:
Your plugin adds both the "real" protect tags and the placeholder.
The server strips out the placeholder and does things to the real tag; however, if the placeholder isn't there but the "real" stuff is then delete the "real" stuff.
When editing, the server inserts the placeholder image before sending things off to the browser.
All this seems a little convoluted so you might be better off with a simpler kludge:
Plugin just inserts a placeholder image with a specific class or a fake attribute of your choosing.
Tweak the image plugin to ignore your placeholder.
Replace the placeholder image with the real stuff on the server.
Replace the real stuff with a placeholder image when sending it back to the browser when they're editing the content.
Or, you could use your own custom tag (i.e. <dynamicelement>) and then use ProtectedTags:
In many situations, it is important to be able to switch to the source view in FCKeditor and add a few custom tags, needed for custom processing, or whatever. The problem is that browsers don't know how to handle non standard HTML tags, and usually break the DOM tree when finding them (specially IE).
That combined with some CSS to display <dynamicelement> nicely (say some dimensions and a background image) might do the trick without too much dirty kludging.