We Keep Coding

Redactor Editor automatically strips classes from div

I am using Impervi Redactor as a editor on my website where i set some html generated using xml and xslt. It is driving me round the bend though as it seems to want to change the code to how it sees fit whenever I press the source button. For example if I hit source and create a ...
<div class="myclass">some content</div>
It then for no apparent reason strips the class from the , so when I hit source again it has been changed to...
<div>some content</div>

Try to set allowedAttr like:
$('#redactor').redactor({
allowedAttr: [
['div', 'class'],
]});
even you can allow several attributes like:
['img', ['src', 'alt']]
You can also find list of all available settings for Impervi Redactor

tinymce default applied (written) style

I'm using tinymce to edit some field in a web application.
I need to have an html result (after editing) with some specification.
For example: when I press enter tinymce create a new paragraph (that's ok, and I know this behaviour can be changed, but paragraph is ok).
What I need is a specific style to the paragraph be applied.
I saw there is the possibility to specify content_css, but this is a visual deformation of what is written in the edited html.
my need is when I press enter a paragraph with specific style (margin, alignmnent, ..) must be written directly in the edited html text.
e.g. <P style="margin-top:2px; margin-bottom:10px"> ...</P>
Is it possibile to define specific style to be applied to each html tags ?
I need this because after editing, the html content is used in another part of application, where I can not add additional style configurations.

Did you try that?
...
'content_css' : './path/to/your/styles.css',
...
styles.css
p {
margin-top:2px;
margin-bottom:10px
}
..I saw there is the possibility to specify content_css, but this is a visual deformation..
True, but don't forget that this visual deformation is extracted when you call tinyMCE.activeEditor.getContent().
Though, i'm not sure it will extract your specific styles applied to <p> (untested)
Check also here
UPDATED
Ok, i have another suggestion using HTML parsing using this.
$html = str_get_html("<div>add here your HTML from tinymce editor <p></p></div> test <p></p>");
foreach($html->find("p") as $p) {
$p->style = "margin:2px 0 10px 0";
}
$html_modified = $html;
The $html_modified should contain the <p> with margin applied.

Yes it is possible in tinymce. Just go to Tools -> Source Code of the editor toolbar. Write your HTML code with style there. You can try yourself.

img tag within title attribute

I have read this question: How to add image tag inside title attribute of an anchor tag? and got only one answer: "imposible". However, I saw they can do it in this page: http://truyen.vnsharing.net/Nhom/GoldenSun---yurivn-net
I viewed the page's source and got:
<a href="/Truyen/Citrus-Saburo-Uta?id=7048" title='
<img width="120" height="165" src="http://truyen4.vnsharing.net/Uploads4/Etc/5-1-2013/12456468861citrus_ch01_02-03.jpg" style="float: left; padding-right: 10px" />
<div style="float: left; width: 300px">
<a class="bigChar" href="/Truyen/Citrus-Saburo-Uta">Citrus (Saburouta)</a>
<p>
Nhân vật chính Yuzuko, ngay ngày đầu tiên chuyển trường đã đụng mặt và không mấy cảm tình với Mei - hội trưởng hội học sinh ở trường mới, trong ...
</p>
</div>'>
Citrus (Saburouta)</a>
but the image was not displayed when I put those html code on my website. So how could they do that? Are they using some js script, or something like that?

As other have mentioned you cannot place HTML content inside of "title" attribute - it has to be something custom.
For pure CSS solution (that does not involve JavaScript and mouse-over events) you can place the DIV with tooltip content next to your link, set its style to "display: none" and give your anchors style like
a:hover + div {
display: block !important
}
this will select DIV adjuncted to link and make it visible, but only when you hover over link. You can make it more granular by targeting specific links instead of all of them as the code above.
Here is the demo: http://jsfiddle.net/4WZvL/

To quote the accepted answer to the question you linked to
You need to use custom tooltip look-a-like effect with IMG insdie DIV and on mouseHover event.
They use a custom tooltip look-a-like effect.

The image tag in that title attribute is encoded. Given this, you can place any string you want in the title tag of an anchor, it doesn't mean it's a good idea at all though. You can use javascript to pull the proper image url from any data attribute you set and achieve the same effect so long as you know how to use that url in a logical way. At least that way you would be following some kind of standard and not just abusing the intention of html standards to pull off some fancy tricks.
Juhana answered your question. But to extend the notion, you can easily use data attributes, id's, and classes to set hidden or otherwise referenced html elements for whatever you need. You can hide elements with css and then unhide them with javascript if the desired effect is to pop up that block with the images from the link you provided.
Someone may provide an example if you specify your exact needs and show what you have tried to solve it yourself.

That HTML isn't valid, and although it might be possible it doesn't mean you should do it. Some browsers probably won't display the image correctly.
Use one of the thousands of Javascript tooltip plugins instead. Here's loads for jQuery: https://www.google.co.uk/search?q=jquery+tooltip+plugin

Enable CKEditor4 inline on span and other inline tags

I'd like to know if it's possible and how to enable the CKEditor4 inline/contenteditable editing feature on <span> and other inline elements. This is something which I cannot find in the official docs.
With this markup:
<span id="editable" contenteditable="true"></span>
And either the standard configuration (AutoInline enabled) or this configuration:
<script>
CKEDITOR.disableAutoInline = true;
CKEDITOR.inline('editable'); // ID of the element to edit
</script>
An error is reported: The specified element mode is not supported on element: "span".
The same error is reported for <a> tags.

Hack way to allow support for un supported tags:
CKEDITOR.dtd.$editable.span = 1
CKEDITOR.dtd.$editable.a = 1
Win.

Nope. It is not possible to create editor on inline elements. Here you can find list of accepted names.
However, I checked that after modifying that list I was able to initialize editor on strong element and it even works... Unless you paste or do other unsupported action :).

How can I add an (otherwise) invalid HTML element into TinyMCE

My HTML contains elements like this, because it uses inlines from django-basic-apps.
<inline type="myapp.mymodel" id="4" />
I'm trying to use tinymce to insert one of these into the DOM. On the frontend of the site, these are processed into good code.
In tinyMCE I've added the config:
extend_valid_elements: 'inline[id|ids|type|filter|class|template]',
But anytime I try to insert via:
tinyMCE.execCommand('mceInsertRawHtml',false,'<inline type="myapp.mymodel" id="4" />');
nothing happens,
And if I do:
tinyMCE.activeEditor.getContent()
TinyMCE removes any <inline elements that are in my code.
Furthermore, I would like these elements to display in the tinyMCE via CSS or something, but I'll probably have to hack the DTD.
If that doesn't work a possible solution that I've thought of would be to pre-render the content to something that IS valid:
And then before save, convert that back to what it should be.
Please provide any suggestions for things I should look into.

In the source code of tinymce tiny_mce_src.js search for the string valid_elements and add your elements and attributes directly there.

Use mceInsertContent command instead, and don't use self-closing tags:
tinyMCE.execCommand('mceInsertContent', false, '<inline type="myapp.mymodel" id="4"></inline>');