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 }}
Related
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
For example I have a textarea and I'm typing this:
<b>Bolded</b> and <i>italic</i> and <b><i>bold+italic</i></b>
as I am typing this to my textarea, the text will become bolded or italic like this:
Bolded and italic and bold+italic
Note that it does not have to be <b> or <i>, it could be **text** and it becomes text, I have no problem on creating the custom syntax, I just need to know if it is possible to update it live in js or jquery?
I was thinking of using (this is in CoffeeScript):
$('div#mdEditor').on 'change', ->
# but no idea how to continue?
UPDATE
It does not have to be textarea though, I am using a contenteditable div so I can parse it on live if needed, again, I have no idea how.
Source: http://jakiestfu.github.io/Medium.js/docs/
Goal: When we paste content in editor allow only <p>, <b>, <a>, and <i> tags only
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 have a status var in a scope of a controller.
Whenever my rest PUT succeeds I append a message to this js variable.
I show it in my template using {{status}}
How can I style this? I tried inserting <br> tags in this text but they just show up as regular text and dont insert a new line. How can I also bold certain tag?
In order for HTML to be rendered, use ng-bind-html
<div ng-bind-html="status"></div>
P.S. Don't forget to import ngSanitize module into your app.
You can also take a look at
https://docs.angularjs.org/api/ng/directive/ngClass
about ng-class directive
Why not use a tag or a tag to wrap your {{status}}, and add to the tag an id or classes with styles?
Im trying to limit the html editing behavior of CKEditor when switching between source and wysiwyg mode. Currently when I switch from source to wysiwyg the editor removes any attributes added to <span> tags. It does not repeat this behavior with any other tags.
I've set CKEDITOR.config.allowedContent = true; , as well as registered allowedContent: 'span[*]', in a custom plugin. The allowedContent setting prevented the editor from removing the tag entirely, but attributes are still stripped away. The entirety of the code I'm trying to perserve is below.
Thanks!
<div class="float_right_caption_drop" style="width: 243px">
<span style="width: 233px;">
<img class="float_img" src="/images/fox.jpg" width="233" border="0" alt="" />
<br />Fox Caption</span></div>
That's because style and class attributes are not handled by Advanced Content Filter as other attributes - they have their specific format in Allowed Content Rules. You can find a detailed description of ACRs in Allowed Content Rules guide. But in short - to allow all attributes, styles and classes you need to set:
allowedContent: 'span[*]{*}(*)'
PS. If you set allowedContent = true correctly, then your spans wouldn't be filtered at all.