Mixing
Customize Image Properties dialog in ng-2 ckeditor
0
I am using ng-2 ckeditor on my angular 6 project and I want to customize the Image Properties Dialog Box.
From the above figure, I want to hide Link & Advanced Tabs and also want to hide URL & Alternative text Input Fields.
I found the way which will get the job done but it is only applicable for CK Editor 4.
Here is the Code:
CKEDITOR.on( 'dialogDefinition', function( ev ) {
on('dialogDefinition', function(ev) {
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if (dialogName == 'image') {
var infoTab = dialogDefinition.getContents( 'info' );
infoTab.remove( 'txtBorder' ); //Remove Element Border From Tab Info
infoTab.remove( 'txtHSpace' ); //Remove Element Horizontal Space From Tab Info
infoTab.remove( 'txtVSpace' ); //Remove Element Vertical Space From Tab Info
infoTab.remove( 'txtWidth' ); //Remove Element Width From Tab Info
infoTab.remove( 'txtHeight' ); //Remove Element Height From Tab Info
//Remove tab Link
dialogDefinition.removeContents( 'Link' );
}
});
}
I also tried to use it on angular
Here is my Code:
let editor = this.ckeditor.instance;
editor.instance.document.on('dialogDefinition', function(ev) {
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if (dialogName == 'image') {
var infoTab = dialogDefinition.getContents( 'info' );
infoTab.remove( 'txtBorder' ); //Remove Element Border From Tab Info
infoTab.remove( 'txtHSpace' ); //Remove Element Horizontal Space From Tab Info
infoTab.remove( 'txtVSpace' ); //Remove Element Vertical Space From Tab Info
infoTab.remove( 'txtWidth' ); //Remove Element Width From Tab Info
infoTab.remove( 'txtHeight' ); //Remove Element Height From Tab Info
//Remove tab Link
dialogDefinition.removeContents( 'Link' );
}
});
Is there any methods available to customize this Image Properties dialog box in ng-2 ckeditor.
javascript angular ckeditor frontend
asked Nov 21 '18 at 6:19
ShivamShivam
519
add a comment |
0
I am using ng-2 ckeditor on my angular 6 project and I want to customize the Image Properties Dialog Box.
From the above figure, I want to hide Link & Advanced Tabs and also want to hide URL & Alternative text Input Fields.
I found the way which will get the job done but it is only applicable for CK Editor 4.
Here is the Code:
CKEDITOR.on( 'dialogDefinition', function( ev ) {
on('dialogDefinition', function(ev) {
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if (dialogName == 'image') {
var infoTab = dialogDefinition.getContents( 'info' );
infoTab.remove( 'txtBorder' ); //Remove Element Border From Tab Info
infoTab.remove( 'txtHSpace' ); //Remove Element Horizontal Space From Tab Info
infoTab.remove( 'txtVSpace' ); //Remove Element Vertical Space From Tab Info
infoTab.remove( 'txtWidth' ); //Remove Element Width From Tab Info
infoTab.remove( 'txtHeight' ); //Remove Element Height From Tab Info
//Remove tab Link
dialogDefinition.removeContents( 'Link' );
}
});
}
I also tried to use it on angular
Here is my Code:
let editor = this.ckeditor.instance;
editor.instance.document.on('dialogDefinition', function(ev) {
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if (dialogName == 'image') {
var infoTab = dialogDefinition.getContents( 'info' );
infoTab.remove( 'txtBorder' ); //Remove Element Border From Tab Info
infoTab.remove( 'txtHSpace' ); //Remove Element Horizontal Space From Tab Info
infoTab.remove( 'txtVSpace' ); //Remove Element Vertical Space From Tab Info
infoTab.remove( 'txtWidth' ); //Remove Element Width From Tab Info
infoTab.remove( 'txtHeight' ); //Remove Element Height From Tab Info
//Remove tab Link
dialogDefinition.removeContents( 'Link' );
}
});
Is there any methods available to customize this Image Properties dialog box in ng-2 ckeditor.
javascript angular ckeditor frontend
asked Nov 21 '18 at 6:19
ShivamShivam
519
add a comment |
0
0
0
I am using ng-2 ckeditor on my angular 6 project and I want to customize the Image Properties Dialog Box.
From the above figure, I want to hide Link & Advanced Tabs and also want to hide URL & Alternative text Input Fields.
I found the way which will get the job done but it is only applicable for CK Editor 4.
Here is the Code:
CKEDITOR.on( 'dialogDefinition', function( ev ) {
on('dialogDefinition', function(ev) {
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if (dialogName == 'image') {
var infoTab = dialogDefinition.getContents( 'info' );
infoTab.remove( 'txtBorder' ); //Remove Element Border From Tab Info
infoTab.remove( 'txtHSpace' ); //Remove Element Horizontal Space From Tab Info
infoTab.remove( 'txtVSpace' ); //Remove Element Vertical Space From Tab Info
infoTab.remove( 'txtWidth' ); //Remove Element Width From Tab Info
infoTab.remove( 'txtHeight' ); //Remove Element Height From Tab Info
//Remove tab Link
dialogDefinition.removeContents( 'Link' );
}
});
}
I also tried to use it on angular
Here is my Code:
let editor = this.ckeditor.instance;
editor.instance.document.on('dialogDefinition', function(ev) {
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if (dialogName == 'image') {
var infoTab = dialogDefinition.getContents( 'info' );
infoTab.remove( 'txtBorder' ); //Remove Element Border From Tab Info
infoTab.remove( 'txtHSpace' ); //Remove Element Horizontal Space From Tab Info
infoTab.remove( 'txtVSpace' ); //Remove Element Vertical Space From Tab Info
infoTab.remove( 'txtWidth' ); //Remove Element Width From Tab Info
infoTab.remove( 'txtHeight' ); //Remove Element Height From Tab Info
//Remove tab Link
dialogDefinition.removeContents( 'Link' );
}
});
Is there any methods available to customize this Image Properties dialog box in ng-2 ckeditor.
javascript angular ckeditor frontend
asked Nov 21 '18 at 6:19
ShivamShivam
519
I am using ng-2 ckeditor on my angular 6 project and I want to customize the Image Properties Dialog Box.
From the above figure, I want to hide Link & Advanced Tabs and also want to hide URL & Alternative text Input Fields.
I found the way which will get the job done but it is only applicable for CK Editor 4.
Here is the Code:
CKEDITOR.on( 'dialogDefinition', function( ev ) {
on('dialogDefinition', function(ev) {
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if (dialogName == 'image') {
var infoTab = dialogDefinition.getContents( 'info' );
infoTab.remove( 'txtBorder' ); //Remove Element Border From Tab Info
infoTab.remove( 'txtHSpace' ); //Remove Element Horizontal Space From Tab Info
infoTab.remove( 'txtVSpace' ); //Remove Element Vertical Space From Tab Info
infoTab.remove( 'txtWidth' ); //Remove Element Width From Tab Info
infoTab.remove( 'txtHeight' ); //Remove Element Height From Tab Info
//Remove tab Link
dialogDefinition.removeContents( 'Link' );
}
});
}
I also tried to use it on angular
Here is my Code:
let editor = this.ckeditor.instance;
editor.instance.document.on('dialogDefinition', function(ev) {
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if (dialogName == 'image') {
var infoTab = dialogDefinition.getContents( 'info' );
infoTab.remove( 'txtBorder' ); //Remove Element Border From Tab Info
infoTab.remove( 'txtHSpace' ); //Remove Element Horizontal Space From Tab Info
infoTab.remove( 'txtVSpace' ); //Remove Element Vertical Space From Tab Info
infoTab.remove( 'txtWidth' ); //Remove Element Width From Tab Info
infoTab.remove( 'txtHeight' ); //Remove Element Height From Tab Info
//Remove tab Link
dialogDefinition.removeContents( 'Link' );
}
});
Is there any methods available to customize this Image Properties dialog box in ng-2 ckeditor.
javascript angular ckeditor frontend
javascript angular ckeditor frontend
asked Nov 21 '18 at 6:19
ShivamShivam
519
asked Nov 21 '18 at 6:19
ShivamShivam
519
edited Nov 21 '18 at 9:40
Shivam
asked Nov 21 '18 at 6:19
ShivamShivam
519
asked Nov 21 '18 at 6:19
ShivamShivam
519
asked Nov 21 '18 at 6:19
ShivamShivam
519
519
add a comment |
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53406282%2fcustomize-image-properties-dialog-in-ng-2-ckeditor%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53406282%2fcustomize-image-properties-dialog-in-ng-2-ckeditor%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
