I've been wanting to implement site-specific rich text css classes but have come onto an issue. I can't change anything global in this environment. The tutorials require me to change an EditorPage.aspx file. I am not able to do this. Is there any other way to set up site specific css classes for the rich text editor?
I'm on Sitecore 7.5.
Thanks!
This is very similar to a previous Stackoverflow question which I answered about Multtiple RTE Class Styles, which I followed up with a blog post which includes details about loading site specific css styles in Sitecore rich text editor.
Create a new EditorConfiguration class inheriting from Sitecore.Shell.Controls.RichTextEditor.EditorConfiguration and override the SetupStylesheets() method. Then register that new Configuration Type in the 'core' database against your HTML Editor Profile, then set the source of the RTE field in your template to your to your Rich Text Profile.
In your SetupStylesheets() method you need to use an xpath query to get the list of site specific css files:
protected override void SetupStylesheets()
{
string id = WebUtil.GetQueryString("id");
string query = "/*/content//*[##id='" +id+ "']/ancestor::*[##templateid='{root-guid}']//*[##templateid='{style-folder-guid}']/*";
IList<Item> stylesheets = Sitecore.Context.ContentDatabase.SelectItems(query);
foreach (Item item in stylesheets)
{
this.Editor.CssFiles.Add(item["Stylesheet"]);
}
base.SetupStylesheets();
}
Related
I have a MultiLine TextField in ASP.net VB with TinyMCE. A user of our website has a plugin on his computers that insert unwanted HTML code into the TinyMCE TextField.
<p> </p><div id="ConnectiveDocSignExtentionInstalled" data-extension-version="1.0.4"></div>
Is there a way to filter this text and remove it before saving the full textfield content to my SQL database?
One option is to use a TinyMCE node filter to remove the element when it serializes the content inside the editor. Here's an example:
setup: (editor) => {
editor.on('PreInit',() => {
// Create a custom node filter to remove unwanted content when getting content from the editor
editor.serializer.addNodeFilter('div', (nodes) => {
nodes.forEach((node) => {
const id = node.attr('id');
if (id === 'ConnectiveDocSignExtentionInstalled') {
node.remove();
}
});
});
});
}
and a working version of it: https://fiddle.tiny.cloud/RAhaab/1
This works by registering a filter during the initialization sequence to remove the offending div added by the users extension when TinyMCE fetches the content from the editor. More information about the Node API used by the filter can be found here: https://www.tiny.cloud/docs/api/tinymce.html/tinymce.html.node/
Another option, that would depend on your integration, is to use server-side filtering of the content sent. How you do that would differ based on the frameworks, etc... being used.
Came here just to say that this extra code is entered into text areas that process HTML when you have the "Connective Signing Extension" installed.
This extension gets installed when you use an electronic European ID card to log into government or banking services in the EU.
Today, I found their website and reported this behavior via their contact form.
I hope they respond, but I recommend others experiencing the same behavior please contact them and bubble up the bug!
I might be asking the wrong question (I'm not a coder), but I'm attempting to paste HTML and the inline stylesheet into the text-side (HTML-side) of the Wordpress Visual Composer to create an email layout, and the finished product of that is the entire stylesheet written out above the un-styled HTML layout, so I'm assuming inline stylesheets are not supported in this composer.
Some back story for clarity, I'm using the plugin 'Download After Email' which only provides the standard Wordpress visual composer in order to create the email a user receives once they 'sign up'. This seemingly limits me to either jazzing up some text a little bit like I was using Microsoft Word (which isn't sufficient for a brand-focused business), or using raw standalone HTML, which isn't really sufficient for a properly formatted template.
Are there any plugins which may assist in adding CSS styling here that will work once it's displayed externally to the website, i.e. in an email browser?
Judging by the image, you have a regular editor but not Visual Composer, and this is very good because this is the only right direction! You cannot create email templates using the constructor (Visual Composer) since creating an email template requires special old school knowledge (Tables, inline styles) and clean markup. I advise you to take a ready-made template and change it to your own.
Example: https://colorlib.com/etc/email-template/3/index.html
What you need to know:
You need to use html tables
You need to use inline css
Use full src to display images (https://yoursite.wp/.../demo.jpg) the link you can get from the media post
Not recommended:
To use css styles in the header if you are interested in Gmail App support:
https://templates.mailchimp.com/resources/email-client-css-support/
Custom fonts
Visual Composer and any other constructor
Addition:
If you can use the shortcode system I recommend creating a mini plugin for you:
plugins/my-custom-emails [Root directory of new plugin]
plugins/my-custom-emails/my-custom-emails.php [Main php file of plugin]
plugins/my-custom-emails/emails/ [Directory for for all your templates]
plugins/my-custom-emails/emails/template1.html [First demo template]
my-custom-emails.php
<?php
/*
Plugin Name: My emails
Description: My custom emails
Version: 0.1.0
*/
define('MYCELS_DIR', plugin_dir_path(__FILE__));
add_shortcode( 'myemails', 'MYCELS_SHORTCODE' );
function MYCELS_SHORTCODE($attrs) {
if(empty($attrs['id'])) {
return 'ID required';
}
$ID = $attrs['id'];
$PATH = MYCELS_DIR . 'emails/'.$ID.'.html';
if(file_exists($PATH)) {
return file_get_contents($PATH);
} else {
return 'File with '. $ID . ' ID not exists';
}
}
template1.html
<div>
Template
</div>
And using:
[myemails id=template1]
Id = template name
If you want something very customisable this plug-in would work,
https://en-gb.wordpress.org/plugins/wp-html-mail/
It’s very good and would recommend!
With this you have full control over CSS and the HTML also comes with templates and has so much more control for what you need!
I have a blog written in Python + Django.
Before I started use of WYSIWYG editor, to create a blog post preview I manually added custom html tag <post_cut/> and used python slice to show only a preview. It allowed to avoid issues with fixed length for preview or breaking html tags.
Now I added Django-CKEditor and it removes all html tags which "it doesn't understand".
I tried to do something with configuration (allowedContentRules, format_tags and etc.) but no success.
The questions is how to manage "post-cut" and how to do this using CKEditor.
P.S. it would be awesome also to have button for that.
Found the answer by myself.
You need to use extraAllowedContent if you want to add some extra tags.
Also found how to add custom button by creating a custom plugin.
But still looking for good solution that will utilize django-ckeditor
CKEDITOR_CONFIGS = {
'default': {
'extraAllowedContent': {
'post_cut': True,
},
# ...
# (other options)
}
}
I was wondering how do you add link tag/google font to head in yii2.
I want to add the following
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
I have found this documentation but doesn't mention anything about link/adding google font etc
The correct answer is to create a new AssetBundle.
While you can directly place the HTML for the fonts into the of your main.php file, this isn't the Yii way. If you have tried to load jQuery files this way, you might notice odd behavior when directly putting them into the HTML.
For example: Directly place the HTML tag for Bootstrap CDN into the head of your main.php. Then, somewhere in your code try to use the tooltip. You will get an error in your console that tooltip is not a function. - This is because the way Yii puts all your template files together, and at that time, Bootstrap is not available.
While simply loading a font probably won't cause any problems, it is a good idea to do things the way they were intended. Following MVC rules, properly documenting your code, and following the Yii best practices, will go a long way. Not only will you thank yourself a year later when you have to go back into a project, but the next guy will appreciate it. I can't stand going into systems, and seeing stuff thrown everywhere, chincy hacks, and spaghetti code, and no documentation or comments.
Correct Way:
Create a new AssetBundle. In your assets folder, you probably already have AppAsset.php. Duplicate it, and name it FontAsset.php.
Here is an example from my project, using 3 Google fonts.
FontAsset.php
<?php
namespace app\assets;
use yii\web\AssetBundle;
class FontAsset extends AssetBundle
{
public $basePath = '#webroot';
public $baseUrl = '#web';
public $css = [
'//fonts.googleapis.com/css?family=Open+Sans:400,700',
'//fonts.googleapis.com/css?family=Ubuntu:400,700',
'//fonts.googleapis.com/css?family=Oswald:400,700'
];
public $cssOptions = [
'type' => 'text/css',
];
}
In your layout, main.php for example. Right under where you see AppAsset::register($this)
main.php
use app\assets\FontAsset;
FontAsset::register($this);
For every layout file that you want to load those fonts, include the FontAsset.
The AssetBundle is basically a bundle of CSS and/or JS files and options. You could add another one for say JWPlayer say named VideoAsset, and add your JS/CSS files for JWPlayer in it.
Point being, you shouldn't be adding these things directly into the HTML of the layouts directly, as it can cause problems. Let the AssetManager handle them by declaring AssetBundles.
It might save you later down the road!
The best way is to create an asset bundle and add the link to the bundle.
You can find a complete guide here:
http://www.yiiframework.com/doc-2.0/guide-structure-assets.html
You can put it directly in the head of the layout (file views/layouts/main.php)
My team is fixing vulnerability threats from an old jsp application. The problem is it allows (permissioned) users to create a simple home page by putting their html into a textarea and having it render on the page. The problem is xss issues. I have been doing some research and found withing the jsp pages I can use:
fn:escapeXML() from the jstl library to escape any html/xml that is inputted. This is fine for simple form inputs, but for the home page creator, I want to be able to keep simple html but get rid of any harmful scripts or xss vulnerabilities.
My teammate and I are fairly new to fixing xss issues and have been relying on resources we find..
I have come across these resources and am not sure if this will work the way I like after reading through them.
-Which html sanitization library to use?
-https://www.owasp.org/index.php/XSS_%28Cross_Site_Scripting%29_Prevention_Cheat_Sheet
If I use owasp, will this sanitize the html to basic rendering and prevent any scripting from being implemented?
Here is what I currently have in my jsp:
<td class='caption'>
<c:set var="x"><%=system.getName()%></c:set>
Options for ${fn:escapeXml(x)}
</td>
This works and will currently stop any html/xml/script from running but I still would like basic html (titles, paragraphs, fonts, colors, etc) for a simple informational page with html.
According to OWASP
If your application handles markup -- untrusted input that is supposed to contain HTML -- it can be very difficult to validate. Encoding is also difficult, since it would break all the tags that are supposed to be in the input. Therefore, you need a library that can parse and clean HTML formatted text.
There is different HTML sanitizing libraries. The owasp-java-html-sanitizer library is probably a good choice.
You can use prepackaged policies:
PolicyFactory policy = Sanitizers.FORMATTING.and(Sanitizers.LINKS);
String safeHTML = policy.sanitize(untrustedHTML);
configure your own policy:
PolicyFactory policy = new HtmlPolicyBuilder()
.allowElements("a")
.allowUrlProtocols("https")
.allowAttributes("href").onElements("a")
.requireRelNofollowOnLinks()
.build();
String safeHTML = policy.sanitize(untrustedHTML);
or write custom policies:
PolicyFactory policy = new HtmlPolicyBuilder()
.allowElements("p")
.allowElements(
new ElementPolicy() {
public String apply(String elementName, List<String> attrs) {
attrs.add("class");
attrs.add("header-" + elementName);
return "div";
}
}, "h1", "h2", "h3", "h4", "h5", "h6"))
.build();
String safeHTML = policy.sanitize(untrustedHTML);
Read the documentation for full details.