Javascript remove ckeditor plugins on load - javascript

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...';

Related

ReInit в tinyMCE 4.7 (element re-creation)

I need to delete part of the DOM with the elements of the editor. After that a new DOM tree will be created in which I need to initialize the editor.
tinymce.remove();
window.tinymce.editors = [];
tinymce.EditorManager.editors = [];
tinymce.EditorManager.init({ ... some code ...});
console.log(tinymce.EditorManager.editors);
Even though I try to delete the editor after initialization, these methods do not work.
Please suggest.
jsfiddle[dot]net/238fL1wd/
It's work!
My system deletes css dynamically, so it seems that TinyMCE has not been reinitialized.
Can someone knows how to add your attribute to the created Link tag of TinyMCE?

Adding plugins to ckeditor while using rails_admin

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

ckeditor setdata only using some of the HTML Loaded [duplicate]

I have been using CKEditor for some time and it has worked great. I've pretty much gotten rid of any problems that ive had but this one i cant seem to figure out. When i add inline attributes to elements for instance style = "color: #ff0;" on a <p></p> tag they are stripped out when i switch from wysiwyg to source view. No saving or submission is done and ckeditor is has been added to my site which is my own script. Any ideas as to what would cause this. All of the search results i can find correspond to this happening in Drupal but Drupal seems to be the problem not the editor in all instances. Thanks again!
It feels like you're using CKEditor 4.1+ that comes with Advanced Content Filter (ACF). If so, you need to specify config.allowedContent and configure it to get your things working. You may also be interested in config.extraAllowedContent.
See this answer for more details.
For anyone looking for a simple sample on how to enabled additional markup in CKEditor without disabling ACF completely, here is a short snippet:
CKEDITOR.replace( 'editor1', {
extraAllowedContent: 'style;*[id,rel](*){*}'
} );
extraAllowedContent here enables the <style> element, allows two additional attributes (in square brackets) for all (* is a wildcard) already allowed elements, allows usage of any class names (*) for them and allows usage of any inline styles {*}
hi you can stop ACF easily . by default your configaration is---
function ckeditor($name,$value='',$height=300){
return '<textarea name="'.addslashes($name).'">'.htmlspecialchars($value).'</textarea>
<script>$(function(){CKEDITOR.replace("'.addslashes($name).'",{});});</script>';
}
just add this in the curly brackets:
allowedContent: true
now your configuration will be:
function ckeditor($name,$value='',$height=300){
return '<textarea name="'.addslashes($name).'">'.htmlspecialchars($value).'</textarea>
<script>$(function(){CKEDITOR.replace("'.addslashes($name).'",{allowedContent: true});});</script>';
}
I faced the same issue and below answer solved my problem:
config.allowedContent = true;
config.extraAllowedContent = '*(*);*{*}';
config.extraAllowedContent = 'span;ul;li;table;td;style;*[id];*(*);*{*}';
I had the same problem, that ck was stripping not only some attributes, but whole elements when pasting a block element, inside a block element (div with some attributes pasted inside a p) while using this method:
editor.insertHtml(html);
what solved the problem was using this workaround instead:
editor.insertElement(CKEDITOR.dom.element.createFromHtml(html));

Toggle live preview in ckeditor

I am using jquery adapter for ckeditor, I am able to add custom css files in editor preview using CKEDITOR.config.contentsCss
Below is embedded javascript code to create ckeditor for textarea with #editor2 ID.
jQuery(function()
{
var config = {
contentsCss :['css/bootsrap/bootstrap.css', 'contents-custom.css'],
}
jQuery('#editor2').ckeditor(config);
I want to create a plugin which may be call "live preview" on click of this button these CSS files will be added. This button should be like toggle.
My question is, How can I control the config from adding and deleting contentCss configuration?
With jQuery, you'll be able to trick the page. I don't think there's a known way for doing that with CKEditor's API. But, you can delete the <link> your files.
//to remove styling:
$('#cke_ckeditor iframe').contents().find('html head link').remove();
//to reload CSS:
$('#cke_ckeditor iframe').contents().find('html head').append('<link href="customContents.css" rel="stylesheet" type="text/css" />');
If you want, you can control which file will be removed by removing only the first() or the last() link, as well in the reloading snippet.
Good luck!

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