TinyMCE - default style - css

I would like to know how to select a default class of a CSS for applying it in tinymce, following this example :
tinyMCE.init({
mode : "textareas",
editor_selector : "textarea_number_1",
content_css : "css/custom_content.css",
default-style : 'NameOfMyClass'; <- here is my problem ! Please, help me :)
}
I have 3 texteareas in my page, only one CSS file, but I want to select a different default class for each textarea.
This is only for the display in the TinyMCE editor, in the php post treatment I delete the 'p' tags from the retrieved content.
Thanks for any suggestion, and if I'm not clear enough, I can explain any point of my problem.

The easy way to do this is to use different configurations: http://www.tinymce.com/tryit/multiple_configs.php
The other way is to have one default object holding settings for all editors and before you use tinyMCE.execCommand('mceAddControl', false, 'your_textarea_id'); you merge the default object with another object holding the additional settings. See for more info also Tinymce how to reduce options for multiple instances

Related

2sxc allowing Javascript on wysiwyg editor

We want to move away from DNN html/text and replace with with 2sxc-Content.
But in some pages, it require to have javascript injected into the content.
Exp case: tracking user when clicking the Link on content.
TinyMCE had option for allowing Javascript:
tinymce.init({ ..... extended_valid_elements : "script[language|type|src]" });
But we cannot found any information on 2sxc-documentation for configure it, we need it to allowing insert Javascript to wysiwyg.
Right now, we change the Input Type from wysiwyg editor into string/text, and it doesn't look nice for user.
I believe I know what you're trying to do but it's quite dangerous (XSS, etc.), so let me suggest some alternatives:
Use the Snippet App to just inject JS Snippets where needed
Create a convention placeholder like ENABLETRACKING and make your razor-code replace this when rendering the HTML.
I highly suggest you use the snippet app - see https://2sxc.org/apps/app/snippet-inject-v3-hybrid-for-dnn-and-oqtane

Set custom flag or variable in ghost editor

Is there any sort of easy way or helper that would enable to functionality to set custom variable flags. For example I could set a color variable to "blue" in the editor and I could use handlebars to add the "blue" class an element in that post.
EDIT: I ended up having to use a different CMS. Ghost was made intentionally to be simple and my needs require more customization features.
This is something I have been trying to figure out, but (being new to ghost), I haven't found a clean way to do this. Unlike Wordpress, there is no field for this in the editor (I have checked the documentation, nothing similar), so you have to apply some custom solution. Here are two options:
If the styling you want to apply depends on a tag, e.g. if 'movie'-tagged posts need some special styling, you can just add CSS because the {{body_class}} helper adds all the tags to the <body> element as tag-classname, e.g. tag-movie.
If tags are not your option, you could use client side JavaScript, check some condition in the content and apply the styling. I use this to change color of an svg logo when it is placed on a hero image that happens to have the same color as the logo. This requires the hero image of the post to follow some url convention, like post-heroimg3663-blue.jpg. Then you can add some inline Javascript to the <head> to change the color of the logo. Not so good, but it should work.
UPDATE:
If the second option works for you, you could even consider creating a Handlebars custom helper and running any styling (via adding a class) on the server side.

Joomla css hide date create

I want to hide the date on this page.
I tried to change it inside joomla but I couldn't. It's not an article but a JKit page and there is no such an option.
I used the "inspect element" feature to find the corresponding css file and line (bootstrap.css #554). When I change the element through the "inspect element" menu its working but when I open the css file and change it, it doesn't work.
Any suggestions how I can hide it?
p.meta {display: none;}
That ought to do it. Granted, any other metadata will also be hidden. You should add this to a custom CSS file and not modify core Joomla or extension files.
I find it hard to believe that jKit doesn't have a setting for that. (Update: I see that jKit is very new and lacks good documentation.) Also, a template override might be more to your liking.
Most Joomla components allow you to control things like this in the options for the items and also in the menu options when creating a menu link (or setting the global options to change the default behavior. If this component does not, make either an alternate layout or a template override (depending on whether you want to always change this or just on this one page). If you go into the template manager, template view there is a system in place that will automatically create a copy of the layout and put it in the right location. Just edit that to show what you want.
Ok so I solved by editing the according .php file of the component.
I just removed the echo line of the date.
Nothing else worked.

CKEditor removing class from tag

I've searched here and CKEditor docs under the Advanced Content Filter, but it's really confusing to me.
All I want to do is paste some simple Flexslider code into a CKEditor box, but when it saves, the class statement is stripped, leaving just the ul.
I can find lots of ideas for removing unwanted tags, but nothing to say allow class 'slider' on a ul element.
In my config.js, I tried:
CKEDITOR.editorConfig = function( config )
{
config.allowedContent = 'ul(slider)';
}
Also, tried extraAllowedContent, but no joy. Does anyone know how to do this please?
This is enough:
CKEDITOR.replace( 'editor', {
extraAllowedContent: 'ul(slides)'
} );
You can check it on:
http://jsfiddle.net/6FnRf/
Copy that HTML, paste into editor and switch to source mode:
You can see that slides class was preserved when pasting and this means that it won't be stripped by CKEditor when you load the data (switch between source and WYSIWYG modes what equals to loading data). So if you're losing this class then something outside CKEditor is not working correctly.

tinymce : Remove css styles from style attribute

I am trying to configure tinymce to not allow css styles in style attribute.
I just want to allow one style which is text-decoration. Here is a similar problem
http://tinymce.moxiecode.com/punbb/viewtopic.php?pid=76101 .
The valid_styles option is not present and I dont want to use regexp on my content, coz there got to be some or the other option with tinymce. I searched through the tinymce forums but couldn't find any proper solution.
Can anybody help?
What you need to do is tu use the paste plugin and do some prefiltering when performing copy+paste into the editor.
Use the paste_preprocess setting in your init, using your own cleanup mechanism here:
paste_preprocess : function(pl, o) {
o.content = custom_function_modify(o.content);
},

Resources