I want to dynamically change and load templates.How put kendo template to js file and use in html.
#(Html.Kendo().TileLayout()
.Name("tilelayout")
.Columns(100)
.RowsHeight("100%")
.Height("100%")
.ColumnsWidth("100%")
.Containers(c => {
if(#Model==1)
{
c.Add().Header(h => h.Text("Входящие документы")).BodyTemplateId("inboxdocuments1").ColSpan(75).RowSpan(2);
}
else
{
c.Add().Header(h => h.Text("Входящие документы")).BodyTemplateId("inboxdocuments2").ColSpan(75).RowSpan(2);
}
c.Add().Header(h => h.Text("Прикрепленные документы")).BodyTemplateId("attachments").ColSpan(25).RowSpan(1);
c.Add().Header(h => h.Text("Рассылка")).BodyTemplateId("distributions").ColSpan(25).RowSpan(1);
})
.Reorderable()
.Resizable()
.Events(e=>e.Resize("onTileResize"))
)
The following article is a detailed explanation of what you can do. Basically, put the templates in external files and load them as needed (say, with Ajax), and put them in the DOM. Make sure they are loaded before using them in a widget initialization though.
https://docs.telerik.com/kendo-ui/framework/templates/load-remote
Related
Hello I tried to load my template as hmtlfile instead of html. But when i tried to load the template it give me error "templatesDialog.setState is not a function"
Could you provide me sample function how to use the hmtlfile function?
// Register a templates definition set named "default".
CKEDITOR.addTemplates( 'default', {
// The name of sub folder which hold the shortcut preview images of the
// templates.
imagesPath: CKEDITOR.getUrl( CKEDITOR.plugins.getPath( 'templates' ) + 'templates/images/' ),
// The templates definitions.
templates: [ {
title: 'Image and Title',
image: 'template1.gif',
description: 'One main image with a title and text that surround the image.',
htmlFile: 'article.html' //this file is loaded in templates folder
} ]
} );
https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_plugins_templates_templateDefinition.html#property-htmlFile
I tried to path the htmlFile but still not working.
I am new to Cypress. What is the best way to avoid hard coding selectors/locators into each spec. In other frameworks we would create a config file with all of the selectors and have the spec reference it.
Scenario: I may have a selector being used in multiple specs. If the selector changes I do not want to have to change it in each spec. I would rather change it in one location only.
You don't need to do any magic. Simply put your selectors into a file, and import it.
// cypress/support/selectors.js
export default {
mySelector: '.my-selector',
mySelector2: '.my-selector-2'
};
// cypress/integration/one.spec.js
import selectors from '../support/selectors.js';
describe('test', () => {
it('test', () => {
cy.get(selectors.mySelector);
});
});
I'm new to SilverStripe reports but I haven't been able to find anything related to this particular issue so far.
I have a custom report that lists all images and files on the site in a gridview, however, I would like to make it so that people can either click on the filename and go to the image or file to edit it, or have an edit button for each image and file. Right now, if anyone wants to edit a file or image, they have to leave the report, go the Files tab, search for said file/image, and click to edit. That's rather tedious.
I know there is a way to make page titles clickable in reports based on the existing report examples in cms/code/reports. But I don't see anything that relates to linking to uploaded images and files.
Is there is a way to do this?
Here is the code for my custom report:
<?php
class CustomSideReport_ListofImagesAndFiles extends SS_Report {
// the name of the report
public function title() {
return 'All Images and Files';
}
// what we want the report to return
public function sourceRecords($params = null)
{
return File::get()
->sort('Title');
}
// which fields on that object we want to show
public function columns() {
return array(
"Title" => 'Image Title',
'Filename' => array(
"Filename" => "Filename",
"link" => true,
),
);
}
}
using "link" => true doesn't work -- it tries to create a page link, which isn't right. I've tried "edit" and "CanEdit."
Ok, I came up with this from referencing the setup for the Broken Links report:
// which fields on that object we want to show
public function columns()
{
$linkBase = singleton('CMSFileAddController')->Link('EditForm/field/File/item');
$linkBaseEditLink = str_replace("/add","",$linkBase);
$fields = array(
'Title' => 'Title',
'AbsoluteLink' => array(
'title' => _t('CustomSideReport_ListofImagesAndFiles.ColumnFilename', 'Filename'),
'formatting' => function($value, $item) use ($linkBaseEditLink) {
return sprintf('%s',
Controller::join_links($linkBaseEditLink, $item->ID."/edit"),
strstr($value, '/assets/', false)
);
}
)
);
return $fields;
}
I don't know if this is the best solution ever--it works, and I can't find anything else that relates to this kind of report creation for SilverStripe (everything I've found deals with getting Pages for reports, not images or files.
I had to make some tweaks because there is no CMSFileEditController like there is a CMSPageEditController, but I made due with what I had.
If anyone has a better solution then by all means, please share!
I have tried to add justify plugin to be able to align text right, left or centre. But after following the instructions in the documentation (http://apostrophecms.org/docs/tutorials/howtos/ckeditor.html), I wonder if the plugin should be located in a specific folder (mine is at public/modules/apostrophe-areas/js/ckeditorPlugins/justify/), as it disappears when the site is loaded, but if I include it in some other folder such as public/plugins/justify still doesn't work.
This is my code just in case: (located at lib/modules/apostrophe-areas/public/js/user.js)
apos.define('apostrophe-areas', {
construct: function(self, options) {
// Use the super pattern - don't forget to call the original method
var superEnableCkeditor = self.enableCkeditor;
self.enableCkeditor = function() {
superEnableCkeditor();
// Now do as we please
CKEDITOR.plugins.addExternal('justify', '/modules/apostrophe-areas/js/ckeditorPlugins/justify/', 'plugin.js');
};
}
});
Also, it would be nice to know how the plugin should be called at the Toolbar settings for editable widgets.
Thanks!
The URL you need is:
/modules/my-apostrophe-areas/js/ckeditorPlugins/justify/
The my- prefix is automatically prepended so that the public folders of both the original apostrophe-areas module and your project-level extension of it can have a distinct URL. Otherwise there would be no way for both to access their user.js, for instance.
I'll add this note to the HOWTO in question, which currently handwaves the issue by stubbing in a made-up URL.
As for how the plugin should be called, use the toolbar control name exported by that plugin — that part is a ckeditor question, not really an Apostrophe one. But looking at the source code of that plugin they are probably JustifyLeft, JustifyCenter, JustifyRight and JustifyBlock.
It turns out that it's not enough to simply call CKEDITOR.plugins.addExternal inside apostophe-areas. You also need to override self.beforeCkeditorInline of the apostrophe-rich-text-widgets-editor module and explicitly call self.config.extraPlugins = 'your_plugin_name';.
Here's what I ended up with:
In lib/modules/apostrophe-areas/public/js/user.js:
apos.define('apostrophe-areas', {
construct: function(self, options) {
// Use the super pattern - don't forget to call the original method
var superEnableCkeditor = self.enableCkeditor;
self.enableCkeditor = function() {
superEnableCkeditor();
// Now do as we please
CKEDITOR.plugins.addExternal('justify', '/modules/my-apostrophe-areas/js/ckeditorPlugins/justify/', 'plugin.js');
};
}
});
then in in lib/modules/apostrophe-rich-text-widgets/public/js/editor.js:
apos.define('apostrophe-rich-text-widgets-editor', {
construct: function(self, options) {
self.beforeCkeditorInline = function() {
self.config.extraPlugins = 'justify';
};
}
});
For some reason doing CKEDITOR.config.extraPlugins = 'justify' inside apostrophe-areas does not work, probably due to the way how CKEDITOR is initialized;
One more thing: this particular plug-in (justify, that is) does not seem to follow the button definition logic. It has button icons defined as images, whereas CKEditor 4.6 used in Apostrophe CMS 2.3 uses font-awesome to display icons. It means that the icons that ship with the justify module won't be displayed and you'll have to write your own css for each button individually.
There is another issue which you'll probably face when you finally enable the justify buttons. The built-in html sanitizer will be strip off the styles justify adds to align the content.
Apostrophe CMS seems to be using sanitize-html to sanitize the input, so changing CKEditor settings won't have any effect. To solve the issue, add the following to your app.js:
'apostrophe-rich-text-widgets': {
// The standard list copied from the module, plus sup and sub
sanitizeHtml: {
allowedAttributes: {
a: ['href', 'name', 'target'],
img: ['src'],
'*': ['style'] //this will make sure the style attribute is not stripped off
}
}
}
Thank you both for your help. After following both approaches of: locating the plugin at my-apostrophe-areas folder as well as editing editor.js on the apostrophe-rich-text widget (the sanitize.html file was already using that configuration), I got the plugin working. However, I was still having the issue with the icons.
I fixed that adding the Font Awesome icons that correspond to align-justify, align-right, align-left and align-center at the end of public/modules/apostrophe-areas/js/vendor/ckeditor/skins/apostrophe/editor.less
I want to have separate config for ckditor.
For example in page temp1.html i want to have 'links' and in page temp2.html i don't want to have links.
Whats the good config for this?
I think configuration in below code is proper place for do this.
//var editor_data = CKEDITOR.instances.editor1.getData();
$('textarea#editor').ckeditor(
function () {
/* callback code */
},
//configuration
{
toolbar: 'Basic',
language: 'en',
});
You can use config.removePlugins to control the presence of certain plugins, like link (also config.removeButtons). But please note that since CKEditor 4.1, by doing this you restrict the content of the editor associated with the plugin or button (no link plugin or button = no links in the content).
So if you want to share the same content between different templates which use a different sets of plugins you need to explicitly expand config.extraAllowedContent of some editors:
$('#editor-linkless').ckeditor( function() {}, {
removePlugins: 'link',
extraAllowedContent: 'a[href,name,id,target]'
} );
$('#editor-regular').ckeditor();
JSFiddle.
See the official guide about ACF. Also this answer to know more.