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
Related
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
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"
Despite the behavior of examples shown on TinyMCE's demo pages (http://www.tinymce.com/tryit/classic.php), I am unable to get TinyMCE on my Wordpress 4.0 site to act in such a way that if you simply type "www.sitename.com" into the editor and press space, it's automatically converted into a hyperlink for http://www.sitename.com/.
To be clear, it doesn't convert into any link at all...This isn't a case of absolute vs. relative links. That's what most of the talk seems to be about when it comes to TinyMCE and link creation. ...Would that I could get to that stage!
I can find no toggle or option or plugin name to enable automatic link creation, and yet it's there in their demos on the TinyMCE's site.
Can anyone tell me how I might get this feature up and running, ideally by not adding another Wordpress plugin?
Err...That being said, I'm open to a suggestion if you have a really good one! :)
Cheers!
Even though you found a plugin, some background might help because I personally think this is a good question:
Wordpress uses TinyMCE, however the Wordpress WYSIWYG Editor is actually heavily extended and no longer fully resembles the original TinyMCE editor you see on the TinyMCE website.
In order for links to automatically render in TinyMCE, the 'autolink' plugin needs to be enabled. The following native TinyMCE plugins are used by Wordpress:
charmap
colorpicker
hr
lists
media
paste
tabfocus
textcolor
fullscreen
image
In addition to these, Wordpress also employs the following custom plugins to fill out the remainder of the functionality you normally see:
wordpress
wpautoresize
wpeditimage
wpgallery
wplink
wpdialogs
wpview
It is my belief that Wordpress left out this behavior by design. As you know, the Autolink plugin specifically converts all valid URLs to comparable anchor tags once the space or return keys are pressed. However, Wordpress does allow you to explicitly convert URLs or words to anchor tags using its own plugin 'wplink'.
It should be noted that the wplink plugin closely resembles the native anchor plugin, but is NOT the same.
With the ability to both explicitly define your links in both the visual editor (via the wplink plugin) and the Text (aka: HTML) editor, I believe the development team decided to forgo on automatically linking content in favor of allowing authors to explicitly provide links where needed.
With all of that said:
Wordpress does provide a convenient way of adding new TinyMCE plugins via its 'mce_external_plugins' filter. If you would like to add the autolink functionality without the use of an external plugin, you may download the latest TinyMCE package, upload the autolink plugin (tinymce/js/tinymce/plugins/autolink) to your theme folder, and then add the following to your theme's functions.php:
add_filter('mce_external_plugins', 'mm_add_tinymce_plugins');
function mm_add_tinymce_plugins($plugins){
$plugins['autolink'] = get_stylesheet_directory_uri().'/path/to/tinymce/plugins/autolink/plugin.js';
return $plugins;
}
When I choose "HTML" (instead of "Visual") for the editor in press-this.php I want the TinyMCE buttons to show up like they do when adding/editing a post via post.php.
For example, here's a clipped screen shot of the buttons available in post.php when "HTML" is active:
How do I get those buttons to show when using press-this.php?
I think this has to be a simple change but I haven't found a simple answer. I haven't written any plugins before so if that's the solution I'd like some pointers.
Using "HTML" mode in WordPress (whether you are in press-this or posts or pages) is mutually exclusive with having the TimeMCE buttons showing up. Clicking "Visual" puts you in TinyMCE mode. Clicking "HTML" turns off TinyMCE mode.
TinyMCE helps you write HTML even if you don't know how to write HTML (clicking the B button basically wraps the text you have selected with a <strong></strong> tag pair) . If you don't know HTML or you want an editor to help you write it faster, use "Visual". If you want to write the HTML yourself or you want to tweak the HTML output of TinyMCE, then use "HTML".
I am not that much into WordPress, but here is a very neat HowTo of Moxiecode (the enterprise behind tinymce) which decribes how to write an own plugin (it is not that difficult).
Wordpress is now replacing the youtube links that people post into comments of a post with the actual video. It is rather anoying and I would like to know if it is possible to leave the link as is and not add the embed code to view the video directly from the comment container?
Have you tried entering that code in the TEXT tab rather than the VISUAL tab of the editor?