I am not able to add the following javascript into my wordpress post.
The javascript is provided by Google to display a map of the web search results.
<script type="text/javascript" src="https://ssl.gstatic.com/trends_nrtr/2578_RC01/embed_loader.js"></script> <script type="text/javascript"> trends.embed.renderExploreWidget("GEO_MAP", {"comparisonItem":[{"keyword":"covid","geo":"","time":"today 12-m"}],"category":0,"property":""}, {"exploreQuery":"q=covid&date=today 12-m","guestPath":"https://trends.google.com:443/trends/embed/"}); </script>
I have tried to add the javascript using the text editor (not visual) and also tried to add the javascript above within the "< code > </ code >", but it is still unsuccessful. Referring to this feedback adding javascript in wordpress posts (which might be stale)
What should I do if I wanted to add the above javascript into the wordpress post body?
Update:
#bhanu below is how I added the Javascript which results in an empty body post.
Well it is very simple to do that. I don't fully understand if you are on Gutenberg or classic Editor so I am going to show it for both of them.
Execute JS inside post with Gutenberg
Use Custom HTML block to and paste your code inside the block. If you are adding JS you must wrap it around <script></script> tag.
This would give the following result.
Execute JS inside post with Classic Editor
If you have some content like this.
Switch to text mode and paste the code where you want to add it.
This would be the output.
There's 2 ways to add Javascript to your Wordpress site. Obviously in this case you're wanting to add it to an individual post/page, rather than site-wide. So a good option is to use the CodeEmbed plugin, which has 30,000 active users, is free & open-source on SVN, and receives frequent updates.
After activating this plugin, go back to the edit post/page webpage in your admin panel, and enable "Custom Fields" in "Screen Options". Scrolling down below the content body field, you'll see a new field where you can insert js code:
After adding this field, simply add the shortcode {{CODEmyjscode}} anywhere in THAT SPECIFIC page/post's body field.
If you don't want to use a plugin, simply use the "Custom HTML" button in the WYSIWYG Wordpress editor and paste your jscode inside the Custom HTML area, making sure to add tags
-L
Related
I am trying to integrate TinyMCE with WPForms inside the WPForms Blog Post Submission plugin.
I inserted an HTML field with the code
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script>
tinymce.init({
selector: '#wpforms-421-field_7'
});
This kind of works as TinyMCE is integrated but in a horrible layout. Also the Images that are uploaded using this are not actually reflected in the actual page.
How do I integrate TinyMCE with WPForms correctly so that Images can be inserted in the text area and saved in the submitted posts?
You are asking a couple of different questions wrapped up in your request ... let me try to address each one:
1 - TinyMCE looks odd in the rendered page
The menus, toolbars, and statusbar of TinyMCE are part of the main web page that loads TinyMCE. As such if you are loading CSS onto the page that impacts these elements you can get to odd visual results like this.
I would use your browser's dev tools to sleuth out what CSS is impacting things.
2 - How do I upload images using TinyMCE?
You have not given us any details at all as to how you have tried to allow users to upload images via TinyMCE. There is an insert image option that you can expose via the image plugin but it requires some back end coding to receive the image and process it.
https://www.tiny.cloud/docs/plugins/image/#image_uploadtab
https://www.tiny.cloud/docs/plugins/image/#file_picker_callback
One additional question on this - Wordpress already has a media library and a UI to interact with that while using TinyMCE to create content - why are you trying to do something outside of WP's own media library?
It seems the author want TinyMCE in place of the textarea when creating Form for submission of Blog Post using WPForm.
Image: Source: https://wpforms.com/how-to-allow-users-to-submit-blog-posts-on-your-wordpress-site/
The problem is WPForm does not come along with the TinyMCE especially for the post content. You will probably get SCRIPT error or UI problem. You can use different plugins other than WPForm. Else write some custom code particularly for the Post Submission Addon found with WPForm.
You must to set Wpforms as "No styling" and check "Load Assets Globally"
We have a website developed in Wordpress by a third party. We need to add a java script function and onClick event to an individual page of our website.
The page has a div with some divs that mimic a button. They are just text with anchor tags, inside divs. We are particularly interested in one particular one. (i.e. $2.00 Off Coupon) which when clicked downloads a PDF document. We would also like it to call a function.
In Chrome, when I look at the code for that element, it looks like this (see red circled area):
With in the WordPress admin dashboard, the code for those buttons is not available, as it was custom made by the third-party developer.
e.g.
My Question is, is this code in a template, theme, or page code stored in database? How can I modify this anchor tag to include an onClick event to call the function I need?
Any help to guide me in the right direction would be much appreciated as I am a WordPress Novice.
I think this code located in Page Template file in your WordPress theme.
Try to find file with name page-home.php of something else.
This file should start from this code:
<?php
/*
Template Name: Home
*/
Or try a bad solution to the problem
$('.home-ctas').on('click', 'a[data-emalabel="$2.00 off coupon"]', function(){
// your function
});
I'm having a problem in including embedded post in a Joomla! article. I'm using the TinyMCE editor.
Steps I have followed :
In Text Filter Settings for Super User - No filtering
In TinyMCE settings - remove script and Iframe tag from "Prohibited Elements".
I'm not able to add Pinterest code:
<a data-pin-do="embedPin" data-pin-width="medium" href="https://uk.pinterest.com/pin/dfg/"></a>
It's likely that the code is getting stripped out because the link is not wrapped around any text. You could possibly add inside the link. However, I would suggest using the "None" editor when adding embed code to your posts. I use Switch Editor to quickly change editors.
Switch to "None"
Add the embed code
Save the article
Switch back to your favorite WYSIWYG editor to edit other articles
I use the media embed plugin for ckeditor. It works fine, the code is correctly saved in the database and youtube, soundcloud etd. players display ok on the page. But when the user goes to his administration, where he can edit the info, the text inside and with the tags is not showing, so when the user clicks on the save button, all previously saved iframes will be "erased" and only the rest of the formatted text will be saved. Is there any way to display the iframe code in the ckeditor?
I assume that you use CKEditor 4.1.x which comes with Advanced Content Filter (ACF). Most likely, the point is that you use different editors for frontend/backend editing.
Each plugin extends allowedContent property with own rules for tags, attributes and classes. Using those rules, editor automatically strips out undesired contents, so for example, if your fronted editor allows <iframe> because it has mediaembed plugin loaded, then your backend editor without this plugin will remove your <iframe> from the content.
Furthermore, ACF also observes your toolbar configuration so even if you include the plugin but you don't want the button in the toolbar, any content the button provides (i.e. <iframe>) will also be disallowed in editor's output.
You can easily check whether your editor accept <iframes>. Basically call the following and see the output:
CKEDITOR.instances.yourInstance.filter.check( 'iframe' );
>>> true // it's allowed
If it's false, then there are several solutions for your problem:
Enable mediaembed plugin in your backend editor (with button in the toolbar).
Extend config.extraAllowedContent to have it back again.
While the first solution is straightforward, the second one might be tricky for you. allowedContent rule for mediaembed plugin is as follows (see plugin's code):
allowedContent: 'iframe[*]' // stands for: iframe element with any attribute
If you add the following to your backend editor's config, you will have iframes back in your content without loading mediaembed plugin:
config.extraAllowedContent = 'iframe[*]'
If this solution doesn't work for you, please provide editor configs and CKEditor version so that people could help you.
CKEDITOR.config.allowedContent = true;
work for me.
To allow CKEditor to store custom HTML without it disappearing, you need to set the allowed content flag to true.
var allowedContent = true; // to allow custom html like iframe or div's
CKEDITOR.replace('yourEditorWindowsId', {
allowedContent
},
Currently, I can only add static posts to my blog. I can not use it for dynamic purposes like I can do it sites. I want to add text boxes and buttons depending on user input , I want to show dynamic content on my blog.
So it this possible?
I searched on the net but can only find that Blogspot does not allows text boxes and buttons to be added.
Please post some sample code for it.
Thanks,
Ashish
Blogspot posts doesn't allow to insert "input" tag in its posts directly by HTML Editor of posts. To do so you can follow the following steps
Goto the Templete from Admin portal of your blog
click on edit html & add JQuery.js (preferably which is hosted on google /JQueryUI.
in your post add a div in which you will add your input contents.
Now again in your templete html editor, write JQuery to handle event and adding the controls
for demo code you can view this article
Insert input elements in blogspot's post