EPiServer only:
Our clients are trying to add custom attributes to a div-tag in the TinyMCE editor - they switch to HTML mode, makes the changes and save the page. Then the attributes are removed. Washing HTML like this is standard behaviour of TinyMCE, and it is possible to configure it to allow custom tag attributes.
My question is how do I configure TinyMCE in EPiServer to allow custom HTML attributes? I don't see where I would be able to hook into the inititialization of TinyMCE. And adding div to the list of "safe" tags in episerver.config doesn't see to work either (see uiSafeHtmlTags).
Example:
<div class="fb-like" data-href="http://oursite" data-send="false"></div>
Becomes just
<div class="fb-like"></div>
From the TinyMCE documentation, on how to add custom attributes to tags: http://www.tinymce.com/wiki.php/Configuration:extended_valid_elements
I have this class
using EPiServer.Editor.TinyMCE;
namespace SomeNamespace
{
[TinyMCEPluginNonVisual(
AlwaysEnabled = true,
EditorInitConfigurationOptions = "{ extended_valid_elements: 'iframe[src|frameborder=0|alt|title|width|height|align|name]' }")]
public class ExtendedValidElements { }
}
and this in episerver.config:
<episerver>
....
<tinyMCE mergedConfigurationProperties="valid_elements, extended_valid_elements, invalid_elements, valid_child_elements" />
</episerver>
in a recent project. It should work the same if you change the iframe part to div[data-href|data-send].
You have 2 options:
First
[TinyMCEPluginNonVisual(EditorInitConfigurationOptions = "{ extended_valid_elements: 'div[title|data-test]' }")]
will allow title and data-test in div tag.
div[*] will allow all attribute in div tag.
Second
make your TinyMCE plugin inherits from IDynamicConfigurationOptions
implement function like this:
public IDictionary<string, object> GetConfigurationOptions(){
var customSettings = new Dictionary<string, object>();
customSettings.Add("extended_valid_elements", "div[*]");
return customSettings;
}
No need to configure anything in .config file (with EPiServer's default value, they are all fine).
Here are some helpful links to this question
http://www.kloojed.com/2010/05/customize-the-tiny-mce-editor-options-in-episerver-cms-6
http://krompaco.nu/2010/05/alter-default-initoptions-for-tinymce-in-episerver-6/
http://world.episerver.com/Modules/Forum/Pages/thread.aspx?id=45795
The following worked for me:
[TinyMCEPluginNonVisual(AlwaysEnabled = true, EditorInitConfigurationOptions = "{ extended_valid_elements: 'div[*]' }", PlugInName = "ExtendedValidElements", ServerSideOnly = true)]
public class TinyMceExtendedValidElements
{
}
No changes in config.
Related
I have a next a method how compile and set in DOM my html:
export function initHTMLOperator(container) {
if (container.template) {
const template = SF.handlebars.compile(container.template);
const html = template(container);
const elem = document.getElementsByTagName(container.id)[0];
elem.innerHTML = html; // set compiled template
}
}
container.template has a template
container - it is object with variables for template.
After compilation I set html in DOM.
But i have a problem when changing input i recompile template and losing focus.
Is it possible to update a template in the DOM without innerHTML?
I mean update template but not set full html, only changes.
What you want is something like react and not handlebars then, you should use a virtual DOM and apply only changes, but handlebars doesn't provide such functionality. So no if you want your new template then you have to replace the whole content with something like innerHTML. But if the only problem is loosing your focus you can save it before replacing your content and reset the focus once the template has been replaced.
I am a beginner with AngularJS and I have a little problem, I installed grunt-contrib-less to support less files instead css but now I have to declare all less styles that will be compiled into only one css file.
But my problem is normally when I'm using less, I write some code for a specific page, and here I have to write the style code for all pages. This is confusing and not really maintanable so is there a best practice to organize less styles?
I tought that there may be multiple solution:
Apply a class to body tag and change it with I don't know what
(controller, services or other)
(Import LESS file only for one page)
Generate multiple css file depending which style is compiled (but I can't do this because I can't configure grunt correctly)
Do this with DOM manipulation (but it don't find it beautifull because I think Angular must have a good way to solve that problem)
Could you explain me how to have different style for differents views ? I don't want to have the same style for all links in all views and without create hundreds classes I don't know how to do that.
Use directive
and add whatever variables/code/logic you want to add
HTML template(directive) of style can be added to your view and after compile you will get different ui for all your views
for reference read
angular directive
I solve my problem by adding specific class on body tag depending the route.
I put a variable in rootScope called 'pageStyle' with correspond to the classname that I want. This variable is updated automatically when route change (see run function). There is an event when the route change ($stateChangeSuccess or $routeChangeSuccess depending if you are using ngRoute or -angularui-routeur).
In my case i would like to add the name of the route but you can do it with the controller name or something else.
Here is an example
This is the routes :
angular
.module('frontApp', [])
.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider, $mdThemingProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
templateUrl: '../views/home.html',
controller: function ($scope) {
$scope.msg = 'Xavier';
}
})
.state('form', {
url: '/form',
templateUrl: '../views/form.html',
controller: 'FormCtrl'
});
}])
And in the run function you will see the event bound to adapt the class when route change :
.run(function($rootScope) {
$rootScope.pageStyle = '';
// Watch state and set controller name in pageStyle variable when state change
$rootScope.$on('$stateChangeSuccess', function(event, toState) {
event.preventDefault();
if (toState && toState.name && typeof toState.name === 'string'){
$rootScope.pageStyle = toState.name;
} else {
$rootScope.pageStyle = '';
}
});
});
Extra informations :
Note that the event called when route change is different if you are using ngroute. use "$routeChangeSuccess" if you use ngRoute and "$stateChangeSuccess" if you choose to use angular-ui-routeur
If you want to add the controller name instead the route name simply use the follow and replace 'ctrl' with you controller suffixe:
if (toState && toState.controller && typeof toState.controller !== 'function'){
$rootScope.pageStyle = toState.controller.toLowerCase().replace('ctrl','');
}
Hope it help someone else
I have multiple DIV elements on my page with the class "grid-item-container"
I want to make the background-color of each one different. I will set an array of 5 different colours that can be set.
There is a script available here that seems to do this: http://jsfiddle.net/VXG36/1/
$(document).ready(function() {
var randomColors = ["green","yellow","red","blue","orange","pink","cyan"];
$(".random").each(function(index) {
var len = randomColors.length;
var randomNum = Math.floor(Math.random()*len);
$(this).css("backgroundColor",randomColors[randomNum]);
//Removes color from array so it can't be used again
randomColors.splice(randomNum, 1);
});
});
I cannot however get it to run on my page. Is there something in this script that needs to be amended to make it Wordpress friendly?
Kind regards
Dave
You might wan't to wrap it in something like this:
jQuery(document).ready(function($) {
// Inside of this function, $() will work as an alias for jQuery()
// and other libraries also using $ will not be accessible under this shortcut
});
The jQuery library included with WordPress is set to the noConflict() mode (see wp-includes/js/jquery/jquery.js). This is to prevent compatibility problems with other JavaScript libraries that WordPress can link. Read more about it in Codex here.
Also, change $(.random) to $(.grid-item-container), this targets the class of your div.
In a project I'm working on we've defined a simple z3c.form, it looks like this.
class IImportCandidateForm(Interface):
csv_file = NamedFile(title=_(u'CSV file'))
class ImportForm(form.Form):
fields = field.Fields(IImportForm)
ignoreContext = True
def updateWidget(self):
super(ImportForm, self).updateWidget()
... snip ...
#button.buttonAndHandler(u'Import')
def handleImport(self, action):
data, errors = self.extractData()
if errors:
self.status = self.formErrorMessage
return
file = data["csv_file"].data
Is there a way to associate a custom css file with this form without first wrapping it in a custom page template with the form?
No, there isn't. Unless you use a form wrapper, the form's template renders only the form and not the entire page.
In you are using this form in a custom view, you have a class style added to the body class (something like template-yourviewname). So you can add you CSS rules to a main CSS resource, loaded in every page, but prefix every rule with .template-yourviewname.
In a asp.net C# webapp I'm using the CKEditor 3.6.2 and I'm facing the following problem:
In my stylesheet I have a CSS class to use in tables and I'm trying to bring this class already filled in the "Table properties", "Advanced" tab and the "Stylesheet Classes" field.
I want to bring this field filled with the string "blue_table", which is the name of my CSS class. I'm working with the source of the "table" plugin. I have figured out how to change the value of fields like width and height, but the one I want is the "Stylesheet Classes" field.
Do any of you know to to set a default value for this field?
You don't have to edit the ckeditor.js file to customise the editor. You can add the following either to config.js and use it site wide or on any page where you're using CKEditor (inside a script tag as below, after the editor fields you're using).
<script type="text/javascript">
CKEDITOR.on( 'dialogDefinition', function( ev ) {
// Take the dialog name and its definition from the event data.
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
// Check if the definition is from the dialog we're
// interested on (the Table dialog).
if ( dialogName == 'table' ) {
// Set the tab
var advTab = dialogDefinition.getContents( 'advanced');
// Grab the field
var stylesField = advTab.get('advCSSClasses');
// Set the default value
stylesField['default'] = 'blue_table';
}
});
</script>
This is modified from the CKEditor documentation. The hardest part is working out the IDs and names for all the fields used in the dialogs.
Finally I found the answer. This property is in the dialogadvtab, in the property "advCSSClasses". The thing is that this plugin is inside the core js, I mean the ckeditor.js.
I had to do this :
children :
[
{
id : 'advCSSClasses',
att : 'class',
type : 'text',
label : lang.cssClasses,
'default' : 'blue_table',
setup : setupAdvParams,
commit : commitAdvParams
}
]
The "problem" now is that I had to do it in the ckeditor.js, which is not a good practice. The problem is solved, but not int the best way.