I created an HTML text area in frontend. Now, how to add WordPress visual editor in the HTML text area?
Wordpress uses TinyMCE as it's rich text editor. There are a variety of plugins you can use to make it available on the front end, and there is information about working with TinyMCE in the Wordpress Codex.
A word of warning about allowing your users to create HTML from the front end that you might serve back on your site. It is a really open vector for scripting attacks, especially if the form is more-or-less open to the public. You might want to look at a Markdown editor instead, if it still meets with your specifications.
Related
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
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;
}
I have a question about a text editor.
If you want to add a post on your wordpress website. you can do that with the text editor on your wordpress-admin-page.
I've set up my own system to add posts (newsarticles) to a website (without wordpress).
At this moment i have to add them manualy in a database (phpmyadmin) but i was wondering if it was possible to create an editor (with some code). Setting things in italic/bold would be a lot easier then, for me and for the people who doesn't understand this.
I hope my question was clear.
Try with CKEditor. Download it here (Not for WP) and use it as a text editor outside Wordpress.
I'm somewhat new to Wordpress. I'm primarily a front-end web designer, and I use Wordpress plugins for things like dynamic content, forms and really anything a client requests that I do not know how to write code for. Unfortunately, I share the frustration of many designers/developers who complain about Wordpress' html sanitization. Thus, I write the majority of my html directly onto the page templates rather than using the Wordpress editor. I only use the Wordpress editor for small sections of my pages where I need to insert a plugin shortcode -- for a form or something. This works well until I need to use multiple plugins on one page. For instance, if I need a form plugin at the top of a page and a google map at the bottom, then I have to code all of the html in between those two elements into the Wordpress editor, which I would rather avoid.
My question -- is there a way to use Wordpress plugins in the page template html instead of using the shortcodes in the Wordpress editor? If I had it my way I'd never have to use the Wordpress editor for non-blog content.
Thanks,
Scott
Use wordpress do_shortcode();
e.g. echo do_shortcode('[gallery autoplay=no]');
I recently started developing websites on wordpress. I have this problem with tinymce editor. When i write post and format content it looks how I want in it. But when I publish post and check that it looks really crappy.Then I called the stylesheet of tinymce editor on everypage of website. I must say there is change but it still looks bad.
How can I get content in exact formatted way as I see in the tinyMCE?
Thanks,
kiran
On the frontend the styles from your theme will be taking precedence over the layout and sizing of content.
In the administration section it will be using a default TinyMCE editor css file. This allows for Wordpress to easily support a variety of themes without making many changes.
So that leaves you with the potential inconsistency, which you have identified here.
Either you work with the WYSIWYG editor giving you an approximation or you could add the relevant styles from your theme to the editors CSS. This can be done using add_editor_style() DOCs.
Use this WordPress plugin to solve your problem.
Specific CSS/JS for Posts and Pages