Adding plugins to ckeditor while using rails_admin - javascript

I've been banging my head against the wall on this for a few hours. Maybe someone can help me.
I've got a rails app. I'm using the rails_admin gem, version 0.6.2.
Following the rails_admin instructions, I enabled ckeditor on a few text fields, and it's working great.
Next I needed to customize some of the toolbar icons, so I created a custom config.js file in app/assets/javascripts/ckeditor/
This works fine, I can change the toolbar buttons (example code from config.js is below)
CKEDITOR.config.toolbar_Custom = [
{ name: 'document', items : [ 'Source','NewPage','Preview','-','Templates' ] }
// other toolbars removed for brevity
];
CKEDITOR.config.toolbar = 'Custom';
Now I want to add some ckeditor plugins - specifically, the codesnippet plugin.
I put the plugin files in app/assets/javascripts/ckeditor/plugins and include them like so:
CKEDITOR.config.extraPlugins = 'codesnippet'
Now ckeditor won't load, console is complaining that CKEDITOR.editor and CKEDITOR.style are undefined. These errors are coming from the plugin js files, so I know they're being loaded, but they seem to be referenced before ckeditor has time to initialize?
I've tried wrapping up my config settings in something like
CKEDITOR.on('instanceReady', function(){
// initialize config stuff here
});
But that does nothing.
I think the problem involves line 159 of this coffeescript file from rails_admin, it's setting up the editors and applying settings. But for the life of me, I'm lost, and the documentation has only confused me. Any help or hints appreciated.

Add below content into config.js file which will be at app/assets/javascripts/ckeditor/.
CKEDITOR.editorConfig = function (config) {
config.extraPlugins = 'widget,dialog,codesnippet,widgetselection,lineutils';
}
Download the plugins (as zip) from below links. Extract them and put at app/assets/javascripts/ckeditor/plugins which is required for codesnippet.
https://ckeditor.com/cke4/addon/widgetselection
https://ckeditor.com/cke4/addon/lineutils
https://ckeditor.com/cke4/addon/dialog
https://ckeditor.com/cke4/addon/widget
https://ckeditor.com/cke4/addon/codesnippet
Add below line into assets.rb.
Rails.application.config.assets.precompile += %w( ckeditor/* )
Enable it for rails_admin, try below for any specific model.
config.model 'Problem' do
# Your code here
edit do
field :code_snippet, :ck_editor
# Rest columns
end
end

Related

ng2-ckeditor - how to customise the css loaded inside the editor itself?

I need to customise the ENTER key behaviour of ng2-ckeditor. I understand there is a config option as explained here.
However as that link explains, I should use custom css:
If you want to change it to control paragraph spacing, you should use
stylesheets instead. Edit the contents.css file and set up a suitable
margin value for <p> elements, for example:
p { margin: 0; }
According to this SO question I can load a custom CSS file using a config option, like this:
config.contentsCss = 'mystyles.css'
I tried adding a single file to my project and setting the config in angular 2 component, but the file does not appear to load.
private setConfig(): void {
this.ckConfig = {
height: '250',
extraPlugins: 'divarea',
contentsCss: '/theme/styles/ckeditor.css',
toolbar: [... toolbar configurations ...]
};
}
So how can I get ng2-ckeditor to load this file?
This breaks if you have the DIVAREA plugin activated
Edit (from comment):
This is because contentsCss does not load when using DIVAREA. Makes sense since the CSS would need to be scoped to inside the DIV (easy with iFrame).
Maybe new CSS layers could help here?
github.com/ckeditor/ckeditor4/issues/4640 github.com/ckeditor/ckeditor4/issues/4642

how to remove the style tags from the header section

I am using angular js and deployed a site, In the head part of my website there are a lot of style tags are coming in the console like the below image, I attached a snap of my website console. I don't know where those tags are coming from and how can I remove those style tags from the head of the website
As of my understanding, you are using Angular Material Design and it is responsible for adding the style tags in your head section. It all happens under the hood, you can follow this link to know more. I think you no need to worry about removing this style tags and all because it came as functionality. Angular Material Design dynamically inject this style tags for theming purpose.
Reference: https://material.angularjs.org/latest/Theming/05_under_the_hood
Thank you.
EDIT
If you don't want to generate themes by default then you can use
$mdThemingProvider.generateThemesOnDemand(true);
Example:
angular.module('myApp', ['ngMaterial'])
.config(function($mdThemingProvider, $provide) {
//disable theme generation
$mdThemingProvider.generateThemesOnDemand(true);
$provide.value('themeProvider', $mdThemingProvider);
})
.run(['themeProvider', '$mdTheming', function(themeProvider, $mdTheming) {
//create new theme
themeProvider.theme('default')
.primaryPalette('pink')
.accentPalette('orange')
.backgroundPalette('yellow');
//reload the theme
$mdTheming.generateTheme('default');
//optional - set the default to this new theme
themeProvider.setDefaultTheme('default');
}]);
Reference: https://material.angularjs.org/latest/Theming/04_multiple_themes
If you want to remove all the style tags :
var st = document.getElementsByTagName('style');
and add a loop to remove all of them.
for(i = 0 ; i < st.length ; i++){
st[i].parentNode.removeChild(st[i]);
}
Please Try with below JQuery code
$('style[md-theme-style]').remove();
Reason :
Angular-material includes some default theme css as a constant variable.
You can check here(angular-material.js).
When we load this library in the browser it adds lots of style tags dynamically into the <HEAD> section of the Page.
How to disable ?
You can override the constans.It will result in not adding theme classes on components.
angular(myApp, [ ngMaterial, myAppModules ]).constant("$MD_THEME_CSS","");
You can also look into the angular-material.js. This solution is also proposed in library itself.
Have you tried to disable theme generation before and then enable the one you want?
angular.module('myApp', ['ngMaterial'])
.config(function($mdThemingProvider) {
//disable theme generation
$mdThemingProvider.generateThemesOnDemand(true);
//themes are still defined in config, but the css is not generated
$mdThemingProvider.theme('altTheme')
.primaryPalette('purple')
.accentPalette('green');
//generate the predefined theme named altTheme
$mdTheming.generateTheme('altTheme');
});
When material.js loads into your browser this adds lots of css style tags dynamically to the page document. To disable them you will need to recompile angular-material yourself using the following commands:
git clone https://github.com/angular/material.git
Then install dependancies:
cd material
npm install
Then go to gulp/util.js and change line 53 from:
var jsProcess = series(jsBuildStream, themeBuildStream() )
to be:
var jsProcess = series(jsBuildStream)
Then run the build process:
gulp build

Javascript remove ckeditor plugins on load

Html:
<textarea name="Editor" class="ckeditor" id="aboutme">#Model.Content</textarea>
Javascript:
<script>
config.removePlugins = 'elementspath,save,font';
</script>
When page load , i want to disable all ckeditor plugins.I tried above code however it did not work for me.
How can i remove plugins by javascript on load of page ?
Any help appreciates.
Thanks.
You can define a list of plugins to load (CKEDITOR.config#plugins):
config.plugins = 'wysiwygarea,toolbar,basicstyles,...';
But you can also restrict existing (default) list of plugins (CKEDITOR.config#removePlugins):
config.removePlugins = 'link,...';
Both options can be defined globally (config.js) or for a particular editor instance like
CKEDITOR.replace( 'editor1', {
removePlugins: 'link'
} );
Please refer to official Setting Configuration guide to know more.
Note: Since CKEditor 4.1, the presence of a plugin determines whether certain type content associated with that plugin is allowed or disallowed. Read more about Advanced Content Filter.
To answer my own question in the comment to oleq's answer:
I have a CKEditor instance that I'm using (with jQuery) like so:
window.onload = function () {
$ckTarget = $(".pageContentTextBox");
if ($(".pageContentTextBox").length > 0) {
$ckEditor = $ckTarget.ckeditor({
htmlEncodeOutput: true,
removePlugins: "link"
});
}
};
I was able to successfully remove the "link" plugin that way. I am going to set up an ASP.net User Control with public properties "extraPlugins" and "removePlugins" and insert the values using the client-side yellow tags ("code nuggets") to be able to use this on multiple pages with different plugins enabled/disabled.
I hope that helps someone!
You can also edit the config.js. This js is loaded/included from the ckeditor.js. config.js is a default custom editor js file. You can remove buttons or your plugins from the editor by including the list of names of elements to remove. For the list of names to remove from the editor please refer to the below link: https://ckeditor.com/old/forums/CKEditor-3.x/config.js-changes-not-reflected
Include the list of buttons or plugins to remove from the editor by appending them to the config.removebuttons and include this line of code in config.js
// Remove some buttons provided by the standard plugins, which are
// not needed in the Standard(s) toolbar.
config.removeButtons = 'Underline,Subscript,Superscript,Image,Flash,Table,HorizontalRule,Smiley...';

how to add JS and CSS tags from module without using header hook

is there any way to add JS and CSS tags just for the page where the module is contained?
If i use the code snippet
$this->context->controller->addjs('js/file.js', 'all');
in the "hookHeader", the script is added for the whole website (index, cms pages, etc.) where hook is used.
Thanks, any help would be appreciated.
If you want to add a js file only in page product and category for example, you can do this :
public function hookDisplayHeader($params)
{
$allowed_controllers = array('product', 'category');
$_controller = $this->context->controller;
if (isset($_controller->php_self) && in_array($_controller->php_self, $allowed_controllers)) {
$this->context->controller->addCss($this->_path . 'css/front.css', 'all');
$this->context->controller->addJs($this->_path . 'js/front.js');
}
}
Yes you can do it easily.
What you need to do it to call addJs or addCss in the desired hook function only. For example, if you are hooking your module at left column on certain pages only, then if you call
$this->context->controller->addjs('js/file.js', 'all');
at your hookLeftColumn (what ever the method name is nowadays :P ), then that js or css file will be only used when that module is displayed.
Or you can just place that css / js file directly in the template.
If your module will appear on specific pages, you can define "Exceptions" - the same that can be defined via Back Office > Modules > Positions > Transplant a module.
This way the hookDisplayHeader for that module will not be even executed and no CSS and JS files will be added. This is a better solution from a performance view point.

Preserving SCRIPT tags (and more) in CKEditor

Is it possible to create a block of code within the CKEditor that will not be touched by the editor itself, and will be maintained in its intended-state until explicitly changed by the user? I've been attempting to input javascript variables (bound in script tags) and a flash movie following, but CKEditor continues to rewrite my pasted code/markup, and in doing so breaking my code.
I'm working with the following setup:
<script type="text/javascript">
var editor = CKEDITOR.replace("content", {
height : "500px",
width : "680px",
resize_maxWidth : "680px",
resize_minWidth : "680px",
toolbar :
[
['Source','-','Save','Preview'],
['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Link','Unlink','Anchor'],
['Image','Table','HorizontalRule','SpecialChar']
]
});
CKFinder.SetupCKEditor( editor, "<?php print url::base(); ?>assets/ckfinder" );
</script>
I suppose the most ideal solution would be to preserve the contents of any tag that contains class="preserve" enabling much more than the limited exclusives.
Update: I'm thinking the solution to this problem is in CKEDITOR.config.protectedSource(), but my regular-expression experience is proving to be too juvenile to handle this issue. How would I go about exempting all tags that contain the 'preserved' class from being touched by CKEditor?
In CKEDITOR folder you have a config.js file. Open it and paste the code:
CKEDITOR.editorConfig = function( config ) {
config.allowedContent = {
script: true,
$1: {
// This will set the default set of elements
elements: CKEDITOR.dtd,
attributes: true,
styles: true,
classes: true
}
};
};
It will allow <script>...</script> tags in Source mode.
Suggestion 1: Create separate plain textarea for the admin to enter the scripts / HTML code.
Suggestion 2: Introduce a bbcode, like [script][/script] or [html][/html] that the admins can use to put the scripts / HTML code and have your server-side translate them into <script></script> and HTML code. Make sure when showing a saved content into the CKEditor, you need to have your server-side translate them into the bbcode first (or CKEditor will strip them out). Or the less-hassle way is to store the submitted content in the database as it is entered and only do the translation when displaying the page.
Suggestion 3: Since you want to use class="preserve" to mark tags you don't want CKEditor to strip out, then add the following JavaScript lines when initializing the editor:
// protect <anytag class="preserve"></anytag>
CKEDITOR.config.protectedSource.push( /<([\S]+)[^>]*class="preserve"[^>]*>.*<\/\1>/g );
// protect <anytag class="preserve" /><
CKEDITOR.config.protectedSource.push( /<[^>]+class="preserve"[^>\/]*\/>/g );
The issue is not with the CKEditor. Instead, the issue was with the MVC-Engine running the Site itself. Kohana has a global_xss_filtering within its configuration that is enabled by default. This prevents the submission of script tags, to prevent scripting-attacks on your site. Changing this value to false will permit the submission of <script> tags in forms, but it also opens up the site to potential security issues that can be very serious. It is advisable that you not disable global_xss_filtering.
/* /(system|application)/config/config.php - line 66 */
/**
* Enable or disable global XSS filtering of GET, POST, and SERVER data. This
* option also accepts a string to specify a specific XSS filtering tool.
*/
$config['global_xss_filtering'] = FALSE;

Categories