Use of Emojis in Text
Text blocks in CE.SDK support the use of emojis. A default emoji font is used to render these independently from the target platform. This guide shows how to change the default font and use emojis in text blocks.
Explore a full code sample of the integration on CodeSandbox or view the code on GitHub
Setup#
This example uses the headless CreativeEngine. See the Setup article for a detailed guide.
To get started right away, you can also access the block
API within a running CE.SDK instance via cesdk.engine.block
.
Check out the APIs Overview to see that illustrated in more detail.
Change the Default Emoji Font#
The default front URI can be changed when another emoji font should be used or when the font should be served from another website, a content delivery network (CDN), or a file path. The preset is to use the NotoColorEmoji font loaded from our CDN. This font file supports a wide variety of Emojis and is licensed under the Open Font License.
In order to change the URI, call the setSettingString(keypath: string, value: string)
Editor API with 'defaultEmojiFontFileUri' as keypath and the new URI as value.
Add a Text Block with an Emoji#
To add a text block with an emoji, add a text block and set the emoji as text content.
import CreativeEngine from 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.16.1/index.js';const config = {baseURL:'https://cdn.img.ly/packages/imgly/cesdk-engine/1.16.1/assets'};CreativeEngine.init(config).then(async (engine) => {document.getElementById('cesdk_container').append(engine.element);let uri = engine.editor.getSettingString('ubq://defaultEmojiFontFileUri');// From a bundleengine.editor.setSettingString('ubq://defaultEmojiFontFileUri','bundle://ly.img.cesdk/fonts/NotoColorEmoji.ttf');// From a URLengine.editor.setSettingString('ubq://defaultEmojiFontFileUri','https://cdn.img.ly/assets/v1/emoji/NotoColorEmoji.ttf');const scene = engine.scene.create();const page = engine.block.create('page');engine.block.setWidth(page, 800);engine.block.setHeight(page, 600);engine.block.appendChild(scene, page);engine.scene.zoomToBlock(page, 40, 40, 40, 40);const text = engine.block.create('text');engine.block.setString(text, 'text/text', 'Text with an emoji 🧐');engine.block.setWidthMode(text, 'Auto');engine.block.setHeightMode(text, 'Auto');engine.block.appendChild(page, text);});