I am not able to find a way to change the Ace-Editor that is built into the AllouUI widget. The example below is what I would like to achieve with the theme attribute.
YUI().use(
'aui-ace-autocomplete-base',
function(Y) {
var editor = new Y.AceEditor(
{
boundingBox: '#myEditor',
height: '200',
mode: 'python',
value: 'print("Hello there!!!")',
width: '700',
theme: 'chaos'
}
).render();
Sadly, there in the code there are no predefined ways I saw to change the theme.
Is there a way change the theme to ace editor for alloyui's widget?
Not sure if Y.AceEditor component exposes the required api, but you can try to get the real ace editor object, which allows to change the theme dynamically
document.getElementById('#myEditor').env.editor.setTheme("ace/theme/chtome")
You should be able to call AceEditor.getEditor().setTheme():
editor.getEditor().setTheme('ace/theme/twilight');
Related
In CKEditor 5 I don't see field for target attribute in link dialog.
How to add such field? Or set target=_blank as default.
Thanks
Since version 11.1.0 of a Link Plugin, there is added link decorator feature. This feature provides an easy way to define rules when and how to add some extra attributes to links.
There might be manual or automatic decorators.
First provides a UI switch which might be toggled by the user. When the user edits a link and toggles it, then preconfigured attributes will be added to the link e.g. target="_blank".
Second one, are applied automatically when content is obtained from the Editor. Here you need to provide a callback function which based on link's URL decides if a given set of attributes should be applied.
There is also a preconfigured decorator, which might be turn on with simple config.link.addTargetToExternalLinks=true. It will add target="blank" and rel="noopener noreferrer" to all links started with: http://, https:// or //.
You can achieve it by adding this code in CKEditor Initialization Script:
ClassicEditor
.create( document.querySelector( '#editor' ), {
// ...
link: {
decorators: {
openInNewTab: {
mode: 'manual',
label: 'Open in a new tab',
defaultValue: true, // This option will be selected by default.
attributes: {
target: '_blank',
rel: 'noopener noreferrer'
}
}
}
}
} )
.then( ... )
.catch( ... );
Here is the Documentation Link . It will be working fine.
I want to have separate config for ckditor.
For example in page temp1.html i want to have 'links' and in page temp2.html i don't want to have links.
Whats the good config for this?
I think configuration in below code is proper place for do this.
//var editor_data = CKEDITOR.instances.editor1.getData();
$('textarea#editor').ckeditor(
function () {
/* callback code */
},
//configuration
{
toolbar: 'Basic',
language: 'en',
});
You can use config.removePlugins to control the presence of certain plugins, like link (also config.removeButtons). But please note that since CKEditor 4.1, by doing this you restrict the content of the editor associated with the plugin or button (no link plugin or button = no links in the content).
So if you want to share the same content between different templates which use a different sets of plugins you need to explicitly expand config.extraAllowedContent of some editors:
$('#editor-linkless').ckeditor( function() {}, {
removePlugins: 'link',
extraAllowedContent: 'a[href,name,id,target]'
} );
$('#editor-regular').ckeditor();
JSFiddle.
See the official guide about ACF. Also this answer to know more.
I have a problem. I'd like to show CKEditor without toolbar, and still keep colors on it. This is my code.
$(document).ready(function() {
var textAreaName = 'description';
CKEDITOR.replace( textAreaName, {
removePlugins: 'toolbar,elementspath',
readOnly: true
} ) ;
var oCKeditor = CKEDITOR.instances[textAreaName];
});
The problem is text color doesn't show. It seems that CKEditor disable color as well.
Assuming (because it's still unclear) that you want to keep text color in editor's contents (BTW. editor's contents is not rendered using textarea - it is only used for easier data submitting) this is a solution:
config.extraAllowedContent = 'span{!color}';
This will allow span elements with color style. Read more about Advanced Content Filter.
use this config.uiColor = '#AADC6E';
Where config is object of that component.
Developing a Firefox Add-on. Anyone can please help to figure out how to make a Panel transparent.
Here is the code to show a panel:
var panel = require("sdk/panel").Panel({
width: 570,
height: 250,
contentURL: require("sdk/self").data.url("test.html")
});
panel.show();
I found a solution, but it isn't pretty since sdk/panel.js doesn't seem to expose the raw Panel object in order to tweak/extend or compose a another Panel from the existing one.
Here goes:
(1) Get the source for sdk/panel.js here: panel.js (raw) or from within sdk folder found in your addon xpi.
(2) Add it to your addon package as a new file.
(3) Change the requires parameters of this cloned file (lines 16-24) so that they point to the correct location from your addon.
example:
change
const { validateOptions: valid } = require('./deprecated/api-utils');
to
const { validateOptions: valid } = require('sdk/deprecated/api-utils');
(4) Find line 137, and modify the variable css to your liking. Like so:
...
let css = [
".panel-inner-arrowcontent, .panel-arrowcontent {padding: 0;}", //original css rule
".panel-inner-arrowcontent, .panel-arrowcontent {opacity: 0.50; border-radius: 0.35in;}" //additional css rules: semi-transparent panel with rounded borders.
].join(" ");
...
(5) Use the modified version of panel.js instead of the one that came with the sdk.
That should be it. Like I said, it isn't particularly elegant.
I try to add an image to the background of a panel. the image comes from loaded data.
i tried the following code, which did not work:
var topPanel = new Ext.Panel({
flex:1,
title:'topPanel',
style:'style="background-image: url('+this.jsonData.picURL+');'
});
when I create a list it work great with 'itemTpl'.
I also tried
style:'background-image: url({picURL});'
together with
store: {
fields: ['firstName','lastName', 'picURL'],
data: this.jsondData
}
but then I get the message
[[object Object]] is not a valid
argument for
'Function.prototype.apply'.
any thoughts could help!
thnx
You can append custom style by assigning object to style property of your panel
style: {
backgroundImage: 'url(resources/branding/mobile.gif)',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center'
}
and if you want to cover the whole background use:
backgroundSize: 'cover'