We Keep Coding

ckeditor default target link=" _blank" not work properly

My ckeditor version is 4.4.7
I want to change the default target to every link of the text that I add to ckeditor and I found this code
CKEDITOR.on('dialogDefinition', function(ev) {
try {
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if (dialogName == 'link') {
var informationTab = dialogDefinition.getContents('target');
var targetField = informationTab.get('linkTargetType');
targetField['default'] = '_blank';
}
} catch (exception) {
alert('Error ' + ev.message);
}
});
CKEDITOR.on('instanceReady', function(ev) {
var editor = ev.editor,
dataProcessor = editor.dataProcessor,
htmlFilter = dataProcessor && dataProcessor.htmlFilter;
htmlFilter.addRules({
a: function(element) {
element.attributes['target'] = "_blank";
}
});
});
I added this code to link.js file of ckeditor folder and it's working
but not correctly
I mean if I copy the text that have a link from word to editor,it doesn't add target_blank to a href automatically
but I have to click 'edit link' on it and see the default target already on _blank
then I click ok and save then it works.
but I want it to auto set target="_blank" on every link that I copy from word.
anyone can help?
thanks.

Where did you put your code?
I changed
type : 'select',
id : 'linkTargetType',
label : commonLang.target,
'default' : 'notSet',
in _source\plugins\link\dialogs\link.js to
type : 'select',
id : 'linkTargetType',
label : commonLang.target,
'default' : '_blank',
and this works fine.

Editing inside plugin files is not an ideal solution.
The best solution would be to add this to your js file
CKEDITOR.on( 'dialogDefinition', function( ev ) {
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if ( dialogName == 'link' ) {
var targetTab = dialogDefinition.getContents( 'target' );
var targetField = targetTab.get( 'linkTargetType' );
targetField[ 'default' ] = '_blank';
}
});

I added this code to link.js file of ckeditor folder and it's working but not correctly
You use this code directly on HTML page were you initialize the editor and not in link.js file:
var editor = CKEDITOR.replace( 'editor1', { });
CKEDITOR.on('dialogDefinition', function(ev) {
...

Cannot Pass Callback Function On Mouseup Event - JavaScript

I'm trying to pass a callback function as an argument in a previous function that is triggered by a mouseup in a chrome extension. So basically I'm aiming to trigger the quickTranslate function right after the lwsGetText finishes running. But I can't figure out how to do this since the function lwsGetText is triggered by a mouseup. Here's my code:
Content Script (js)
(function () {
// Holds text being selected in browser
var lwsSelectedText = '';
// Adds pop-up to current webpage
function lwsAddContent(callback) {
// Get body tag
var body = document.getElementsByTagName('body');
// add invisible div
document.body.innerHTML += '<div id="myModal" class="modal"><div class="modal-content"><span class="close">×</span><div id="lwsSpanishDiv"><p id="lwsSpanishTitle">Spanish</p><textarea id="lwsSpanishTextArea">Hello</textarea></div><div id="lwsEnglishDiv"><p id="lwsEnglishTitle">English</p><textarea id="lwsEnglishTextArea">Hello 2</textarea></div></div></div>';
callback(lwsSetUpTextGetter);
}
// Make the pop-up visible and set up close button
function lwsActivateContent(callback) {
var modal = document.getElementById('myModal');
// Get the textarea
var txtarea = document.getElementById("myTxtArea");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
span.onclick = function () {
modal.style.display = "none";
}
callback(quickTranslate);
}
// Initialize ability to select and grab text from browser
function lwsSetUpTextGetter(callback) {
//Set the onmouseup function to lwsGetText
document.onmouseup = lwsGetText;
//Handling clicking outside webpage?
if (!document.all) document.captureEvents(Event.MOUSEUP);
}
//Gets selected text
function lwsGetText(callback,e) {
// Get access to spanish text area
var spanishText = document.getElementById('lwsSpanishTextArea');
//Get text
lwsSelectedText = (document.all) ? document.selection.createRange().text : document.getSelection();
//if nothing is selected, do nothing
if (lwsSelectedText != '') {
// test: does browser grab text correctly?
alert(lwsSelectedText);
// Set spanish text area content to the selected text from browser
spanishText.value = lwsSelectedText;
// --Error Here--
callback();
}
}
function quickTranslate() {
alert("Quick Translate");
var url = "https://translate.yandex.net/api/v1.5/tr.json/translate",
keyAPI = "trnsl.1.1.20130922T110455Z.4a9208e68c61a760.f819c1db302ba637c2bea1befa4db9f784e9fbb8";
var englishTextArea = document.getElementById('lwsEnglishTextArea');
var spanishTextArea = document.getElementById('lwsSpanishTextArea');
englishTextArea.value = 'Working...';
var xhr = new XMLHttpRequest(),
textAPI = spanishTextArea.value,
langAPI = 'en';
data = "key=" + keyAPI + "&text=" + textAPI + "&lang=" + langAPI;
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(data);
xhr.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
var res = this.responseText;
var json = JSON.parse(res);
if (json.code == 200) {
englishTextArea.value = json.text[0];
}
else {
englishTextArea.value = "Error Code: " + json.code;
}
}
}
}
// When document ready
$(document).ready(function () {
lwsAddContent(lwsActivateContent);
});
})();
If someone could help me figure out how to implement the quickTranslate function as a callback function, that would be awesome! Thanks!

As you know the event handler you're assigning takes one parameter, the event. However you can create a closure around the "callback" variable by doing something like:
function lwsGetText(callback) {
return function (e) {
// Get access to spanish text area
var spanishText = document.getElementById('lwsSpanishTextArea');
//Get text
lwsSelectedText = (document.all) ? document.selection.createRange().text : document.getSelection();
//if nothing is selected, do nothing
if (lwsSelectedText != '') {
// test: does browser grab text correctly?
alert(lwsSelectedText);
// Set spanish text area content to the selected text from browser
spanishText.value = lwsSelectedText;
// --Error Here--
callback();
}
};
}
You would then pass the value quickTranslate as the "callback" parameter when you set the handler, not sure how you're doing that so here is a guess:
myElement.addEventListener("mouseup", lwsGetText(quickTranslate));

hide or show (view link ) was not working as expected when the user attach file using jquery

With my current code the user can attach the file and the file name will be shown in the textfield and view link will appear, if the user clicks the view link it will open in the new page.
My issue was the view link was displayed in the second attachment row but it should only when the user attaches the file then view link should be displayed not before that.
Second one if the user click the accept tick the attachment should be disabled I have css class for the disabled button:
.cst_select_dis{
background-color: #b9b9b9;
color: #fff;
border-bottom:2px solid #000;
width: 91px;
height: 25px;
border-left:0px;
border-right:0px;
border-top:0px;
margin-left:20px;
}
Here is the current jQuery code:
$(document).ready(function () {
var $preview = $(".preview");
$preview.hide();
$(".checkfile").on("change", function(){
var filename = this.value;
var files = this.files;
var URL = window.URL||window.webkitURL;
var url = URL.createObjectURL(files[0]);
$preview.attr("href", url);
$preview.show();
//$acceptdiv.show();
document.getElementById('file_name').value = filename;
$("#file_name").prop("disabled", true);
});
$(document).on('click', ".accpt_chk", function () {
if ($('.accpt_chk').is(':checked')) {
$('.checkfile').attr('disabled', 'true');
$('.cst_select ').addClass("cst_select_dis");
} else {
$('.checkfile').removeAttr('disabled')
$('.checkfile').prop('enabled', false);
$('.cst_select ').removeClass("cst_select_dis");
//$('#btn_selct').hasClass('.cst_select ').remove().addClass('.cst_select_dis');
}
//$('.qq-upload-button').prop('disabled', !this.checked);
});
$('.checkfile').on('change', function (e) {
myfile = $(this).val();
var ext = myfile.split('.').pop();
if (ext == "pdf" || ext == "jpeg") {
$(file_name).val(myfile);
} else {
alert('Invalid File Type')
e.preventDefault();
}
if(e.currentTarget.files[0].size>=1024*1024*5) {
alert('File Size cannot be more than 5 MB')
e.preventDefault();
}
});
});
Kindly please suggest me.
Here is the fiddle Link

Check inline comments for detailed explanation and DEMO here
$(".checkfile").on("change", function(){
var filename = this.value;
var files = this.files;
var URL = window.URL||window.webkitURL;
var url = URL.createObjectURL(files[0]);
$(this).closest('.row').find('.preview').attr("href", url).show();
//get current group's preview element using $(this) and add show in same line
document.getElementById('file_name').value = filename;
$("#file_name").prop("disabled", true);
});
//your checkbox class is not accpt_chk instead it is lbl_chk_acpt_right and so click event was not firing
$(document).on('click', ".lbl_chk_acpt_right", function () {
if ($(this).is(':checked')) {
$(this).closest('.row').find('.checkfile').attr('disabled', true);
$(this).closest('.row').find('.cst_select ').addClass("cst_select_dis");
//again get the element to disable using $(this)
} else {
$(this).closest('.row').find('.checkfile').removeAttr('disabled')
$(this).closest('.row').find('.cst_select ').removeClass("cst_select_dis");
}
});
UPDATE
Updated DEMO
There were many error in the code when I analyzed and I can stress on important 2 or 3 mistakes which are as below:
You have written onchange event for .checkfile twice which is unnecessary
You have give same id to different inputs #file_name which is a serious error and breaks HTML rules as there should be unique ids in the DOM. So I have made use of .check class of that input element
Whenever you refer an element of a group try referring it with $(this) so that you will target the proper element.
Added some inline comments too
$(document).ready(function () {
var $preview = $(".preview");
$preview.hide();
$(".checkfile").on("change", function(){
var filename = this.value;
var files = this.files;
var URL = window.URL||window.webkitURL;
var url = URL.createObjectURL(files[0]);
$(this).closest('.row').find('.preview').attr("href", url).show();
$(this).next('.check').prop("disabled", true);
var myfile = $(this).val();
var ext = myfile.split('.').pop();
if (ext == "pdf" || ext == "jpeg" || ext=="jpg") {
$(this).next('.check').val(filename);
//again get the next element of input type=file with $(this)
//$(this) refers to current element and here its .checkfile element
} else {
$(this).closest('.row').find('.preview').hide()
alert('Invalid File Type')
$(this).next('.check').val('');
e.preventDefault();
}
if(e.currentTarget.files[0].size>=1024*1024*5)
{
alert('File Size cannot be more than 5 MB')
e.preventDefault();
$(this).closest('.row').find('.preview').hide()
//hide view link here too
}
});
$(document).on('click', ".lbl_chk_acpt_right", function () {
if ($(this).is(':checked')) {
$(this).closest('.row').find('.checkfile').attr('disabled', true);
$(this).closest('.row').find('.cst_select ').addClass("cst_select_dis");
} else {
$(this).closest('.row').find('.checkfile').removeAttr('disabled')
$(this).closest('.row').find('.cst_select ').removeClass("cst_select_dis");
}
});
});

CKEditor remove option from select

I want to remove two options from the linkType select element on the 'Link' tab in CKEditor.
How do I do this? It says in the docs to use the remove function but I don't understand how to point it at the right element.
http://docs.ckeditor.com/#!/api/CKEDITOR.ui.dialog.select

We are using this to remove linkType and other extra stuff from dialog:
CKEDITOR.on('dialogDefinition', function(ev) {
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if (dialogName == 'link') {
//REMOVE NOT REQUIRED TABS
dialogDefinition.removeContents('upload');
dialogDefinition.removeContents('advanced');
var infoTab = dialogDefinition.getContents('info');
//REMOVE COMBO
infoTab.remove('linkType');
}
});
EDIT:- As described in this page and this answer, you can get element and specify options for it.
var infoTab = dialogDefinition.getContents('info');
//REMOVE COMBO
var lt=infoTab.get('linkType');
lt['items']=[['URL','Link to URL']];

I just found the answer here: http://ckeditor.com/forums/Support/Remove-options-link-drop-down
CKEDITOR.on('dialogDefinition', function(ev) {
// Take the dialog name and its definition from the event
// data.
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
// Check if the definition is from the dialog we're
// interested on (the "Link" dialog).
if (dialogName == 'link') {
// Get a reference to the "Link Info" tab.
var infoTab = dialogDefinition.getContents('info');
// Get a reference to the link type
var linkOptions = infoTab.get('linkType');
// set the array to your preference
linkOptions['items'] = [['URL', 'url'], ['Link to anchor in the text', 'anchor']];
}
});

ckeditor - onshow overiding custom definition

when using the ckeditor link dialog, I have custom code for some extra options. I would also like to grab the selected text to use - so I have called:
selectedContents = CKEDITOR.instances['my_editor'].getSelection().getSelectedText();
I want this to happen when the dialog is loaded. So I wrote an "onShow()" handler function... but that messes up the customizations that I have made to the dialog. I'm guessing that my onShow is grabbing the normal process for that event - how can I continue with the normal processing at that point?
dialogDefinition.onShow = function(evt)
{
contents = CKEDITOR.instances['my_editor'].getSelection().getSelectedText();
// now here, continue as you were...
}

Ok, I still have some issues, but the answer to this question is to grab the existing "onShow" handler before overwriting it. Use a global, then it can be called within the new handler:
var dialogDefinition = ev.data.definition;
var oldOnShow = dialogDefinition.onShow;
dialogDefinition.onShow = function(evt) {
// do some stuff
// do some more stuff
// call old function
oldOnShow();
}

Depending on Andy Wallace code:
var oldOnShow = dialogDefinition.onShow;
var newOnShow = function () {
//your code
}
and then:
dialogDefinition.onShow = function(){
oldOnShow.call(this, arguments);
newOnShow.call(this, arguments);
}
It helps me!

Correct syntax is:
/* if new picture, then open the Upload tab */
CKEDITOR.on('dialogDefinition', function(ev) {
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
var dialog = dialogDefinition.dialog;
if (dialogName == 'image2') {
dialogDefinition.onShow = CKEDITOR.tools.override(dialogDefinition.onShow, function(original) {
return function() {
original.call(this);
CKEDITOR.tools.setTimeout( function() {
if (dialog.getContentElement('info', 'src').getValue() == '') {
dialog.selectPage('Upload');
}
}, 0);
}
});
}
});