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
Related
all. As you know that, CKEditor starts with an empty editable body tag like that:
<body contenteditable="true" class="someclasses">
</body>
I am trying to start CKEditor with an empty editable div in this body tag and wrap all content of editor by this div like that:
<body class="someclasses">
<div contenteditable="true">
</div>
</body>
So far, I customized ckeditor.js and achieved to do this when I add a template from the editor but this is not a proper solution because any other event can refresh editor's source code and place an empty body tag again. Also, I have to customize nearly all functions to wrap HTML content by this div tag.
Is there any way to define a default wrapper other than body tag of CKEditor? Thank you.
Edit: To be more clear, I want to define a div inside body section of CKEditor and any content must be placed into this automaticaly like added templates, text, images etc...
There is no easy solution. If you need editable wrapped by some other element maybe consider using inline editor?
I'm using Trumbowyg which is a javascript text editor. My problem is, when I paste text from another site into the editor, it adopts the style of the text from that site. How can I prevent this?
My editor is rendered in my Django template like this:
{{ post.content }}
Is there a template tag I can use to remove HTML? Because the external styling is inline styles, e.g. <span style='font-family: Arial;font-size:30px' etc..?
To remove styles from a formatted paste (styles pasted from clipboard) in Trumbowyg, set the removeformatPasted option to true:
$('.trumbowyg').trumbowyg({
removeformatPasted: true
});
But also keep in mind:
In order to use this option, you need to define a font size in your CSS or use a reset like normalize.
Remove format pasted is not active by default (set to false).
You want to remove HTML tags? If yes just use:
{{ post.content|striptags }}
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.
I've got this HTML-Content. I knew that this is not correct HTML but I can't change it because it's user generated by a WYSIWG-Editor and this mistake was done hundered of times by users:
<div>
<H2 style="COLOR: #0000ff"> <DIV align=left>TEXT<br /></H2></STRONG>
</DIV>
</div><br />
Problem is that the Div AFTER the H2 Tag is closed AFTER the closing Tag from the H2.
What happens is that the H2 autocloses the enclosed DIV and the original closes the Div above.
As I can't change the Sourcecode in those masses of Content-Files, is there a way to prevent this behaviour with CSS???
CSS won't fix this. If this is generated by the editor specifically then you need a new editor. If you're setting content in JavaScript based on the content of an editable region you might be in luck. Browsers auto-close tags as the content is assigned. Say you have JavaScript to handle that content, and you're assigning that HTML to an element. When it's assigned to the element it will add the closing tag, and then when you go to programmatically close the tag at the correct time you'll get the duplicate close. I found when I do this I need to store the HTML into a string var temporarily, and then assign the HTML when it's all complete. If you need a quick lightweight html5 editor I have one at http://www.makrit.net/5edit
I'm working with the TinyMCE editor. I'm trying to remove an empty tag when the user submits content via an Ajax request. The TinyMCE editor preserves empty tags if the user doesn't insert content in the editor area.
<div> </div>
How can I check if the editor has no content via jQuery? Furthermore, I want to remove empty tags present at the end of the content editor: for example when the user inserts a newline at the bottom, because TinyMCE translate newlines into:
<div> </div>
It is also possible in TinyMCE to convert newlines:
<div> </div>
into
<div class="custom_empty"></div>
I wouldn't use a regular form and submit in this case, but get the tinymce editor content using the ed.getContent() - tinymce API function when a special submit button gets pushed.
You then have the chance to cleanup your tinymce editor content by yourself.
Here is some example code i use to do some character replacements due to the fact that we had to use an own font and replace some special chars when they are inside the editor:
content = content.replace(/\u2192/g, '\t').replace(/\u00a0/g, '\u0020').replace(/\u202F/g, '\u00a0').replace(/\u2007/g, '\u2005').replace( new RegExp("\ufeff", "g"), "").replace(/\u00ad/g, '');
In your use case you might consider using a regex to detect empty tags (or tags with a &bnsp ) and replace them with an empty sting.