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
},
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"
I'm trying to embed Google form in Joomla page. For some reason, it's stripping tag, as soon as I save the page.
Tried with below,
With JCEditor - Enabled iframe in media content
With TinyMCE - Removed iframe from restricted content
Enabled "No Filtering" for Super User in Joomla Global Configuration
Still, no luck.
Joomla version - 3.6.2
Any help here would be appreciate
Rather than embedding the form in an article directly you can use a module called a "Wrapper" and then associate that wrapper module with the Article / Menu item you are trying to display it with.
To create a module go to (Extensions > Modules) in Joomla Admin then do "New" to have the module placed around the article choose the appropriate "position" then make sure to set the "Menu Assignment" to "Only on the pages selected"
If you need it in the middle of an article you can learn more about how to do that here - How do you put a module inside an article?...
https://docs.joomla.org/How_do_you_put_a_module_inside_an_article%3F
Try setting editor to: "NONE"
Use Chrome when performing the save, I have seen this to be a browser issue.
I am a beginner for sitefinity, so sorry for long post, not sure if its already answered, couldn't find out.
As working on sitefinity-8, looking for best option to select separate css while creating page each time.
I know, I can use different theme for different css, which will not work in my case, as we are having long list of css to use in whole site. Also I know, I can add css or any link into the head tag option of page properties or I can add css widget on the page itself to select css for that page only, but our requirement is to select css file while creating the page itself, this will make easy for novice editors too.
Basic thing I tried, to add css script tag into template, made it editable on page. So I can select css, but it exposes server folders, which is not ideal. Wish is there any way so that we can configure to select folder from sitefinity content- Documents & Files. But didn't find out a way to do so.
Other thing I tries, I have created custom field (related media-images, videos, files) for page to select a document & use as a link to add into head tag (to say link to add css for page.) With this custom field I can select needed document from appropriate folder from sitefinity backend itself, not from server. When I am looking into page source, I could see the link tag is there, but href attribute is empty. I also tried with adding related media tag into template the page is using, but the issue is same, no any value in href attribute.
Struggling to resolve this since long time, seeking for expert's advice.Thanks in advance.
The custom field path you've chosen should work - you will need a custom widget on the Page Template that will read the value of the custom field.
The GetRelatedItems extension method of the page node should give you the document object that was selected.
Having the document the widget will have to inject a link in the head of the page with the proper css attributes.
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;
}