We Keep Coding

tinymce and prism issue

tinymce use prism as default for highlighting code. it wraps sample codes in <pre><code>sample code</code></pre> tags.
<pre><code>
<div> this is a container </div>
</code></pre>
if i need to put a div tag inside this block (for learning purpose) , tinymce will clean it up itself once loading content next time i try to edit that saved content and my div tag will be removed because it is not valid html syntax . how can i preserve my content ?

only wrap content in htmlentities() before hit tinymce
as written here

Summernote content coming with html tags

I am new to summernote text editor. I am trying to get the proper content from the summernote textarea, which infact coming with html tags.
I tried
<textarea class="summernote" id="summernote" ng-model="blog.content" ></textarea>
in my html page and getting the textarea content with,
$("#summernote").code();
it is fetching the content in
html tags. I want the content to be displayed without the html tags.
Thank you for the advice.

Use val() to get all what entered in textarea or text, So :
var content = $("#summernote").val()

in laravel, simple use
{!! $product->small_description !!}
instread of
{{! $product->small_description !}}
in blade file where you want to fetch the data

Use $().text() method to get plain text.
$("<div />").html($("#summernote").code()).text();

After a long time of searching , thought instead of trying that in getting summernote text editor value with plain text, why not try with the angular filter. So searched and got the filter which exactly does what I needed.
Here is the link which did my job.
angularjs to output plain text instead of html

I had the same problem, "fixed" it by using version 0.6.16 instead of the current stable version 0.7. HTML is rendering fine now without extra js code.

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.

setting content between div tags using javascript

I'm trying to set some content in between some div tags on a JSP page using javascript.
currently the div tag on the JSP page looks like this:
<div id="successAndErrorMessages"></div>
I want to fill the content in those div tags using some javascript method so that it will look like so:
<div id="successAndErrorMessages"><div class="portlet-msg-error">This is an error message</div></div>
I know you can go like this:
document.getElementById("successAndErrorMessages").value="someContent";
But that just changes the value of the 'value' attribute. It doesn't fill in content between those div tags. Anyone out there that can point me in the right direction?

Try the following:
document.getElementById("successAndErrorMessages").innerHTML="someContent";
msdn link for detail : innerHTML Property

See Creating and modifying HTML at what used to be called the Web Standards Curriculum.
Use the createElement, createTextNode and appendChild methods.

If the number of your messages is limited then the following may help. I used jQuery for the following example, but it works with plain js too.
The innerHtml property did not work for me. So I experimented with ...
<div id=successAndErrorMessages-1>100% OK</div>
<div id=successAndErrorMessages-2>This is an error mssg!</div>
and toggled one of the two on/off ...
$("#successAndErrorMessages-1").css('display', 'none')
$("#successAndErrorMessages-2").css('display', '')
For some reason I had to fiddle around with the ordering before it worked in all types of browsers.

Adding TinyMCE on the fly

I am using the TinyMCE editor. I have a div element. When an edit link is clicked, I would like to replace it with a TinyMCE editor. I added the mceEditor class in the javascript file that will get executed when the edit link is clicked.But it is not working. TinyMCE editor works when I have a textarea during page load. Can someone please tell me how to do it. Thanks.
<textarea id='answer' rows='25' cols='100' class='span-15 mceEditor'></textarea><br />

I added it using tinyMCE.execCommand('mceAddControl',false,'elementId') and removed it using tinyMCE.execCommand('mceRemoveControl',false,'elementId')

Version 4 of tinymce now uses tinymce.execCommand('mceAddEditor', false, 'elementId'); and tinymce.execCommand('mceRemoveEditor', false, 'elementId');