I want to use canva button in my wordpress widget.
When you create canva button, they provide to you code which you copy and paste into your site, in my case in widget UI. The code looks like this:
<span data-type="poster" data-apikey="3KIFIE6ZHYTPUYNZF3V7" class="canva-design-button">Design a poster</span>
<script>(function(c,a,n){var w=c.createElement(a),s=c.getElementsByTagName(a)[0];w.src=n;s.parentNode.insertBefore(w,s);})(document,'script','https://sdk.canva.com/v1/api.js');</script>
Span is the button, and javascript will include an canva js file in head which will style the button and add click event on it. When you click on the button you will get popup to create some design.
Here is demo how it looks like when you place canva button on the frontend.
And here is screenshot how I am using it, in the widget UI:
The problem is that click event doesn't work when I drag and drop widget into sidebar and the canva popup is not showing. After I drag and drop widget in the sidebar I need to refresh the page in order to have click event work. I guess that this is because HTML of the Widget will be appended to the sidebar, but clicks events are already added.
Is there a way to handle it with some javascript code. Need to say that I cannot change the Canva javascript file so I need to do it with my javascript
The data-api-key is provided by canva. The example one is not valid.
Related
So I have developed a sidebar for the Gutenberg editor in WordPress. The purpose of this sidebar is to provide feedback, grades, scores, etc., for a set of custom input boxes that appear below the post editor. As such, the user may want to have it open and be using it to view the real-time updates to their scores as they are editing.
Now, of course, the button on the toolbar works to activate and deactivate the sidebar, but I was wondering if their was an external way that I can call my sidebar to reveal it. I have a call to action that I've just added to that section of inputs that will inform the user that this "optimizer" now exists, and if they click on it, I want the sidebar to become activated so that they can check it out. I'm hoping for something like this:
jQuery(document).on('click', '.my-button', function() {
// How do I activate, deactivate or toggle the activation of the sidebar?
activateSidebar('my-cool-sidebar');
deactivateSidebar('my-cool-sidebar');
toggleSidebarActivation('my-cool-sidebar');
});
Of course, all of those function are make believe, but that's where you come in. Is there a function or methodology that will allow me to invoke the same behavior as what happens when that top toolbar button is called? Thanks.
I have a very basic text editor that uses CKEditor. The default CKEditor toolbar is hidden because for editing I need only image upload (which is completely custom) and Equation Editor plugin for formulas.
My goal is to use a custom button for the Equation Editor and call the plugin on click. So, somewhere in the UI of the editor, I would have this:
Insert formula
Clicking on the button should open the Equation Editor.
How do I achieve this?
Note: I have multiple CKEditor instances on the page.
You should use CKEDITOR.editor.execCommand() like this
CKEDITOR.instances.myEditorInstance.execCommand( 'mathjax' )
And this is where you'll find how to do this.
You can list available commands of the CKEditor instance by browsing CKEDITOR.instances.myEditorInstance.commands object.
I'm running into an issue where I have a button on my page that has a CKEditor.
When the button is pressed I want to append text to the editor.
I used the following code:
$('#mtxDescription').append($(this).data('key'));
CKEDITOR.instances['mtxDescription'].updateElement();
However this does not work. The editor does not reflect the change. However when I inspect the editor I find that the textarea does show the appropriate text appended, its just the editor is not showing it. Does anyone know of a way to get around this. Also, just in case anyone is wondering, I do have the jquery CKEditor adaptor script referenced in my page.
Also, if a somewhat related, but separate issue.
I have a drop down list that will allow the user to toggle between the text area shown on the page being the CKEDitor WIZIWIG and going back to being a normal textarea again. However I can't seem to do this without literally refreshing the page, I want to do it through javascript/jquery so I don't have to refresh the page whenever the change the dropdown selection. I've already tried the built in destroy method. It doesn't seem to do anything visually, the editor does not revert back to a simple textarea.
Just in case you were going to ask for some more code, here is what my HTML page looks like:
<textarea id="mtxDescription" name="mtxDescription"></textarea>
Here is how I initialize the editor
CKEDITOR.replace('mtxDescription', {
sharedSpaces: { top: 'ed-top'}
});
I was able to solve this problem by using the following code instead of using jQuery CKEDITOR.instances.mtxDescription.insertHtml($(this).data('key')) I still need a way to remove the editor at runtime.
I want to like an application or a page upon the click of a button. This button has an image and my own css. Now when I clikc on it, I want to trigger the like of an application..
How do I achieve this ? Any reference ...
I have ckeditor embedded into one of my pages....but I don't know how to wire up certain buttons in ckeditor to perform specific actions. Most importantly, how do I tell it when the save button is clicked to save the document?
Dave--
The beauty of the save button in CKEditor is that it is setup default to submit the form that it's in. In my company's case, I bolted in CKEditor expecting to have to disable the save button because the larger form already had a save button...but it turns out that it worked right out of the box. Get the system installed, tested, and hit save...see what happens.
You can control the output of buttons in the Config.js file. If a particular button is not to your liking, you can use javascript to define actions or create new buttons there as well. There are fairly good tutorials on this at http://docs.cksource.com/