#580November 28, 2017by faizansaiyed3 answers
Hey, How can I trigger some event when any new block or content inside canvas is updated? Something like editor.onCanvasUpdate() Thanks!
ryandeba
Hi @fsaiyedOB, I've been able to accomplish this with the component:update event listed here: https://github.com/artf/grapesjs/wiki/API-Editor#available-events My code looks something like
duskhacker
When I asked to find out when the canvas is dirty to provide an indicator, @artf told me:
artf
I'd add also a block specific event
#579November 28, 2017by NorthstarTech3 answers
I am replacing richtexteditor to ckeditor in grapesjs but its not working. Richtexteditor is still showing. How should I resolve this? My code is: editor.setCustomRte({ enable: function(el, rte) { rte = new CKEDITOR.inline(el, { toolbar: [{ attributes: { "class": "fa fa-image" }, command: "open-dialog" } ] }); return...
ryandeba
Hi @NorthstarTech, I see that your code is including the grapesjs-plugin-ckeditor.js file. Are you also including that plugin when calling grapesjs.init() as shown here?
NorthstarTech
yes I also added the plugin on grapesjs.init() but not working. It gives the error shown below.
ryandeba
I'm not super familiar with the ckeditor plugin, but it does appear to that it is expecting the sharedspace ckeditor plugin (see here). I think you just need to be sure and include that plugin in your CKEditor configuration. Here's a link...
#578November 28, 2017by krunal0393 answers
is there way to disable asset upload, we want to force user to use approved images only and that to via asset manager dialog.
ryandeba
Hi @krunal039, The docs indicate that you can pass upload: false to disable it (see the comment in the "Examples" section). Have you tried doing that? I don't have time to test it out myself at the moment, but I'd be happy to help out more...
artf
@shareefhiasat just use CSS
ehsantalkhouncheh
upload:false did not work for me :(
#577November 28, 2017by krunal0393 answers
is there way to not allow to drop any specific component more than one time on page? I have custom component and user cannot drop it more than one on page, so if component is already added on page then I want to display specific message and not allow to be dropped in editor
ryandeba
Hi @krunal039, My best suggestion would be to listen for the component:add event. In the event listener function you could check to see if the added component is the type that you are looking for, and if more than one of those components n...
bunomonteiro
``` editor.on('component:add', model => { // ... your logic goes here if(remove){ model.destroy(); } });
artf
@krunal039 Ryan's suggestion is the correct way to accomplish your request
#576November 28, 2017by ryandeba3 answers
Hi @artf, I've noticed that if I add a component that contains a combination of text and an <a> tag, the text is not editable like it normally is. If I replace the <a> tag with a <span>, then I can edit the text just fine. Here's something to illustrate what I mean (note the last 2 lines of code to toggle between a br...
artf
Thanks Daniel, I agree with you and will take care of your suggestions. I just would like to point out, for the 4th case, that you can also indicate explicitly to the editor where is a text component
artf
Should be fixed https://github.com/artf/grapesjs/releases/tag/v0.12.50
duskhacker
I'm running into this too.
#575November 27, 2017by NorthstarTech3 answers
Is it possible to add border-top, border-right,border-left properties individually under the decoration heading in grapesjs. This would be similar to border radius. For now it only shows the border-width which gives all sided borders. I want only right or left sided borders.
ryandeba
Hi @NorthstarTech, I don't have a code example, but have you looked at https://github.com/artf/grapesjs/wiki/API-Style-Manager#addproperty? There's an example there that adds "min-height" - could you modify that example to fit your needs a...
artf
@NorthstarTech Example for the right border
lock[bot]
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
#574November 26, 2017by Snarkly3 answers
Is there a way to use grapesjs with zeronet? https://zeronet.io/ You can create sites on zeronet but to add headers, banners and other things you have to get into the CSS and HTML to write code. I hate coding with a passion and would like to use grapesjs on zeronet so I can use grapes drag and drop features to create...
artf
Hi Jeffery, unfortunately, Daniel is right, if you want to use GrapesJS in other projects someone (devs) need to integrate it first. I think you can try at least to ask ZeroNet's devs if they put GrapesJS integration in their Roadmap
duskhacker
@Snarkly GrapesJS is not a drop-in turn-key solution. You'll have to understand (and do) Javascript coding just to get the editor working. Its purpose is for adding a fancy HTML editor to an existing web stack.
lock[bot]
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
#573November 26, 2017by NorthstarTech3 answers
How to add the text at specific cursor position in richtexteditor? any sample code? Need urgently Thanks,
ryandeba
Hi @NorthstarTech, Can you elaborate on what you mean by "specific cursor position"? Is that the beginning/end of the selection? Or is the target position more dynamic? A code example showing what you have so far (obviously it's OK that it...
artf
Thanks Ryan for the detailed explanation, by the way, I think this is the same as #111 so close as a duplication
lock[bot]
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
#572November 26, 2017by NorthstarTech3 answers
How to add the icon of ordered List in rich text editor? Here is my code. rte.add('insertOrderedList', { icon: '',//how to add the icon of orderlist here?? attributes: {title: "Ordered List"}, result: (rte, action) => rte.exec('insertOrderedList'), });
ryandeba
You can just set the icon value to whatever markup you want. Here's an example using font awesome: FYI - I've seen some discussion of removing font awesome from grapesjs. I'm not sure what the current plans are for that, but thought it was...
NorthstarTech
Thank u so much. working fine now.
lock[bot]
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
#571November 25, 2017by suraj7403 answers
Hi @artf , how can i import content dynamically from program that automatically reflect in canvas.
duskhacker
@suraj740 editor.setComponents() will take both html/css, so you could just skip the setStyle call. As for the rest, you did look at the storage manager documentation, yes? You can call load/store on it programmatically without clicking a...
duskhacker
In my project, I set data- attributes on an HTML element and extract them via .dataset in Javascript, once the editor is configured, I run: Be aware that the HTML must be set up so that grapesjs can understand it. I believe that it must ad...