SilverStripe wysiwyg style constraints - php

Is there any way to prevent certain custom wysiwyg styles to be applied to certain HTML elements?
Suppose I have two styles called "red" and "framed". One colours text red and the latter puts a frame around photos.
Can I control which styles are available when highlighting text or an image? For example, I want the style "framed" not to be available when highlighting text and the style "red" not showing in the styles dropdown menu when highlighting an image.

Tinymce configuration is kinda tricky in silverstripe, though it looks easy once you got it running.
Jonom wrote down some configs and put it on Github, called tinytidy module, there you might find a possile solution. So best is to try out this module as it adds some custom css to the editor.
Copied from there, put in your /mysite/_config.php:
$formats = array(
// Define the styles that will be available in TinyMCE's dropdown style menu
// * Use 'selector' to specify which elements a style can be applied to
// * See Headings example below for explanation of different settings
// * Using 'classes' allows a class to be combined with others while 'attributes'=>'style' removes other classes before applying
// Text styles
array(
'title' => 'Selected text'
),
array(
'title' => 'highlight red',
'classes' => 'red',
'inline' => 'span',
'selector' => 'i,em,b,strong,a'
),
array(
'title' => 'Images',
),
array(
'title' => 'Put a frame around a photo',
'attributes' => array('class'=>'framed'),
'selector' => 'img'
)
);
//Set the dropdown menu options
HtmlEditorConfig::get('cms')->setOption('style_formats',$formats);
hope that helps, wmk

Related

Changing CSS by checking a checkbox - Redux Framework

I'm building a theme options system to my theme using the Redux framework.
I want to append a css property (background-image) when the user press specific button in a "Button Set" field.
The code:
array(
'id' => 'opt_change_menu_button',
'type' => 'button_set',
'title' => __('Change Menu Button', 'faster'),
'options' => array(
'yes' => __('Yes', 'faster'),
'no' => __('No', 'faster'),
),
'defualt' => 'no',
),
When the user press YES, I want, in addition to what already happen (some other options appear in the bottom), to append a CSS property in the front end ( background-image: none), that overwrites the other properties which relate to the chosen selector.
In some other fields it is possible using the "output" value, but in that case I didn't fiend it possible, after hours of struggling.
Thanks in advance!
Lead dev of Redux here. You'll have to append your own JavaScript for in-panel changes via JS. Luckily, it's quite easy. https://docs.reduxframework.com/core/advanced/custom-panel-css/

Wordpress Customizer text area is changing my outputted HTML

I have created a wordpress theme, in the wordpress theme customizer I have added a couple of text areas where a user can input their own CSS or JS to be added to the head.
The placement of the text area is fine, i.e. when a user adds code it is displayed on the right place in the page, however it is being formatted differently.
For example, I add the following code to one of the textareas:
jQuery(document).ready(function($){
$('full_page').css('min-height',($(window).height()-195));
});
And in my theme it is outputted like this:
jQuery(document).ready(function($){
$('full_page').css('min-height',($(window).height()-195));
});
As you can see, the ' is being replaced with '
Here is the code in my customizer.php file to create the text area:
$controls[] = array(
'type' => 'textarea',
'setting' => 'js',
'label' => __( 'Custom JS', 'skizzar_bootstrap' ),
'subtitle' => __( 'You can write your custom JavaScript/jQuery here. The code will be included in a script tag appended to the top of the page.', 'skizzar_bootstrap' ),
'section' => 'advanced',
'priority' => 6,
'default' => '',
);
Is there a way to stop this formatting from happening?
Wordpress is HTML encoding all of the special characters. If the user enters HTML, then the result should be fine. It is not intended for Javascript.
Allowing the user to enter Javascript like this a big security hole. The script could do anything, not necessarily all pleasant.
If you really want to do this and it's your code echoing the Javascript in your theme, run it through htmlspecialchars_decode before you display it. That PHP function will convert the HTML codes back to characters.

Wordpress - Adding to Redux Theme Options using Child Theme

I am using a wordpress theme that has it's own framwork which is based upon redux framework I think. I am modifying this theme using a child theme. I want to add to the Theme Options in the backend and I found a function within the files of the parent theme that seems to be exactly what I need:
/*
*
* Custom function for filtering the sections array. Good for child themes to override or add to the sections.
* Simply include this function in the child themes functions.php file.
*
* NOTE: the defined constansts for URLs, and directories will NOT be available at this point in a child theme,
* so you must use get_template_directory_uri() if you want to use any of the built in icons
*
*/
function add_another_section($sections){
//$sections = array();
$sections[] = array(
'title' => __('A Section added by hook', 'swift-framework-admin'),
'desc' => __('<p class="description">This is a section created by adding a filter to the sections array. Can be used by child themes to add/remove sections from the options.</p>', 'swift-framework-admin'),
// Redux ships with the glyphicons free icon pack, included in the options folder.
// Feel free to use them, add your own icons, or leave this blank for the default.
'icon' => trailingslashit(get_template_directory_uri()) . 'options/img/icons/glyphicons_062_attach.png',
// Leave this as a blank section, no options just some intro text set above.
'fields' => array()
);
return $sections;
}
//add_filter('redux-opts-sections-twenty_eleven', 'add_another_section');
I have added this function to my child theme's functions.php and uncommented the add_filter. However, this does not seem to work and no new section has been added.
I came across this discussion elsewhere which suggests the name of the function needs to be changed (I was getting the same error mentioned on there). I have done that and it still won't work.
Here is what I have in my child theme functions.php
function add_another_section_bl($sections){
$sections = array();
$sections[] = array(
'title' => __('A Section added by hook', 'swift-framework-admin'),
'desc' => __('<p class="description">This is a section created by adding a filter to the sections array. Can be used by child themes to add/remove sections from the options.</p>', 'swift-framework-admin'),
// Redux ships with the glyphicons free icon pack, included in the options folder.
// Feel free to use them, add your own icons, or leave this blank for the default.
'icon' => trailingslashit(get_template_directory_uri()) . 'options/img/icons/glyphicons_062_attach.png',
// Leave this as a blank section, no options just some intro text set above.
'fields' => array()
);
return $sections;
}
add_filter('redux-opts-sections-twenty_eleven', 'add_another_section_bl');
I wasn't sure if the filter name 'redux-opts-sections-twenty_eleven' needs editing as it mentions the twenty eleven theme. I have tried it with different theme names at the end instead of twenty_eleven and that had no effect.
Any help would be greatly appreciated! On a side note I have been able to accomplish adding new options to Theme Options by copying over the whole framwork folder into my child theme and defining the path to the framework in the child theme's functions.php. I just felt that there should be a much slicker, neater way to achieve this and I thought that function sounded perfect.
Many thanks.
Lead dev of Redux Framework here. This solution only works if you're using Redux Framework 3.1+. If you have an older version, install the Redux Framework plugin and it will override the version inside your theme.
First go to the current option panel. Open up a javascript console (use chrome or firefox) and type: redux.args.opt_name. That will echo out a name. Copy that and paste it into this function replacing OPT_NAME with the name that was echo'd out:
function add_another_section_bl($sections){
$sections = array(); // Delete this if you want to keep original sections!
$sections[] = array(
'title' => __('A Section added by hook', 'swift-framework-admin'),
'desc' => __('<p class="description">This is a section created by adding a filter to the sections array. Can be used by child themes to add/remove sections from the options.</p>', 'swift-framework-admin'),
// Redux ships with the glyphicons free icon pack, included in the options folder.
// Feel free to use them, add your own icons, or leave this blank for the default.
'icon' => trailingslashit(get_template_directory_uri()) . 'options/img/icons/glyphicons_062_attach.png',
// Leave this as a blank section, no options just some intro text set above.
'fields' => array()
);
return $sections;
}
// In this example OPT_NAME is the returned opt_name.
add_filter("redux/options/OPT_NAME/sections", 'add_another_section_bl');
Good luck!
** UPDATE **
Also with the Redux API you can easily add a new section that way.
Redux::addSection(array(
'title' => __('A Section added by hook', 'swift-framework-admin'),
'desc' => __('<p class="description">This is a section created by adding a filter to the sections array. Can be used by child themes to add/remove sections from the options.</p>', 'swift-framework-admin'),
// Redux ships with the glyphicons free icon pack, included in the options folder.
// Feel free to use them, add your own icons, or leave this blank for the default.
'icon' => trailingslashit(get_template_directory_uri()) . 'options/img/icons/glyphicons_062_attach.png',
// Leave this as a blank section, no options just some intro text set above.
'fields' => array()
))
That makes it a wee bit easier using our API I believe we released in Redux 3.2...
If you are using redux options with plugin your filter won't work inside a theme
for that make sure you put code inside a plugin.
Here is code that will work with theme and plugin as well!
function add_social_media_options($sections) {
$sections[] = array(
// Redux ships with the glyphicons free icon pack, included in the options folder.
// Feel free to use them, add your own icons, or leave this blank for the default.
'icon' => 'el-icon-wrench',
'title' => esc_html__('Social Media Settings', 'textdomain'),
'desc' => esc_html__('These are settings social media link', 'textdomain'),
'fields' => array(
array(
'id' => 'facebook_link',
'type' => 'text',
'url' => true,
'title' => __('Facebook link', 'textdomain'),
'compiler' => 'true',
//'mode' => false, // Can be set to false to allow any media type, or can also be set to any mime type.
'desc' => __('', 'textdomain'),
'default' => ''
),
array(
'id' => 'twitter_link',
'type' => 'text',
'url' => true,
'title' => __('Twitter link', 'textdomain'),
'compiler' => 'true',
//'mode' => false, // Can be set to false to allow any media type, or can also be set to any mime type.
'desc' => __('', 'textdomain'),
'default' => ''
),
)
);
return $sections;
}
add_filter("redux/options/redux_demo/sections", 'add_social_media_options');

Programmatically creating a CMS/Page in Magento

I saw the following answer to the post Where are Magento static CMS blocks stored? regarding programatically using PHP generating cms/blocks in Magento.
I changed the code to the following
$newBlock = Mage::getModel('cms/page')
->setTitle('Test CMS Page Title')
->setContent('Hello I\'m a new cms page.')
->setIdentifier('this-is-the-page-url')
->setIsActive(true)
->save();
... and it works. I see a new page show up in the CMS Pages area in the backend.
What I need to add to this is the ability to set the content of the other fields in the CMS/Page. Namely:
Layout (trying to set to 1 column)
meta keyword
meta description
fields. These fields are blank currently. I so far haven't been able to figure this part out.
Thanks,
here you go:
$cmsPageData = array(
'title' => 'Test CMS Page Title',
'root_template' => 'one_column',
'meta_keywords' => 'meta,keywords',
'meta_description' => 'meta description',
'identifier' => 'this-is-the-page-url',
'content_heading' => 'content heading',
'stores' => array(0),//available for all store views
'content' => "Hello I'm a new cms page."
);
Mage::getModel('cms/page')->setData($cmsPageData)->save();
The keys of the array are the name of the fields of the cms_page table (check the db). And to know the value, I manually create the cms page I want and then see the value for this entry in the db.

Placing HTML in a Zend_Form_Element label

I am developing a zendframework project. My sign up page contains a field "I Agree to the Terms of Use" with a check box near to it. Here I want to make "Terms of use” as a link. But I am new to the zend and PHP5. I checked the code and below is the code to display "I Agree to the Terms of Use"
'Agree' => array ('Checkbox', array (
'Required' => true,
'Decorators' => $element Decorators,
'Label' => 'I Agree to the Terms of Use',
)),
How I would make Terms of Use as a link?
You can add HTML to the label if you have your label decorator set up correctly. First, add 'escape' => false to the options of your label decorator. Without seeing your exact decorators it is difficult to say exactly how it should look for you, but it is likely to look like this:
$elementDecorators = array(
// some decorators...
array('Label',
array('placement' => 'prepend',
'escape' => false)),
// other decorators...
);
Then, add the HTML anchor to your label:
'Label' => 'I Agree to the Terms of Use',
Be wary of placing links on labels though. A label's native click action is to bring focus to the input it is associated with. If you have problems with this, you can apply the same options to a Description decorator and add the link there.
You can also do it the following way:
$radioElement = new Zend_Form_Element_Checkbox('formelement_0');
$radioElement->setLabel('Do you accept the Terms & Conditions?');
$radioElement->getDecorator('Label')->setOption('escape', false);
I dont know anything about this Framework, just guessing...
'Label' => 'I Agree to the Terms of Use',

Categories