I'm having a hard time trying to make tiny mce editor work in the wordpress customizer.
It looks like just calling "wp_editor" from my WP_Customize_Control extension doesn't trigger loading of TinyMCE scripts in the customizer.
I've tried to load them manually like in this answer here: https://wordpress.stackexchange.com/questions/175307/tinymce-is-not-defined-when-not-using-wp-editor
and also tried with wp_enqueue_script('tiny-mce') but to no avail.
Here's my render method, nothing fancy:
public function render_content() {
?>
<label>
<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
<?php
$settings = array(
'media_buttons' => false,
'quicktags' => false,
'teeny' => true
);
wp_editor($this->value(), $this->id, $settings );
?>
</label>
<?php
}
Any suggestions on how this should be done right?
I managed to make it work. See my answer with a conclusive code sample on workdpress.stackexchange.
p.s. I too resorted to calling do_action('admin_print_footer_scripts') which is obviously a dirty hack as it includes a bunch of other unnecessary scripts on the customizer page but does the trick awaiting for a more elegant solution..
Ok, found out one solution but using wp_editor in the customizer means opening pandora's box.
Adding do_action('admin_print_footer_scripts'); before creating the editor:
do_action('admin_print_footer_scripts');
wp_editor($this->value(), $this->id, $settings );
will have TinyMCE get rendered. However, issues that still remain are:
updates in the rich text box are saved to the corresponding textarea, however events like "changed" or "keyup" that the wp.customize is watching for to do the postMessage are not triggered by the rich editor but only when changing directly the textarea.
because of the above, the "Save" button will not get enabled.
artificial triggering of the "changed" and "keyup" events on the textarea are not caught by wp.customize, hence the update callbacks in the preview area are not called
once every several customizer loads the tinymce will not be rendered completely, probably due to the way the admin scripts are loaded
Therefore, after much digging on this topic I realized that the wp_editor is not yet ready to be used reliably in other areas than posts editing.
Related
I have scoured WordPress, and TinyMCE documentation and stackoverflow and wordpress.stackexchange for an answer to this problem. Right now, I can see NO duplicates to this question.
I want to remove the menubar from a tinymce editor in a WordPress plugin admin page.
I am building a WordPress plugin. As part of the plugin's functionality a user has to add content using TinyMCE. I use wp_editor() which adds a TinyMCE instance to the plugin's admin page.
TinyMCE works fine. I have been able to configure buttons using this answer: https://stackoverflow.com/a/27872094/2298108 . However, this does not help remove or configure the menubar. I have tried adding menubar=>false to the tinymce array.
I've even looked for a frontend hack to access the editor and remove the menubar. Because WordPress instantiates tinymce, I have NO access to tinymce.init(). I have tried using the frontend event addeditor which fires, and gives "access" to the editor, but there doesn't seem to be any method to remove the menubar.
My php inline code:
$settings= ['menubar'=> false,'toolbar1' => 'formatselect,|,bold,italic,underline,|,hr,|bullist,numlist','toolbar2'=>false];
wp_editor($this->form_confirmation,'xxx_form_confirmation_mce',['editor_height'=>200,'media_buttons'=>false,'quicktags'=>false,'menubar' =>false,'tinymce' => $settings]);
$this->form_confirmation is a string and gets added to the content screen of the editor.
NOTE: I am using the "TinyMCE Advanced" WordPress plugin.
You can hook into tiny_mce_before_init to further customize the TinyMCE editor before it gets loaded.
This removed the menu bar for me:
function wp2641_disable_tinymce_menu_bar( $in ) {
$in['menubar'] = false;
return $in;
}
add_filter( 'tiny_mce_before_init', 'wp2641_disable_tinymce_menu_bar' );
I am having a problem with a site I am developing with wordpress.
It happened after upgrading to the latest version (4.7)
Anyway. Go to the site www.scientized.com (just dummy content for now), and go the source. At around line 124 you see the tag <style type="text/css" id="wp-custom-css"> and then after some css is loaded.
The thing is, is that this some of my old css code from way early. To make life easier and to isolate the problem I have delete all css in my child themes style.css as well as the custom css in the customizer, and delete jetpack just to be sure. Yet this css is being loaded from somewhere. I have file explored the crap out of my site trying to find where this is located, but couldn't find anything.
I have found that in the wp-includes/theme.php there is this function:
function wp_custom_css_cb() {
$styles = wp_get_custom_css();
if ( $styles || is_customize_preview() ) : ?>
<style type="text/css" id="wp-custom-css">
<?php echo strip_tags( $styles ); // Note that esc_html() cannot be used because `div > span` is not interpreted properly. ?>
</style>
<?php endif;
}
so this wp_get_customer_css() function is calling the old css from somewhere -- I tried to follow the functions back to see where - but my php is not that good and got lost. Does anyone know where this is being loaded from?
I think I need to know where the JetPack custom css location is. I have read it is generated dynamically -- so I am not sure how to go about the problem.
Edit: I dont get the text box in the custom css area in customizer. Where is this text located?
Edit: I dont get the text box in the custom css area in customizer. Where is this text located?
The Additional CSS content is stored in wp_posts database table as a separate record. It's post_type is set to custom_css. To find which post is assigned to the field, you need to look in the option theme_mods_{your theme's slug}.
For example, here is the one from my test Sandbox site which is running the Genesis Sample theme. The post ID is 31, per the key custom_css_post_id.
How do I check my site?
You can go directly into your database via phpMyAdmin and look in the wp_options table. Or...you can do this:
add_action( 'init', 'check_custom_css_post_id_theme_mod' );
function check_custom_css_post_id_theme_mod() {
var_dump( get_theme_mods() );
}
The above code will display the theme mods for your current theme. Note the one that is keyed as 'custom_css_post_id'. That one holds the ID to the post for the CSS.
How to Remove It
To remove a theme mod, you use remove_theme_mod( 'custom_css_post_id' );. See codex for the documentation on this construct. It will remove the binding between the Additional CSS. How? It deletes the sub-option.
Note, it does not delete the post record, meaning you'll have an orphaned record in wp_posts.
The wp-custom-css is loaded from custom css & js
I have determined that my plugin code works perfectly fine in other themes, but in the theme: Magazinly, the sidebar plugin I wrote, causes the sidebar not to display. Through debugging, I've determined that the sidebars register, and two sidebar arrays are created, but one is not populated.
Here is the plugin code:
register_sidebar(array(
'name'=>'Bottom Widget Area',
'id'=> 'bottom-widget',
'before_widget' => '<aside class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<div class="block-title"><span>',
'after_title' => '</span></div>'
));
include 'add_bottom_bar.php';
This is add_bottom_bar.php:
// Register Bottom_Bar
function add_bottom_widget(){
echo '<div class=\'bottombar\'>';
if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('bottom-widget')) :
endif;
echo '</div>';
}
add_action ('get_footer', 'add_bottom_widget');
// Register style sheet.
add_action( 'wp_enqueue_scripts', 'register_plugin_styles' );
// Register style sheet.
function register_plugin_styles() {
wp_register_style( 'custom_widget_final', plugins_url( 'custom_widget_final/css/bottom_bar.css' ) );
wp_enqueue_style( 'custom_widget_final' );
}
And here is the code for the sidebar in Magazinly:
http://pastebin.com/eJu7Wk3C
There's also this code that appears to use whatever this thing the theme creator called 'dinamic sidebar' to... well... I would imagine... render dynamic sidebars :
http://pastebin.com/T0LW3QTS
But, my guess is that this is the culprit: The Magazinly theme uses this sidebar loader, but it seems like serious overkill. I am guessing that the sidebar widget I'm registering, is disrupting this sidebar loader.
http://pastebin.com/jCtvjVqC
With all code presented, my next question is: what are my options? I need to add widget positions to three sites, all using the same theme, but preserve the sidebar. Presently, if I activate my plugin, the sidebar won't load, but the plugin works. If I deactivate the plugin, the sidebar returns.
Both are important, but I cannot modify the theme, and creating a child theme seems excessive. I'd prefer to debug this theme, and use widgets.
Here's what I have tried/tested:
Tested this plugin on four other WP sites. No issues. Sidebars render fine. Plugin works like a charm.
On problem site: wp_debug, set to true... throws no errors, but gives a warning for each of the theme's native sidebars (no id set, which is a pre 4.1 thing). To my knowledge, it does not affect anything.
I removed the include at the bottom, just to narrow down where the problem could be in my code. I determined that even when the css enqueue is disabled, or even if add_bottom_bar.php is not included, the theme's native sidebars still break. This makes it abundantly, totally clear to me that there is a register_sidebar conflict.
I've looked at the source when the plugin is activated, and when it is deactivated. I find after diffing the source, when the plugin is activated, the sidebars do not show in the source, so it is not a css/js thing, as far as I can tell.
What, if any workaround might there be for this? A widget would greatly improve workflow, but I'm beginning to consider that letting go of the sidebar/widget situation might be smarter.
Any hints, tips, or insight? I know my question is a bit general, but I've hit a brick wall, here, in trying to stay hands-off with this theme code.
Any help would be much appreciated! Thanks!
Ok. Figured it out.
add_action( 'widgets_init', 'bottom-widget' );
Needed to initialize the widget right after registering the sidebar.
i am newbie to wordpress theme development...
i know to create theme options in wordpress themes but now i want to use WYSIWYG Editor of wordpress, the wp_editor(), i have read some tuts on this but i can't make it...
here is my code:
add_settings_field('tinytxt', 'WYSIWYG: ', array($this, 'tinytxt'), 'oditer_theme_options', 'jd_theme_options_main_section');
public function tinytxt() {
wp_editor("{$this->options['tinytxt']}", 'tinytxtboom');
}
And how to retrieve the saved content from the database, i know to use get_option()...
thanks in advance...
You need to give your WordPress editor a name for the input, so that it can save the value.
wp_editor( $this->options['tinytxt'], 'tinytxtboom', array(
'textarea_name' => 'jd_theme_options[tinytxt]'
) );
This will give the hidden textarea wp_editor uses a name for the form submission. jd_theme_options matches the second argument to register_setting, and tinytxt is the option key you want to save the value under.
I think that's all you need. Comment if you have trouble. I'll be back tomorrow to check.
You could also try getting it to work with just a simple textarea, then try to get the wp_editor working.
When I use my CListView Widget in a page the fontsize of my whole website changes. I use flowtype to scale my fonts and keep everything responsive. Only when I use this widget everything changes, nog only the data of the widget itself.
I tried to turn the css styling of the widget of and tried to control it via an own css file, but this doesn't matter.
<?php $this->widget('zii.widgets.CListView', array(
'dataProvider'=>$dataProvider,
'itemView'=>'_view',
'cssFile'=>false,
)); ?>
The content of the view I'm calling doesn't matter either. Only when I remove the widget and put some text instead it changes back to normal.
Does someone have any idea what's happening here?
Quoted from official documentation for ClistView
cssFile property
public string $cssFile;
the URL of the CSS file used by this list view. Defaults to null,
meaning using the integrated CSS file. If this is set false, you are
responsible to explicitly include the necessary CSS file in your page.
Follow it, when you used CListView, default css .../listview/style.css file would be imported into your page, it could change your current layout if some of css is coincided with each other.
You can override it
$this->widget('zii.widgets.CListView', array(
'cssFile' => 'your-css-file-path.css',
...
)
So, eventually tried to copy the parsed code from the page source into my view. So in pagecode this was exactly the same output as the widget does in the page. Now I didn't had the resizing problem. So the widgets do something more then I can see.
For the solution I wrote an own widget to get my data in which I can control everything that happens. So no problem left anymore. Thanks for your help Telvin!