Closed BilalMustafa-cs closed 2 years ago
The links for svg graphics point to a site which seems to be not available: https://raw.githubusercontent.com/nhnent/tui.image-editor/production/dist/svg/
You can instead get those graphics from the original repo: https://github.com/nhn/tui.image-editor/tree/master/apps/image-editor/src/svg
The links for svg graphics point to a site which seems to be not available: https://raw.githubusercontent.com/nhnent/tui.image-editor/production/dist/svg/
You can instead get those graphics from the original repo: https://github.com/nhn/tui.image-editor/tree/master/apps/image-editor/src/svg
thanks for your response i have implemented the same
it works for me npm i tui-image-editor
import iconD from 'tui-image-editor/dist/svg/icon-d.svg'
import iconB from 'tui-image-editor/dist/svg/icon-b.svg'
import iconA from 'tui-image-editor/dist/svg/icon-a.svg'
import iconC from 'tui-image-editor/dist/svg/icon-c.svg'
{
config: {
includeUI: {
initMenu: 'filter',
},
},
icons: {
'menu.normalIcon.path': iconD,
'menu.activeIcon.path': iconB,
'menu.disabledIcon.path': iconA,
'menu.hoverIcon.path': iconC,
'submenu.normalIcon.path': iconD,
'submenu.activeIcon.path': iconC,
},
}
I have followed the same concept as per @taborskiy as well as the docs and icons aren't showing up !! I am using laravel mix here as compiler.
import iconD from '../../public/images/editor/svg/icon-d.svg'; import iconB from '../../public/images/editor/svg/icon-b.svg'; import iconA from '../../public/images/editor/svg/icon-a.svg'; import iconC from '../../public/images/editor/svg/icon-c.svg';
let pluginOpts = {
config: {
includeUI: {
initMenu: 'filter',
},
},
height: '250px',
icons: {
'menu.normalIcon.path': iconD,
'menu.activeIcon.path': iconB,
'menu.disabledIcon.path': iconA,
'menu.hoverIcon.path': iconC,
'submenu.normalIcon.path': iconD,
'submenu.activeIcon.path': iconC,
},
}
}
Updating the version of the Image Editor seems to fix the issue with icons. I'm using this config on the website preset demo and looks like it works:
'grapesjs-tui-image-editor': {
script: [
'https://uicdn.toast.com/tui.code-snippet/v1.5.2/tui-code-snippet.min.js',
'https://uicdn.toast.com/tui-color-picker/v2.2.7/tui-color-picker.min.js',
'https://uicdn.toast.com/tui-image-editor/v3.15.2/tui-image-editor.min.js'
],
style: [
'https://uicdn.toast.com/tui-color-picker/v2.2.7/tui-color-picker.min.css',
'https://uicdn.toast.com/tui-image-editor/v3.15.2/tui-image-editor.min.css',
],
},
applied but the issue still persist
let pluginOpts = {
[tUIImageEditor]: {
config: {
includeUI: {
initMenu: 'filter',
},
},
height: '250px',
icons: {
'menu.normalIcon.path': iconD,
'menu.activeIcon.path': iconB,
'menu.disabledIcon.path': iconA,
'menu.hoverIcon.path': iconC,
'submenu.normalIcon.path': iconD,
'submenu.activeIcon.path': iconC,
},
script: [
'https://uicdn.toast.com/tui.code-snippet/v1.5.2/tui-code-snippet.min.js',
'https://uicdn.toast.com/tui-color-picker/v2.2.7/tui-color-picker.min.js',
'https://uicdn.toast.com/tui-image-editor/v3.15.2/tui-image-editor.min.js'
],
style: [
'https://uicdn.toast.com/tui-color-picker/v2.2.7/tui-color-picker.min.css',
'https://uicdn.toast.com/tui-image-editor/v3.15.2/tui-image-editor.min.css',
],
}
}
Here's my console screenshot
IDK @deep-envertis maybe you can start with the same configuration I've suggested... (it might be your icons
option)
Here's the updated code:
pluginOpts: {
[tUIImageEditor]: {
config: {
includeUI: {
initMenu: 'filter'
}
},
icons: {
'menu.normalIcon.path': `https://uicdn.toast.com/tui-image-editor/latest/svg/icon-d.svg`,
'menu.activeIcon.path': `https://uicdn.toast.com/tui-image-editor/latest/svg/icon-b.svg`,
'menu.disabledIcon.path': `https://uicdn.toast.com/tui-image-editor/latest/svg/icon-a.svg`,
'menu.hoverIcon.path': `https://uicdn.toast.com/tui-image-editor/latest/svg/icon-c.svg`,
'submenu.normalIcon.path': `https://uicdn.toast.com/tui-image-editor/latest/svg/icon-d.svg`,
'submenu.activeIcon.path': `https://uicdn.toast.com/tui-image-editor/latest/svg/icon-c.svg`,
},
script: [
'https://uicdn.toast.com/tui.code-snippet/v1.5.2/tui-code-snippet.min.js',
'https://uicdn.toast.com/tui-color-picker/v2.2.7/tui-color-picker.min.js',
'https://uicdn.toast.com/tui-image-editor/v3.15.2/tui-image-editor.min.js'
],
style: [
'https://uicdn.toast.com/tui-color-picker/v2.2.7/tui-color-picker.min.css',
'https://uicdn.toast.com/tui-image-editor/v3.15.2/tui-image-editor.min.css',
],
}
}
I got the icon urls from tui editor's docs (https://github.com/nhn/tui.image-editor/blob/master/docs/Basic-Tutorial.md#4-menu-submenu-svg-icon-setting).
it still doesn't work !!
man I told you to start with my suggestion... remove the config
and icons
, check, then you can add your stuff and see if they break
pluginOpts: {
[tUIImageEditor]: {
script: [
'https://uicdn.toast.com/tui.code-snippet/v1.5.2/tui-code-snippet.min.js',
'https://uicdn.toast.com/tui-color-picker/v2.2.7/tui-color-picker.min.js',
'https://uicdn.toast.com/tui-image-editor/v3.15.2/tui-image-editor.min.js'
],
style: [
'https://uicdn.toast.com/tui-color-picker/v2.2.7/tui-color-picker.min.css',
'https://uicdn.toast.com/tui-image-editor/v3.15.2/tui-image-editor.min.css',
],
}
}
the still remains.
@artf Hello, I have implemented Grapes TUI Image Editor in my angular application. it was working good before 5 March 2021. But now its svgs are not showing in application and also on live demo of Editor. I have also cloned the repository from gitHub, the same is not working also. Is there any issue with editor.? Here is my implemented screen snip.
![image](https://user-images.githubusercontent.com/64077150/110434648-e4340000-80d3-11eb-851e-86283ff346ed.png)
here is live demo url and screen snip![image](https://user-images.githubusercontent.com/64077150/110434848-22312400-80d4-11eb-8783-e4d0f1dc5273.png)
url: https://grapesjs.com/demo.html
expected result should be like this:![image](https://user-images.githubusercontent.com/64077150/110434974-47be2d80-80d4-11eb-8520-25754dba569c.png)