I'm using HTML purifier in a wysiwyg editor and inline css rule like "margin-left: calc(25%);" is being removed. If the rule is "margin-left: 25%;" it is not removed, however this rule is set automatically by the editor.
I dont know how config the HTML purifier to not remove the margin if it has a calc function.
If it matters, I'm using Yii2 and \yii\helpers\HtmlPurifier https://www.yiiframework.com/doc/api/2.0/yii-helpers-htmlpurifier
that uses HTML Purifier (http://htmlpurifier.org)
I also tried to keep all inline css with following code, but nothing has changed.
$model->msg_email = \yii\helpers\HtmlPurifier::process($model->msg_email, function ($config) {
$config->set('CSS.Trusted', true); // allow any css
$config->set('Filter.ExtractStyleBlocks.TidyImpl', false);
});
Ps.: I tagged csstidy because could be some config in it.(internally used from HTML Purifier)
Related
When I save content through django-tinymce it adds its own inline styles. However I'd like to remove this behaviour and just save the content in plain html. Can you please help me on this issue?
You can use any of tinyMCE configs like this:
Put this to your Django settings.py
(this will tell tinyMCE which elements are allowed`)
DJANGO settings.py
TINYMCE_DEFAULT_CONFIG = {
'theme': "advanced",
'valid_elements' : 'a[href|target=_blank],strong/b,div[align],br,p'
}
And push Clean Button in TinyMCE.
All TinyMCE configs is here:
Try also look at invalid_elements and invalid_styles
P.S. It would have more sense to set:
'invalid_elements': 'p[styles], span'
to remove all styles But It didn't work.
Hope it helps.
You could try writing your own implementation of a save function using
getContent({format: 'text'})
I'm no Djanjo expert but it sounds like the problem is being caused by them, and not TinyMCE itself.
Essentially I'm trying to create a mini-clone of JSFiddle.
That is, I want to allow my users to type some HTML and CSS and see the rendered result in another area of the screen. I'm also looking to use AngularJS.
Does anyone have any advice or experience on how to go about this?
I'm not sure how much Javascript you know/want to use, but you could create 3 frames, for the HTML, CSS and output. In the HTML and CSS frames, put an input text area. Then on the "run" button click, change the inner HTML of the output to the content of the html (within HTML tags) and the css (within Style tags).
(I drafted this before you made the Angular edit, but you can use jQuery with Angular.)
You can do this within a single page, if you're somewhat careful:
You can have only one body tag on a page. So any body styles should apply to the container only, not to the document body. The code below handles this by changing a body tag style to a .body class style, which applies to a div within the container with class body.
Any other styles should also apply to the container's children only. The code below handles this by first appending the "style sheet" textarea to the container, then iterating through the style rules and prepending the container's ID to each selector. (The original rules are deleted and the new rules are inserted.)
The code below works in IE9+ and modern browsers. Working Fiddle.
<div>
<textarea placeholder="Enter HTML here"></textarea>
<textarea placeholder="Enter CSS here"> </textarea>
</div>
<div id="Render"></div>
$('div').first()
.keyup(function() {
$('#Render').html(
'<style>'+$('div:first textarea:not(:first)').val()+'</style>'+
'<div class="body">'+$('div:first textarea:first').val()+'</div>'
);
var ss= document.styleSheets[document.styleSheets.length-1],
rules= ss.cssRules;
for(var i = 0 ; i < rules.length ; i++) {
var rule= '#Render '+rules[i].selectorText
.replace('body','.body')
.split(',').join(', #Render')+
'{'+rules[i].cssText.split('{')[1];
ss.deleteRule(i);
ss.insertRule(rule, i);
}
})
.keyup();
You could create a temporary file with the CSS and HTML provided and then use a Frame to view that file in another section of the page
I just finished creating a site with a few HTML pages and a CSS style sheet. Near the end of the project I decided I would like to change some of the class names.
Example:
In my CSS I have .classname and in my HTML I have quite a few tags linked to that css class using
class="classname"
I would like to change .classname to .class-name in my CSS Style Sheet, however, if I do this I would have to go through thousands of lines of code in my html pages to find and change all the class names from class="classname" to class="class-name"
is there a program that can be used that allows you to change a class name in the css and it will go through all html pages and change it there as well?
I use dreamweaver. Is there a way to do this in dreamweaver?
Note: I have tried using the find and replace options in dreamweaver however this does not fully work.
I'm not able to search "class="classname"" and replace it with "class="class-name" because some tags use "class="example someclass classname test""
I'm not able to search "classname" and replace with "class-name" because "classname" can be found in between <p></p> as content and I do not want it to change here.
Thank you!
I am not familiar with DreamWeaver options, but if you have a preferred advanced text editor (I use NPP) you can use regex.
I would try an expression such as (?<=class="[^"]*)(classname)(?=[^"]*")
And replace that
I am using a spark RichText component to render a html text in my Flex Web Application.
The html text that is given to me is with HTML elements with 'style' attribute having all the styles.
For Example:-
<p style="text-align: left;"><b>Hello</b> <i>this is a sample</i>
<font style="color: #ff0000;">HTML text</font></p><p style="text-align: right;">
<u>to be rerndered in FLEX</u></p>
Now, the Flex spark RichText does not show all these styles applied to the text.
However, if I have HTML with inline property attributes (without 'style' attribute) e.g. :-
<font color="#ff0000">Hello</font>
With the above, I get the desired style.
Any pointers/ solution to get around with this, and render the styles will be appreciated.
Thanks,
Mangirish
Try using <span style="color:#FF0000;">HTML text</span> and see if that makes any difference? I'm not too sure how well Flex renders older HTML tags. Besides, <font> is deprecated anyway.
If your css is fix, you can use StyleSheet Object
Here is a tutorial : http://learnola.com/2008/12/03/actionscript-3-tutorial-using-html-and-css/
If you need more information, just ask it in comments.
Short answer, TLF won't support that kind of styles that I know of, but you can always try to convert it to see what happens:
var textflow:TextFlow = TextConverter.importToFlow(yourHTMLString, TextConverter.TEXT_FIELD_HTML_FORMAT);
However, I have a sneaking suspicion that it won't convert the style properly and probably just ignore it altogether. The only solution I can think of is
Have a custom way to parse the html and get the style out and set it on the textflow or
Have the 'server' html be fixed to be compatible with the flex TLF (inline styles)
I would personally prefer the second option since it's easier to implement on the client.
Simple enough question: I have a string containing HTML that is being handed off to a JEditorPane for user consumption.
Can I attach a CSS file (or string containing CSS rules) to allow for more specific styling of the text?
The HTMLEditorKit per default looks for a file default.css - I'm not sure where, though.
Alternatively, this should work:
StyleSheet ss = new StyleSheet();
ss.importStyleSheet(styleSheetURL);
HTMLEditorKit kit = (HTMLEditorKit)jEditorPane.getEditorKit();
kit.setStyleSheet(ss);
However, note that HTMLEditorKit only supports a limited subset of CSS 1.
Can't you just include a style tag along with the HTML content in setText()?
e.g.
jEditorPane.setText( "<html><head><style type=\"text/css\">...</style></head><body>...");