I am trying to add the CKEditor to a page I am currently developing but am having problems getting it to pick up my custom configuration file? I am using CKEditor in Visual Studio.NET 2008. I need to customize the toolbars that are displayed, as Basic is too minimal and Full would give an overwhelming amount of buttons to the user.
I am declaring the editor in the aspx page as follows:
<script type="text/javascript">
CKEDITOR.replace(document.getElementById("<%= txtTourItinerary.ClientID %>"),
{ customConfig: 'myconfig.js' }
);
</script>
the myconfig.js file itself is in the root of the ckeditor directory (where config.js resides).
However, desipite rendering the CKEditor itself, it seems to be completely ignoring my custom config file. I was wondering if anyone had any suggestions?
Thanks!
The contents of the custom config file are as follows:
CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
config.language = 'en';
config.defaultLanguage = 'en';
config.uiColor = '#000000';
};
CKEDITOR.config.toolbar_Full = [['Save', '-', 'Preview', '-' 'Print'],
['Undo', 'Redo'], ['Cut', 'Copy', 'Paste', 'PasteFromWord', 'SelectAll'],
['Find', 'Replace'],
'/',
['Bold', 'Italic', 'Unnderline', 'Strike', '-', 'Subscript', 'Superscript']];
Thought I'd post up a solution. The path in the:
CKEDITOR.replace(document.getElementById("<%= txtTourItinerary.ClientID %>"),
{ customConfig: 'myconfig.js' }
is from the root of the website, not relative to the directory from CKEditor.
So my declaration should have been as follows
<script type="text/javascript">
CKEDITOR.replace(document.getElementById("<%= txtTourItinerary.ClientID %>"),
{ customConfig: '/ckeditor/myconfig.js' }
);
</script>
Hopefully I might have helped someone else in a similar boat as documentation on CKEditor is a little thin on the ground.
Related
I have created a module. In this a custom js file is added with requirejs-config.js, But to load the js file, I need to write the following lines on phtml,
<script type="text/javascript">
require(['jquery','customjs']});</script>
If I don't add the above line js is not adding .Can some body please tell is this the right approach or I am doing some thing wrong.
Require js code added at (Namespace\Modulename\view\frontend)
define([
'jquery',
'underscore',
'mage/template',
], function (
$,
_,
template
) {
//custom code
});
Yes this is the right approach. because you have created custom.js right . so that custom.js you need to call in your requirejs-config.js
But now when you want to use this actuall js functions and properties you need to pass below code
<script type="text/javascript">
require(['jquery','customjs']});</script>
What it mean actually , to load your customjs it requires jquery so first load the jquery then load your customjs and then you can pass the parameters.
require([ 'jquery', 'customjs'], function(){
alert("test");
});
so alert box will prompt when you add this in your template
Jfyi - in your requirejs-config.js you need to write like below code you dont'need to write extension of js file like.js as require js automatically render that . and lastly put the js file in web/js folder in your module
var config = {
"map": {
"*": {
"customjs": "Vendor_Modulename/js/custom"
}
}
};
Using ZURB Foundation Template, building with NPM.
I have the following code in my default.html layout page:
<script src="{{root}}assets/js/app.js"></script>
{{#ifpage 'admin'}}
<script src="{{root}}assets/js/single-page/admin.js"></script>
{{/ifpage}}
{{#ifpage 'dashboard'}}
<script src="{{root}}assets/js/single-page/dashboard.js"></script>
{{/ifpage}}
In gulpfile.js I have as a member of the 'javascript' PATHS array:
'!src/assets/js/single-page/**/*'
I then, do:
gulp.task('single-page', function() {
return gulp.src('src/assets/js/single-page/**/*')
.pipe(gulp.dest('dist/assets/js/single-page'))
.on('finish', browser.reload);
});
Then...
gulp.task('build', function(done) {
sequence('clean', ['pages', 'sass', 'javascript', 'single-page', 'images', 'php', 'chart_data', 'copy'], 'styleguide', done);
});
And finally...
gulp.task('default', ['build', 'server'], function() {
gulp.watch(PATHS.assets, ['copy']);
gulp.watch(['src/pages/**/*'], ['pages']);
gulp.watch(['src/{layouts,partials,helpers,data}/**/*'], ['pages:reset']);
gulp.watch(['src/assets/scss/**/{*.scss, *.sass}'], ['sass']);
gulp.watch(['src/assets/js/**/*.js'], ['javascript']);
gulp.watch(['src/assets/js/single-page/**/*.js'], ['single-page']);
gulp.watch(['src/assets/img/**/*'], ['images']);
gulp.watch(['src/assets/php/**/*'], ['php']);
gulp.watch(['src/assets/chart_data/**/*'], ['chart_data']);
gulp.watch(['src/styleguide/**'], ['styleguide']);
});
My three pages are all PHP pages with the names index.php, admin.php, and dashboard.php. The js/single-page directory is being written to the dist folder and the two JS files are there.
The Panini conditional doesn't seem to be working so the admin-specific and dashboard-specific paths do not appear on their respective PHP pages.
Colin Marshall in his answer to How to add JavaScript just for one specific page? mentions a config.yml file and a gulpfile.babel.js file, neither of which are in my project's directory.
Any suggestions?
Thank you.
Simple fix after a bit of fiddling. Seems Panini 'page' var returned the full page name including .php. Once I checked for admin.php or dashboard.php all worked fine.
I can only imagine there's some code change I can make to return the page name without the file extension.
I'm trying to edit my tables content by following this example DataTables example
In my twig page I've added this script at the end:
$(document).ready(function() {
/* Init DataTables */
var oTable = $('.dataTable').dataTable();
/* Apply the jEditable handlers to the table */
oTable.$('td').editable( 'editable_ajax.php', {
"callback": function( sValue, y ) {
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0], aPos[1] );
},
"submitdata": function ( value, settings ) {
return {
"row_id": this.parentNode.getAttribute('id'),
"column": oTable.fnGetPosition( this )[2]
};
},
"height": "auto",
"width": "auto"
} );
} );
the file editable_ajax.php is in the folder where my twig page is.
When I try to edit a cell I see with the debugging tool that the 'editable_ajax.php' file is not found, Can someone tell me where I should place it please ?
I'm sorry to say, but you seem to not have a good grasp of how templating and Symfony in general work. You're mixing very different things (PHP code, twig templates, Javascript code).
So, first read the Symfony Book. I would also suggest reading up on Javascript.
Some mistakes:
PHP files should never be in the "views" folder (aka. with twig files)
Javascript runs on the client side so you need to think about URLs when calling server-side code (aka. php code) NOT filesystem paths.
Javascript (jQuery is just a library) should not be in a twig file, but it's own *.js file and linked with a <script> html tag.
I was hoping anyone could give some input on this,
I'm creating a meteor app in which I would like to use bootstrap to creating the admin environment, but have the visitor facing side using custom css. When I add the bootstrap package to my app using meteor it's available on every page, is there a way to restrict the loading of bootstrap to routes that are in '/admin' ?
When you add bootstrap package it's not possible. You can, however, add bootstrap csses to public directory and then load them in a header subtemplate that will only be rendered when you're in the dashboard.
EDIT
But then how would you go about creating seperate head templates?
Easy:
<head>
...
{{> adminHeader}}
...
</head>
<template name="adminHeader">
{{#if adminPage}}
... // Put links to bootstrap here
{{/if}}
</template>
Template.adminHeader.adminPage = function() {
return Session.get('adminPage');
}
Meteor.router.add({
'/admin': function() {
Session.set('adminPage', true);
...
}
});
DISCLAIMER: I am unsure of a 'meteor way' to do this, so here is how I would do it with plain JS.
jQuery
$("link[href='bootstrap.css']").remove();
JS - Credit to javascriptkit
function removejscssfile(filename, filetype){
var targetelement=(filetype=="js")? "script" : (filetype=="css")? "link" : "none" //determine element type to create nodelist from
var targetattr=(filetype=="js")? "src" : (filetype=="css")? "href" : "none" //determine corresponding attribute to test for
var allsuspects=document.getElementsByTagName(targetelement)
for (var i=allsuspects.length; i>=0; i--){ //search backwards within nodelist for matching elements to remove
if (allsuspects[i] && allsuspects[i].getAttribute(targetattr)!=null && allsuspects[i].getAttribute(targetattr).indexOf(filename)!=-1)
allsuspects[i].parentNode.removeChild(allsuspects[i]) //remove element by calling parentNode.removeChild()
}
}
removejscssfile("bootstrap.css", "css")
However, doing that would complete remove it from the page. I am not sure whether meteor would then try to readd it when a user goes to another page. If that does not automatically get readded, then you have an issue of bootstrap not being included when someone goes from the admin section to the main site, which would break the look of the site.
The way I would get around that would be to disable and enable the stylesheets:
Meteor.autorun(function(){
if(Session.get('nobootstrap')){
$("link[href='bootstrap.css']").disabled = true;
}else{
$("link[href='bootstrap.css']").disabled = false;
}
});
There my be other bootstrap resources which may need to be removed, take a look at what your page is loading.
To use jQuery in the same way but for the javascript files, remember to change link to script and href to src
From my tests, Meteor does not automatically re-add the files once they have been removed so you would need to find some way of re-adding them dynamically if you want the same user to be able to go back and forth between the main site and the admin site. Or simply if the http referrer to the main site is from the admin, force reload the page and then the bootstrap resources will load and everything will look pretty.
P.s. make sure you get the href correct for the jQuery version
If somebody is interested in including any js/css files, I've written a helper for it:
if (Meteor.isClient) {
// dynamic js / css include helper from public folder
Handlebars.registerHelper("INCLUDE_FILES", function(files) {
if (files != undefined) {
var array = files.split(',');
array.forEach(function(entity){
var regex = /(?:\.([^.]+))?$/;
var extension = regex.exec(entity)[1];
if(extension == "js"){
$('head').append('<script src="' + entity + '" data-dynamicJsCss type="text/javascript" ></script>');
} else if (extension == "css"){
$('head').append('<link href="' + entity + '" data-dynamicJsCss type="text/css" rel="stylesheet" />');
};
});
}
});
Router.onStop(function(){
$("[data-dynamicJsCss]").remove();
});
}
Then simply use:
{{INCLUDE_FILES '/css/html5reset.css, /js/test.js'}}
in any of your loaded templates :)
I have two ASP.NET Web Forms Apps, first targeted to v4.0, second to v4.5 of .NET framework. I use ASP.NET CKeditor plugin v3.6.4. Everything work great, except that I can't register my 'phrases' plugin using 'ExtraPlugins" property.
Javascript solution works:
CKEDITOR.replace('<%=CKEditor1.ClientID%>',
{
extraPlugins: 'phrases',
toolbar:
[
['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink'],
['phrases']
]
});
But 'ExtraPlugins' property solution doesn't work:
<CKEditor:CKEditorControl ID="CKEditor1" BasePath="~/ckeditor" ExtraPlugins="phrases" Toolbar="Basic" runat="server" />
Please for help.
Best regards,
WP
I have done some experiments and finally I know how it works.
The following ASP.NET CKEditor Web Control tag is placed in *.aspx page:
<CKEditor:CKEditorControl ID="CKEditor1" BasePath="~/ckeditor" ExtraPlugins="phrases" Toolbar="Basic" runat="server" />
Then, this tag is rendered in the outcoming HTML document and shipped to the user browser in that way:
First part:
<script type="text/javascript">
//<![CDATA[
function WebForm_OnSubmit() {
CKEditor_TextBoxEncode('CKEditor1', 0);
return true;
}
//]]>
</script>
Second part:
<textarea name="CKEditor1" rows="2" cols="20" id="CKEditor1">
</textarea>
Third part:
<script type="text/javascript">
//<![CDATA[
var CKEditor_Controls=[],CKEditor_Init=[];function CKEditor_TextBoxEncode(d,e){var f;if(typeof CKEDITOR=='undefined'||typeof CKEDITOR.instances[d]=='undefined'){f=document.getElementById(d);if(f)f.value=f.value.replace(/</g,'<').replace(/>/g,'>');}else{var g=CKEDITOR.instances[d];if(e&&(typeof Page_BlockSubmit=='undefined'||!Page_BlockSubmit)){g.destroy();f=document.getElementById(d);if(f)f.style.visibility='hidden';}else g.updateElement();}};(function(){if(typeof CKEDITOR!='undefined'){var d=document.getElementById('CKEditor1');if(d)d.style.visibility='hidden';}var e=function(){var f=CKEditor_Controls,g=CKEditor_Init,h=window.pageLoad,i=function(){for(var j=f.length;j--;){var k=document.getElementById(f[j]);if(k&&k.value&&(k.value.indexOf('<')==-1||k.value.indexOf('>')==-1))k.value=k.value.replace(/</g,'<').replace(/>/g,'>').replace(/&/g,'&');}if(typeof CKEDITOR!='undefined')for(var j=0;j<g.length;j++)g[j].call(this);};window.pageLoad=function(j,k){if(k.get_isPartialLoad())setTimeout(i,0);if(h&&typeof h=='function')h.call(this,j,k);};if(typeof Page_ClientValidate=='function'&&typeof CKEDITOR!='undefined')Page_ClientValidate=CKEDITOR.tools.override(Page_ClientValidate,function(j){return function(){for(var k in CKEDITOR.instances){if(document.getElementById(k))CKEDITOR.instances[k].updateElement();}return j.apply(this,arguments);};});setTimeout(i,0);};if(typeof Sys!='undefined'&&typeof Sys.Application!='undefined')Sys.Application.add_load(e);if(window.addEventListener)window.addEventListener('load',e,false);else if(window.attachEvent)window.attachEvent('onload',e);})();CKEditor_Controls.push('CKEditor1');
CKEditor_Init.push(function(){if(typeof CKEDITOR.instances['CKEditor1']!='undefined' || !document.getElementById('CKEditor1')) return;CKEDITOR.replace('CKEditor1',{"extraPlugins" : "phrases", "htmlEncodeOutput" : true, "toolbar" : "Basic"}); });
//]]>
</script>
In the third part of source code, there is the most important statement, which is rendered equivalent of ASP.NET CKEditor tag:
CKEDITOR.replace('CKEditor1',{"extraPlugins" : "phrases", "htmlEncodeOutput" : true, "toolbar" : "Basic"}); });
As we can see, ASP.NET WebControl's property ExtraPlugings is linked with extraPlugins property in Javascript configuration of CKEditor instance.
After some recognitions it turns out that JS configuration extraPlugins option actually doesn't attach plugin to be visible in CKEditor toolbar and ready to use, but in fact only register the plugin to allow to use it. Plugin can be registered in that way, or in config.js configuration file of CKEditor:
CKEDITOR.editorConfig = function( config )
{
config.extraPlugins = 'phrases';
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
};
After registration, the plugin have to be somehow added to the toolbar to be available for use, for example in that manner:
<CKEditor:CKEditorControl ID="CKEditor1" BasePath="~/ckeditor" ExtraPlugins="phrases" Toolbar="[{ name: 'plugins', items: ['phrases'] }]" runat="server" />
or by use of Javascript Code.
Thus, in summary: ExtraPlugins property only cause a registration of plugin. If we want to have it on CKEditor Toolbar, we have to write proper statements to configure CKEDitor toolbar.