I'm trying to use CKEditor simply as an API that I can drive with my own UI.
Firstly, is this the right use of CKEditor?
If so, how could I modify the font size of a text selection programmatically?
Creating own UI for CKEditor
It's a doable approach, but for some cases it might be tough and require some code duplication.
There are older parts of CKE that encapsulate many useful things, so you have no convenient API to access it from outside.
Adding a font size
The minimal effort would be to simply use CKEDITOR.style objects.
var editor = CKEDITOR.instances.editor1;
var style = new CKEDITOR.style( {
element: 'span',
styles: { 'font-size': '20px' }
} );
editor.applyStyle( style );
For more examples see font plugin, you're interested in fontSize combobox.
Related
I'm loading a .ttf file via CSS and definition of font-face.
However, in the game the text renders blurry.
This is what I tried first (the font name is truetypetest):
this.sampleText = this.scene.add.text(0, 0, 'Almost clear text', { fontFamily: 'truetypetest' });
This actually renders almost clearly:
Almost clear text
There is still some sort of lighter 'shadow' if you look carefully. Setting the resolution arbitrarily high via the below gives what I want:
this.sampleText = this.scene.add.text(0, 0, 'Clear text', { fontFamily: 'truetypetest' }).setResolution(10);
This renders clearly:
Clear text
However, I don't want to be setting resolution this way as it's expensive memory-wise.
Furthermore, if I avoid setting the resolution AND specify a specific fontSize, via:
this.sampleText = this.scene.add.text(0, 0, 'Blurry text', { fontFamily: 'truetypetest', fontSize: '20px' });
This renders as blurry text:
Blurry text
I should mention that I'm rendering the text inside a container (GameObjects.Container). Also, and I suspect this is the key problem - I'm zooming the canvas using:
scale: {
parent: 'game-canvas',
zoom: 2,
autoCenter: Phaser.Scale.CENTER_BOTH,
}
I can't avoid using the zoom at this stage as the art is based off of this requirement. I've also tried using Bitmap font with no luck.
So my question is how do I use my custom font in my game that can render clear text for a wide range of different fontSize?
Thanks!
UPDATE
I've tried all of the following but with no luck:
Used Bitmap Fonts (including adding png font-sheets for different sizes
Tried rex WebFont Loader plugin: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/webfontloader/#test-string (loads font but still blurry)
Used a normal font like Roboto from the Google Font API. So the problem is not isolated to my particular font style (pixel-style font)
Tried following the method described here: https://phaser.io/examples/v3/view/game-objects/text/custom-webfont (CSS injection and custom webfont loading)
Tried multiples of font sizes
Tried autoRound=true
I find it difficult to believe what I'm trying to do is not possible. Its only text being rendered within a container. I would have thought there's a way of ensuring a single font can be used across a general range of sizes within the game? Failing that, I wouldn't mind using a more exhaustive strategy (multiple different font files at different sizes) if that is needed. There MUST be a way of rendering crisp text within a game? :(
I recently discovered mermaid.js which is great to design graphs and Gantts.
I'm using the live editor (https://mermaid-js.github.io/mermaid-live-editor/) and it's quite easy.
But how can I simply change the text font and its size, colors of the tasks in the editor ?
I've read that it's possible to do this changing css attributes, but that's not clear for me, I would need some more explanations.
Many thanks
To change the border and background color of the nodes, text font and size for flowcharts, in "Mermaid configuration" panel, set the following code:
{
"theme": "default",
"themeVariables": {
"nodeBorder" : "#004990",
"mainBkg" : "#c9d7e4",
"nodeTextColor" : "#274059",
"fontFamily": "arial",
"fontSize": "18px"
}
}
For other changes, see the mermaid theming ref page:
https://mermaid-js.github.io/mermaid/#/theming
For styling Gantt charts see the Mermaid Documentation. However, since this method requires you to use a stylesheet I dont think that you can use it in the live editor.
More information on working with themes in general: Documentation
I am using Ckeditor 4. Setting the property uiColor makes it always gradient. Is there a way to setup a solid ui color?
Using the inline editor with the 'sharedspace' plugin:
CKEDITOR.on('instanceReady', function (e) {
$('.cke_top').css('background','#eee');
})
You have to edit skin.js in /ckeditor_path/skins/skin_name/skin.js and modify CKEDITOR.skin.chameleon part that controls uiColor management to get rid of gradients. No other clean & easy way.
I have found that doing things like this in CKEditor are extremely frustrating. I tried finding a way to do this for a long time and changed the skin.js file, and several other things. In the end, I fixed it by changing the property with jquery after the editor loaded.
$('.cke_inner').css('background','transparent');
You can substitute '#012345' for 'transparent' and it will be a solid color.
I am adding an image to a TinyMCE editor using:
var params = {
src: filename,
title: "Attached image: " + filename,
width: 500
};
ed.execCommand("mceInsertContent", false, ed.dom.createHTML("img", params));
This insert the image correctly in the editor. However, when the user clicks on the image he has the ability of resizing it.
I would like to know if there is a way to:
Prevent the user to resize only in one direction (i.e. how do I keep a fixed aspect ratio for the image)
Completely prevent the user to resize the image
I found a (partial) answer, so I thought I will share it here.
Adding
'object_resizing' : false
In the editor config prevents the resizing.
Note that this is a feature of Mozilla only (e.g. Google Chrome does not allow you to resize the image).
I am still looking for a way of keeping aspect ratio in real time, but I do not know if that is really possible.
You can simply add this little plugin to tinyMCE, I used it and it works very well!
Here's the documentation: Link
You would need to implement a resize handler (for example a jQuery handler).
It might be helpfull to add attributes to your images to save its dimensions or to use one single setting holding the aspect ratio. For this you will adjust the tinymce configuration setting valid_elements to allow those attributes for images - otherwise tinymce would strip them out.
When resize gets fired you grab the new dimensions and adjust the dimensions according to the aspect ratio - eigther adjust using the new width or new heigth (the other value is needs to get corrected).
Example: images have an attribute aspectratio holding the aspect ration
You may place this code in thetinymce setup configuration parameter
setup : function(ed) {
ed.onInit.add(function(ed) {
$(ed.getBody()).find('img').resize( function(event){
$(event.target).css('width', parseInt ( event.target.width * this.aspectratio) );
});
});
}
Update:
I have created a tinymce fiddle to show an example to use with IE.
I want to let the ACE editor to be resizable based on the browser's
size. however, the editor element must be explicitly sized in order to
be initialized by the ace editor's API.
The editor works when I set the width:100%/height:400px. Having this setting allows the editor 's width responsive to the browser's width. However, not responsive for the editor's height.
Is there a way to make the editor's size more flexible by responding to browser's size?
Thanks
function resizeAce() {
return $('#editor').height($(window).height());
};
//listen for changes
$(window).resize(resizeAce);
//set initially
resizeAce();
set position:absolute;top:0; bottom:0
like https://github.com/ajaxorg/ace-builds/blob/master/editor.html#L14
Expanding on jpillora's excellent guidance:
function resizeAce() {
var h = window.innerHeight;
if (h > 360) {
$('#editor').css('height', (h - 290).toString() + 'px');
}
};
$(window).on('resize', function () {
resizeAce();
});
resizeAce();
window.innerHeight is supported by IE8+ and seems reliable for getting the usable area of the screen. I ended up with identical results on IE9, FF, and Chrome. I also found that I had to use the jQuery on syntax to reliably catch the window resize event.
I needed to use jQuery css because in my case I'm resizing a pre element (that shows coding help) that sits to the right of the code editor, and this was the only way to get the two elements to exactly the same height.
The 360 and 290 are the numbers I needed to use to account for all the menus and tabs taking up vertical space at the top of my page. Adjust accordingly.