I have searched a lot about it but didn't find any answer.I am using wp_editor on frontend but its printed outside the div element.
below is a screenshot
And below is my codes
wp_editor(
$content = '',
$editor_id = 'ec_frontend_editor',
$settings = array(
'wpautop' => false, // use wpautop?
'media_buttons' => true, // show insert/upload button(s)
'textarea_name' => $editor_id, // set the textarea name to something different, square brackets [] can be used here
'textarea_rows' => get_option('default_post_edit_rows', 10), // rows="..."
'tabindex' => '',
'editor_css' => '', // extra styles for both visual and HTML editors buttons,
'editor_class' => '', // add extra class(es) to the editor textarea
'teeny' => false, // output the minimal editor config used in Press This
'dfw' => true, // replace the default fullscreen with DFW (supported on the front-end in WordPress 3.4)
'tinymce' => true, // load TinyMCE, can be used to pass settings directly to TinyMCE using an array()
'quicktags' => true // load Quicktags, can be used to pass settings directly to Quicktags using an array()
)
)
it's been too late but it will be helpful for someone in future. I got same problem because of I am taking string:
$html = '';
$html .= wp_editor( $real_value, 'gg_contact_html_wp_editor', $wp_editor_settings );
echo $html;
then I replaced my code with this code:
<div class="container">
wp_editor( $real_value, 'gg_contact_html_wp_editor', $wp_editor_settings );
</div>
Related
I have created a new TinyMCE layout for Advanced Custom Fields called "Very Simple" that I want to use on specific WYSIWYG fields. I've managed to add the buttons I want and I'm now looking for a way to add a list of custom style formats as a dropdown, but I can't really figure out how to do this.
The code I have right now is the following:
// Customize ACF MCE
add_filter( 'acf/fields/wysiwyg/toolbars' , 'new_toolbars' );
function new_toolbars( $toolbars )
{
// - this toolbar has only 1 row of buttons
$toolbars['Very Simple' ] = array();
$toolbars['Very Simple' ][1] = array('bold' , 'italic' , 'underline', 'link', 'unlink' );
$style_formats = array(
// These are the custom styles
array(
'title' => 'Red Button',
'block' => 'span',
'classes' => 'red-button',
'wrapper' => true,
),
array(
'title' => 'Content Block',
'block' => 'span',
'classes' => 'content-block',
'wrapper' => true,
),
array(
'title' => 'Highlighter',
'block' => 'span',
'classes' => 'highlighter',
'wrapper' => true,
),
);
// Insert the array, JSON ENCODED, into 'style_formats'
$toolbars['Very Simple'][1]['styleselect'] = json_encode( $style_formats );
// return $toolbars - IMPORTANT!
return $toolbars;
}
The style format dropdown is not showing. Any ideas why?
The styleselect dropdown is hidden by default, so to get any registered formats/styles will show, you'll just need to activate the styleselect dropdown menu in the Visual editor.
The below function (from the WordPress Codex) filters the array of buttons loaded by TinyMCE, so just add this to your functions.php. I'm using the mce_buttons_2 filter to make it appear in the second row of my toolbar.
// Callback function to insert 'styleselect' into the $buttons array
function my_mce_buttons_2( $buttons ) {
array_unshift( $buttons, 'styleselect' );
return $buttons;
}
// Register our callback to the appropriate filter
add_filter( 'mce_buttons_2', 'my_mce_buttons_2' );
I'm trying to use wp_editor in a simple PHP page (not a plugin, not in the admin section) :
define('WP_USE_THEMES', false);
require('wp-blog-header.php');
$editor_id = 'mycustomeditor';
wp_editor( "My content", $editor_id );
I got the field and the Visual/HTML buttons but that's all, I don't have any other buttons or toolbar.
Do I need to load other WP library before calling wp_editor ?
Thank you !
You can pass some settings variable to editor as well. Without passing it, it will take default values.
Another thing I have noticed that, If I do exit(); anywhere in my page before loading footer, it will not display any buttons in toolbar as it loads some of the scripts from footer. So If you have exit() or die() before loading footer it will not load the toolbar.
Here I have passed it to my editor and its working fine.
define('WP_USE_THEMES', false);
require('wp-blog-header.php');
$editor_id = 'mycustomeditor';
$settings = array(
'wpautop' => true, // use wpautop?
'media_buttons' => true, // show insert/upload button(s)
'textarea_name' => $editor_id, // set the textarea name to something different, square brackets [] can be used here
'textarea_rows' => get_option('default_post_edit_rows', 10), // rows="..."
'tabindex' => '',
'editor_css' => '', // extra styles for both visual and HTML editors buttons,
'editor_class' => '', // add extra class(es) to the editor textarea
'teeny' => false, // output the minimal editor config used in Press This
'dfw' => false, // replace the default fullscreen with DFW (supported on the front-end in WordPress 3.4)
'tinymce' => true, // load TinyMCE, can be used to pass settings directly to TinyMCE using an array()
'quicktags' => true // load Quicktags, can be used to pass settings directly to Quicktags using an array()
);
wp_editor( "My content", $editor_id, $settings );
I had a small problem in my wordpress code I need to show a wordpress wp_editor in my page where it has array of values.the values are defined like the following
$fields[] = array(
'name' => __('Class', 'my-theme'),
'desc' => __('', 'my-theme'),
'id' => 'class'.$n,
'std' => ( ( isset($class_text[$n]['class']) ) ? $class_text[$n]['class'] : '' ),
'type' => 'text');
When I define my wp_editor like the above array it doesn't display where I want. Instead all the editors displayed at the top before any content in all pages.
I tried like the following set of array for the editor:
$fields[] = array(
'name' => __('My Content', 'my-theme'),
'id' => 'sectioncontent'.$n,
'std' => ( ( isset($class_text[$n]['content']) ) ? $class_text[$n]['content'] : '' ),
'type' => wp_editor( '', 'sectioncontent'.$n ));
Attached the image of my problem:
Cause
By default wp_editor prints the textarea that's why you cannot assign it to any variable or array.
Solution
you can use output buffering of php to get printed data in variable like this:
ob_start(); // Start output buffer
// Print the editor
wp_editor( '', 'sectioncontent'.$n );
// Store the printed data in $editor variable
$editor = ob_get_clean();
// And then you can assign that wp_editor to your array.
$fields[] = array(
'name' => __('My Content', 'my-theme'),
'id' => 'sectioncontent'.$n,
'std' => ( ( isset($class_text[$n]['content']) ) ? $class_text[$n]['content'] : '' ),
'type' => $editor); // <-- HERE
Looks to me like you're using Redux Framework to set up your theme/plugin option page - If you are looking to add the default Wordpress WYSIWYG (What You See Is What You Get - the same editor from the edit post page in the backend) editor in there you'll need to use the type: 'editor'.
It can be confusing - the wp_editor() function you are using is the right place to start if you were setting up this options page from scratch, but you'd need to do quite a bit of work to have it display where and how you want it. Redux et al make this quite a bit easier for you by generating the editor for you, so instead of you using the wp_editor function at all you just tell Redux that you want an editor field called 'My Content' to be one of the fields on the page.
The documentation for the editor field is here: https://docs.reduxframework.com/core/fields/editor/
If I am correct that you are using redux, the correct code to replace what you have is:
$fields[] = array(
'name' => __('My Content', 'my-theme'),
'id' => 'sectioncontent'.$n,
'std' => ( ( isset($class_text[$n]['content']) ) ? $class_text[$n]['content'] : '' ),
'type' => 'editor');
To explain the other parts of this field array:
'Name' will be what shows up in the label for this field. In this case you are using the localization functions in wordpress (__()) to get a phrase from the local dictionary in the 'my-theme' domain.
'id' is what you will use to retrieve what has been entered into this field. It will also affect the ID attribute assigned to the HTML elements in the options page.
'std' is the default for the field, which will be the value of the field when the options page is first displayed, before the user has set any options
On the editor documentation page linked above, you'll see the details of various other options you can define, like whether to show Media Upload buttons, and whether to run the input through wpautop to replace line breaks in the editor with <p> tags (by default both of these are true).
Initial issue:
My client wanted an custom HTML rendering sidebar widget for their wordpress site. I created a simple one that allows them to choose the color (class switching) and gives them a textarea to put their HTML into. Now they have requested a basic WYSIWYG interface attached to it (CKEditor or TinyMCE) but I dont know how to add it to the textarea inside the widget code. Does anyone know how, have an example, or a place to see how it can work? Thanks!
EDIT (After use of wp_editor):
So I have my code to this point but the editor is disabled and not able to be used. Any ideas why?
<fieldset>
<label>Enter your HTML</label>
<?php
$settings = array(
'wpautop' => true,
'media_buttons' => false,
'tinymce' => array(
'theme_advanced_buttons1' => ',bold,italic,underline,|,link,unlink',
),
'quicktags' => false
);
$bodyID = $this->get_field_id('body');
$content = '';
wp_editor($content, $bodyID, $settings );
?>
</fieldset>
Use wp_editor function, your code will look something like this:
http://codex.wordpress.org/Function_Reference/wp_editor
<fieldset>
<label> Your label for the text area </label>
<?php
$settings = array(
'wpautop' => true,
'media_buttons' => false,
'tinymce' => array(
'theme_advanced_buttons1' => 'formatselect,|,bold,italic,underline,|,' .
'bullist,blockquote,|,justifyleft,justifycenter' .
',justifyright,justifyfull,|,link,unlink,|' .
',spellchecker,wp_fullscreen,wp_adv ',
),
'quicktags' => false
);
wp_editor('initial content', 'id of textarea', $settings );
?>
</fieldset>
Note that if you want to put the content in the WP database from front end you should use in addition wp_insert_post function and a POST varible as a link.
I've added some div wrapper styles to Wordpress, but when I use them in the page, it is impossible to add content below them in the page. CSS:after works inside the divs to create a selectable area, but it doesn't work to create a selectable area after the div.
In my functions.php I have:
function my_mce_before_init( $settings ) {
$style_formats = array(
array(
'title' => 'Box Two Columns',
'block' => 'div',
'classes' => 'twocolbox',
'wrapper' => true
),
array(
'title' => 'Image with Caption',
'block' => 'div',
'classes' => 'img_caption',
'wrapper' => true
),
array(
'title' => 'Gallery Horizontal',
'block' => 'div',
'classes' => 'scroller horizontal',
'wrapper' => true
)
);
$settings['style_formats'] = json_encode( $style_formats );
return $settings;
}
add_filter('tiny_mce_before_init', 'my_mce_before_init');
add_editor_style();
Is there a way to use execCommand here to add some html after the div styles I defined? To add something like an empty paragraph tag afterwards with a clear float?
I tried:
tinyMCE.execCommand('mceInsertContent',false,'Hello world!!');"
MCE editor breaks then.
...
Tried this but it's too buggy:
In editor-styles.css:
#tinyMCE:after {
content: " ";
clear:both;
width: 4em; height:4em;
}
Note that you may need to clear cache AND shift-reload button to see any changes to editor-styles.css in Wordpress.
...
Still working on this. Found a thread:
To access tinymce iframe elements through jquery
I tried adding the code in this thread to my_mce_before_init, but it just broke.
....
Also tried loading a jQuery script, but the target paths wouldn't work on the TinyMCE iframe. None of these selectors work:
jQuery(document).ready(function($) {
$("#tinyMCE").find("div").after('<p style="width:100%; clear:both; height:1em;"> 6789</p>');
$("div").css("color","red");
$("#content_ifr").contents().find("div").after('<p style="width:100%; clear:both; height:1em;"> 6789</p>');
$("#content_ifr").contents().find("#tinymce p").css("color","red");
$("#wp-content-editor-container").find("textarea").css("color","red");
$("iframe").contents().find("p").css("color","red");
$('#content_ifr').load(function(){
$('#content_ifr').contents().find('p').css("color","red");
});
});
You can add html pseudo elements using the tinymce configuration option content_css.
There you can define after elements. Give it a try!
Update:
When initializing tinymce set the setup paramter to the following (inside tinyMCE.init({...})
...
theme: "advanced", // example param
setup : function(ed) {
ed.onInit.add(function(ed, evt) {
$("#content_ifr").contents().find("p").css("color","red");
// other approach
//$(ed.getBody()).find('p').css("color","red");
});
},
cleanup: true, // example param
...