I want to add rel="nofollow" to all links in the CKEditor. I have read a lot of questions about it and also tried my best with the documentation. However I cannot get it working.
I am using Drupal 7 (Not the wysiwyg module, just the ckeditor module with cdn version 4).
Code that I have tried:
var editor = new CKEDITOR.editor();
CKEDITOR.on('instanceReady', function( ev ) {
editor.dataProcessor.htmlFilter.addRules(
{
elements :
{
a : function( element )
{
console.log(element.attributes);
if ( !element.attributes.rel )
element.attributes.rel = 'nofollow';
}
}
});
});
This code was what I found in other questions. In the documentation I can't find the addRules function, and if I put a breakpoint inside of the function, I see that it never gets called.
I would really appreciate some input!
Do you need to get it done through CKeditor's config? Because This can be configurated within the Drupal interface:
Configuration > Text formats > Choose the input format ex: Filtered HTML
check Limit allowed HTML tags
scroll down to the vertical tab Limit allowed HTML tags
check Add rel="nofollow" to all links
Related
I would need to add a javascript code within a specific page of my wordpress site.
I would like to find a solution via plugin, otherwise maybe I could modify the code I already use specifying the page, but I don't know how to do it
This is my code:
( function( $ ) {
$(document).ready( function() {
$('.title_subtitle_holder_inner > h1:nth-child(1) > span:nth-child(1)').text('EVENTI');
});
})( jQuery );
I would need that text to be edited on a specific page, in my case the page id would be 217
Thank you
Probably no harm in injecting that minimal code into all pages, just make it so that it selects elements only when on your specific target page.
WordPress creates a class page-id-XY on the body element automatically, so just prepend your selector accordingly, so that it will only select elements on that specific page:
$('body.page-id-217 .title_subtitle_holder_inner > h1:nth-child(1) > span:nth-child(1)')
You can try to use this:
https://wordpress.org/plugins/page-specific-scripts/
Or any other method for custom scripts on specific page. From what I recall I think WordPress has this functionality built in.
Problem 1: I consume the following plugins as part of a customized build of the basic version of CKEditor 4.6.2 - basicstyles, dialogui, dialog, clipboard, button, toolbar, enterkey, floatingspace, undo, divarea. The empty DIV container blocks have <br> elements added by CKEditor which I am trying to prevent.
The config file looks like this -
CKEDITOR.editorConfig = function(config) {
config.title = false;
config.allowedContent = true;
config.fillEmptyBlocks = false;
// Toolbar groups configuration.
config.toolbar = ...
};
fillEmptyBlocks = false; did not prevent CKEditor 4.6.2 from inserting the <br> elements. I tried doing what https://stackoverflow.com/a/34849579 suggests by having all the line-break rules set to FALSE and I could not get around the problem.
I tried it with the whole basic version of CKEditor 4.6.2 and the released version of 4.5.11 and this still occurs in them. However, this problem does not exist in CKEditor 4.1.3 and 4.4.0. Am I missing something as part of a config or should I have any additional plugin to not have this issue with 4.6.2?
Problem 2:
Pressing backspace in an empty div block removes the div block from the DOM. This again happens with 4.6.2 and 4.5.11 and not on 4.1.3 or 4.4.0, is there a config that I could be missing?
Edited: <br> tags are being inserted despite having fillEmptyBlocks set to false in all the versions post CKEditor 4.4.7, it does not happen with 4.4.6. Looking at the release notes, http://dev.ckeditor.com/ticket/12735 is the change that has gone into 4.4.7 Is there another way to fix this then?
I have developed similar kind of WYSIWYG editor using CKEDITOR 4 where everything is working fine although I used ckeditor.replace
However, I uploaded it in the github. So, you can refer there and compare and fix your code if you want.
Click here for the github project.
Please ask me if you face any problems!!
Please try this code it is working for me:
For removing br on load
$('your_id').ckeditor();
CKEDITOR.on('instanceReady', function() {
$('div.application').find('br').remove(); // remove br tag added on empty divs
});
for removing   use this in destroy function:
for(CKname in CKEDITOR.instances) // delete multiple instances of ckeditor
{
CKEDITOR.instances[CKname].destroy(function(){
$("your_id").html(function (i, html) {
return html.replace(/ /g, ''); // remove
});
})
}
We are currently working on a java web application, where one of the jsp pages will have dynamically generated rich text areas and we are using CKEditor for that purpose. I'm able to generate the text editors dynamically. There is button on the jsp page, on clicking it a java script method adds a new row, with textarea, to the table. Once the row is added, we are using the CKEDITOR.replace('editorName'); method to replace the textarea to CKEditor. Below is the code:
jsp:
<table id="StepsList" style="float: left" width="100%" ></table>
We are maintaining a variable rowNum to keep a track of number of textarea's created.
script:
var step = 'step'+rowNum;
$("#StepsList").append("<tr><td><div class='richTextareaWrapp bottmsp' style='margin-top:10px;'><textarea cols='40' id="+step+" name="+step+"></textarea></div></td></tr>");
CKEDITOR.replace(step);
To read the content of the generated CKEditors, we are iterating based on rowNum. Below is the code written in java script file:
script:
for(var j=1;j<=rowNum;j++){
obj = new Object();
step = '#step'+j;
$(step).ckeditor(function( textarea ){
obj.value=$(textarea).val();
});
jsonStepsArr.push(obj);
}
This throws an error saying "uncaught exception: The editor instance "step1" is already attached to the provided element."
I have gone through similar posts on stackoverflow and google for solution, most of them suggest to replace or destroy the instance. But it did not serve my purpose. Can anyone point out my mistake or if I have to add any code to make this work?
Thanks in advance.
Be consistent in your creation/accessing techniques.
Looks like if you're going to create an editor with normal CKEDITOR.replace call like:
CKEDITOR.replace( 'editor1' );
And then access it with a jQuery call like:
$( '#editor1' ).ckeditor( function( textarea ) {
// Do whatever...
} );
It won't play nice with each other.
Your solution:
So as a result either change your first call to:
$('#'+step).ckeditor();
Or in second call instead using jQuery, just access instance directly:
CKEDITOR.instances[ 'step'+j ].getData()
Is it possible to get CKEditor to recognize tab as a feature inside the editor, especially when in source code mode? Right now, when I hit the tab key, the cursor goes to the next field on the page.
I'd like to get the tab character working so CKEditor can work more like a code editor in which I can format my markup with tab spaces.
I'd really appreciate any help I can get with this.
I'm using CKEDitor 4.0.1
Or, perhaps this feature is supported in one of the newer versions of CKEditor?
This link might help: http://get-simple.info/forums/showthread.php?tid=1347
Basically, just add
config.tabSpaces = 4; // or some other value
to config.js and every time Tab is hit, you get that number of spaces.
The code is config.tabSpaces = 4; if you are saving to config.js. If you are setting configurations inside the file, the code will be as follows:
var editor = CKEDITOR.replace( 'editor1', {
tabSpaces: 4
});
it should be noticed, as Kamil Sama commented in rvighne answer, that this requires the tab plugin: tab plugin
<textarea name="text_note" id="text_note"> </textarea>
<!-- tabSpaces:4 add this in your script like as bellow code.-->
<script type="text/javascript">
CKEDITOR.replace('text_note',{tabSpaces:4});
</script>
If you using inline element, you can use like this
var editor2 = CKEDITOR.inline( 'your div id', {
tabSpaces : 5,
});
I have my own custom non-jQuery ajax which I use for programming web applications. I recently ran into problems with IE9 using TinyMCE, so am trying to switch to CKeditor
The editable text is being wrapped in a div, like so:
<div id='content'>
<div id='editable' contenteditable='true'>
page of inline text filled with ajax when links throughout the site are clicked
</div>
</div>
When I try to getData on the editable content using the examples in the documentation, I get an error.
I do this:
CKEDITOR.instances.editable.getData();
And get this:
Uncaught TypeError: Cannot call method 'getData' of undefined
So I figure that it doesn't know where the editor is in the dom... I've tried working through all editors to get the editor name, but that doesn't work-- no name appears to be found.
I've tried this:
for(var i in CKEDITOR.instances) {
alert(CKEDITOR.instances[i].name);
}
The alert is just blank-- so there's no name associated with it apparently.
I should also mention, that despite my best efforts, I cannot seem to get the editable text to have a menu appear above it like it does in the Massive Inline Editing Example
Thanks for any assistance you can bring.
Jason Silver
UPDATE:
I'm showing off my lack of knowledge here, but I had never come across "contenteditable='true'" before, so thought that because I was able to type inline, therefore the editor was instantiated somehow... but now I'm wondering if the editor is even being applied to my div.
UPDATE 2:
When the page is loaded and the script is initially called, the div does not exist. The editable div is sent into the DOM using AJAX. #Zee left a comment below that made me wonder if there is some other command that should be called in order to apply the editor to that div, so I created a button in the page with the following onclick as a way to test this approach: (adapted from the ajax example)
var editor,html='';config = {};editor=CKEDITOR.appendTo('editable',config, html );
That gives the following error in Chrome:
> Uncaught TypeError: Cannot call method 'equals' of undefined
> + CKEDITOR.tools.extend.getEditor ckeditor.js:101
> b ckeditor.js:252
> CKEDITOR.appendTo ckeditor.js:257
> onclick www.pediatricjunction.com:410
Am I headed in the right direction? Is there another way to programmatically tell CKEditor to apply the editor to a div?
UPDATE 3:
Thanks to #Reinmar I had something new to try. The most obvious way for me to test to see if this was the solution was to put a button above the content editable div that called CKEDITOR.inlineAll() and inline('editable') respectively:
<input type='button' onclick=\"CKEDITOR.inlineAll();\" value='InlineAll'/>
<input type='button' onclick=\"CKEDITOR.inline('editable');\" value='Inline'/>
<input type='button' onclick=\"var editor = CKEDITOR.inline( document.getElementById( 'editable' ) );\" value='getElementById'/>
This returned the same type of error in Chrome for all three buttons, namely:
Uncaught TypeError: Cannot call method 'equals' of undefined ckeditor.js:101
+ CKEDITOR.tools.extend.getEditor ckeditor.js:101
CKEDITOR.inline ckeditor.js:249
CKEDITOR.inlineAll ckeditor.js:250
onclick
UPDATE 4:
Upon further fiddling, I've tracked down the problem being related to json2007.js, which is a script I use which works with Real Simple History (RSH.js). These scripts have the purpose of tracking ajax history, so as I move forward and back through the browser, the AJAX page views is not lost.
Here's the fiddle page: http://jsfiddle.net/jasonsilver/3CqPv/2/
When you want to initialize inline editor there are two ways:
If element which is editable (has contenteditable attribute) exists when page is loaded CKEditor will automatically initialize an instance for it. Its name will be taken from that element's id or it will be editor<number>. You can find editors initialized automatically on this sample.
If this element is created dynamically, then you need to initialize editor on your own.
E.g. after appending <div id="editor" contenteditable="true">X</div> to the document you should call:
CKEDITOR.inline( 'editor' )
or
CKEDITOR.inlineAll()
See docs and docs.
You can find editor initialized this way on this sample.
The appendTo method has different use. You can initialize themed (not inline) editor inside specified element. This method also accepts data of editor (as 3rd arg), when all other methods (CKEDITOR.inline, CKEDITOR.replace, CKEDITOR.inlineAll) take data from the element they are replacing/using.
Update
I checked that libraries you use together with CKEditor are poorly written and cause errors you mentioned. Remove json2007.js and rsh.js and CKEditor works fine.
OK, so I have tracked down the problem.
The library I was using for tracking Ajax history and remembering commands for the back button, called Real Simple History, was using a script called json2007 which was intrusive and extended native prototypes to the point where things broke.
RSH.js is kind of old, and I wasn't using it to it's full potential anyway, so my final solution was to rewrite the essential code I needed for that, namely, a listener that watched for anchor (hash) changes in the URL, then parsed those changes and resubmitted the ajax command.
var current_hash = window.location.hash;
function check_hash() {
if ( window.location.hash != current_hash ) {
current_hash = window.location.hash;
refreshAjax();
}
}
hashCheck = setInterval( "check_hash()", 50 );
'refreshAjax()' was an existing function anyway, so this is actually a more elegant solution than I was using with Real Simple History.
After stripping out the json2007.js script, everything else just worked, and CKEditor is beautiful.
Thanks so much for your help, #Reinmar... I appreciate your patience and effort.