When I add emoji as follows
<span lang=EN-US style='font-family:"Segoe UI Emoji",sans-serif;mso-fareast-language:EN-US'>😉</span>
into Tinymce 5 editor, it displays as usual, but when I save the content to the database, editor.getContent retrieves wrong code as below.
<p><span lang="EN-US" style="font-family: 'Segoe UI Emoji',sans-serif; mso-fareast-language: EN-US;">ߘ</span></p>
When I look at database I see it has been saved as ?? and when I open it with Tinymce again it display as ?? .
It seams Tinymce getContent could not retrieves 😉 in the correct way.
I use Javafx webView as wrapper to display Tinymce.
Anyone has any idea why, and how can we fix it?
Just add the entity_encoding: "numeric" , inside Tinymce configuration.
Characters will be converted into numeric entities.
For example, a non-breaking space would be encoded as  .
tinymce.init({
selector: 'editor',
width:'100%',
height: '100%',
entity_encoding: "numeric",
plugins: 'print preview paste,...
Related
I just started creating WP page with motors theme and it uses WPBakery builder. Now I added one of their STM widget. I can change all text in it but couldn't find how to change 'search' button text. Maybe you have any suggestions?
To edit strings inside of a plugin, there is a very good plugin for that:
https://wordpress.org/plugins/loco-translate/
With Loco Translate you can find strings inside of plugins / themes and edit them. This will work in most cases.
If Loco Translate does not solve your problem (remember to clear your caches), you can also look for the string inside the body of your page and replace it with javascript. Place this code at the end of your page, maybe inside the footer.php of wordpress. If it is not working, try changing "search" to "Search" or "SEARCH", so to make sure the plugin is not using another variant of the string (because of uppercase, you cannot see this). You can also inspect your page with your browser inspector and look what string exactly is inside the button without the css-style of text-transform: uppercase;
This code will replace all occurrences of the string "search".
<script>
document.body.innerHTML = document.body.innerHTML.replace(/search/g, 'your string');
</script>
Another solution would be to change the innerHTML of your button with javascript. This way, you are accessing your button element (i.e. by ID) and then set the content of this element with javascript:
document.getElementById("buttonID").innerHTML = "Text of button";
I need translated line of custom button in a code, but its not working my solution.
This is the line in file which I need translate (line 13, name of file: add-to-quote-button.php)
Quick Quote
There is my solution which is not working:
My solution
Additional informations:
name of my translated file: yith-woocommerce-request-a-quote-cs_CZ.mo
file location: plugins/woocommerce request a quote v1.6.1/templates/add-to-quote-button.php
There are two ways to do this.
One is a bit hacky and might get you into trouble if some huge change happens to woocommerce and other one is using CSS.
You could override that file in your child theme if you have one. if not you can do so in your parent theme.
Inside your theme folder create new folder 'woocommerce' and within woocommerce create 'templates' within that folder create file add-to-quote-button.php and copy whole content of the original file into this one and update that text.
Now that should overwrite woocommerce plugin file.
CSS Way would be to find class that's on that button - I'll name it 'someQuoteButton' just so I can give you an example.
.someQuoteButton {
font-size:0;
}
.someQuoteButton:after {
content: 'Some Content you Want';
font-size: 16px; // or any you need there
}
So you want to translate "Quick Quote" text in that line of code?
Try it like this:
<?php _e( 'Quick Quote', 'yith-woocommerce-request-a-quote') ?>
Tinymce offers an inline code formatting option that wraps the <code> tag around content. But WordPress does not include this. I think that there must be an easy way to enable it. I have seen discussing on how to do this in earlier versions of WP (with Tinymce 3) in threads like Add "code" button to wordpress tinyMCE ,
but I can't see how to "translate" this into Tinymce 4.
I tried the following. It gives me the Source Code but not the code tag.
// Add <code> support to the Visual Editor
// Load the code TinyMCE plugin
function my_TinyMCEplugins($plugin_array) {
$plugin_array['code'] = get_bloginfo('template_directory') . '/inc/code/plugin.min.js';
return $plugin_array;
}
add_filter('mce_external_plugins', 'my_TinyMCEplugins');
// Add the code button into the toolbar
function my_TinyMCE($in) {
$in['toolbar2'].=',code';
return $in;
}
add_filter('tiny_mce_before_init', 'my_TinyMCE' );
Thanks for any help!
Actually the TinyMCE code plugin is NOT used to insert <code> tags. It is used to edit the source html code, which is redundant in wordpress since you can just click the 'text' tab.
This wordpress plugin will add that functionality for you: https://wordpress.org/plugins/tinymce-code-button/screenshots/.
I'm working on a website with twitter share option for each specific product.
I followed twitter API instructions for tweet-sharing, and everything works fine except custom display of text. For example I want user to tweet like this:
"What do you think? Should I buy this? http://url.etc #mywebsite"
but all I get when user tweets is the link:
http://url.etc
This is the code:
<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
<a target="_blank" href="https://twitter.com/share" data-url="http://bit.ly/twitter-api-announce" data-via="testtest" data-text="What do you think? Should I buy this? " data-count="none" data-counturl="http://groups.google.com/group/twitter-api-announce" >TWITTER</a>
The problems seems to be with data-text option.
Any experience on this? Ideas?
Thanks
On Wordpress I just used Tweet
Works like a charm!
simply use a link like :
tweet
Just change what is between [] (and remove them)
note that everything have to be RFC (with weird chars such as 'space' replaced by %20 etc.)
twitter propose a nice page to make the buttons
https://about.twitter.com/resources/buttons#tweet
But my solution avoid the javascript to force the design of the buton
You can use this:
<a href='https://twitter.com/share?url=google.com&text=Signup>Tweet</a <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src='//platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','twitter-wjs');</script>
Confirm that you have included the correct twitter scripts . Better still, generate your tweet button code from the twitter developer interface here ..
https://about.twitter.com/resources/buttons
If you would like to modify the tweetbutton content on the fly ...e.g after page load, you will have to creat and insert your tweet button into the html DOM dynamically .
Some guidance on that can be found here .
http://denvycom.com/blog/twitter-button-with-dynamic-custom-data-text-message/
Hopefully this is helpful.
You have to encode your text before inserting it in the link. The correct procedure is:
Encode the text with an online tool like this one
Put the result inside an HTML link (as suggested by #FenixAoras): Share on Twitter
If you generate your HTML with php, you can use the urlencode function directly in your script:
echo "Share on Twitter";
If you are using WordPress, the best way is creating a shortcode, beacuse with it you can use also the native functions of WordPress:
function tweet_this($atts, $content = null)
{
extract(shortcode_atts(array(
"text" => ''
), $atts));
return "<a href='https://twitter.com/intent/tweet?text=".urlencode( $text." - ".get_the_title()." - ".get_permalink() )."'>Share on Twitter</a>";
}
add_shortcode( 'tweet_this', 'tweet_this' );
(Note: the code above is just a lead, you can expand it and you have to test)
Usage:
[tweet_this text="my custom text with #hashtag and #Mention"]
When pasting content from WORD a lot of the markup is being cleared up by using "Force cleanup on standard paste" using TinyMCE and WYSIWYG module. It seems however to leave in the following code:
<p> </p>
Is there any way so that I can filter this out?
The empty p tags were formerly placed to denote a change of line, however drupal wysiwyg automatically adds a non-breaking space tag which thereby fails to display properly and thus be replaced with the character replacement "?"
Working Solution:
$to_filter = array('bloc_1_delta', 'bloc_2_delta', 'bloc_3_delta', 'bloc_4_delta');
if (in_array($vars['block']->delta, $to_filter)) {
$vars['block']->content = str_replace("<p></p>", "<br/>", mb_cοnvert_encoding($vars['block']->content, 'HTML-ENTITIES', 'UTF-8'));
}
Are you sure that it's caused by TinyMCE and WYSIWYG? It can also be the combination of a setting in WYSIWYG (when "Remove linebreaks" is off) and your input filter settings ("Line break converter" is on).
As far as i know does tinymce have a clean code function.
When this one is called it should remove the empty paragraphs.
But you should have to try this...
This happens in almost every js WYSIWYG. Altering the "paste from word" behavior specifically would involve patching or extending the timymce/wysiwyg javascript, but if you don't care where empty <p> tags come from and want to get rid of every one that is submitted, you have some options.
[edited my answer after I had to do this recently again myself]
If you need a lot of html correction/rewriting you probably should look at the HTML Purifier module. It has an advanced option to remove empty and nbsp filled HTML elements, along with correction and xss filtering. But it's slow.
There's the Empty Paragraph Killer module, but it doesn't work for D7 right now so you can skip that.
The most direct solution is to write your own input filter in a custom module. There's an example filter module here you can copy and learn from. Or you can just copy mine:
/* Implements hook_filter_info(). */
function YOURMODULE_filter_info() {
$filters['kill_empty'] = array(
'title' => t('Kill Empty Paragraphs'),
'description' => t('Remove paragraphs that contain only whitespace (including line breaks and \'s) that are often inserted by editors using WYSIWYGs.'),
'process callback' => '_YOURMODULE_kill_empty',
'tips callback' => '_YOURMODULE_kill_empty_tips',
);
return $filters;
}
/* Process callbacks, where the work is done. */
function _YOURMODULE_kill_empty($text, $filter) {
// Remove all <p> tags containing only nbsp's, white space, or nothing.
return preg_replace('/<p[^>]*>( |\s)*<\/p>/', '', $text);
}
/* Tips for the content editor, if you want them. I usually take these out. */
function _YOURMODULE_kill_empty_tips($filter, $format, $long = FALSE) {
if (!$long) {
// This string will be shown in the content add/edit form.
return t('Use one [enter] to create a new paragraph. More than one will be ignored.');
}
else {
// And this one on the "Filter Tips" page.
return t('To maintain consistancy in content display, empty paragraphs inserted by WYSIWYG editors will be removed.');
}
}
Put all of that in a custom module, go to configuration and edit your text formats, and activate the "Kill Empty Paragraphs" filter. That should be it.
Last note is that if you really want them gone, like not-in-the-database, will-never-come-back gone, you should be able to use this filter with the Sanitizable module to remove all of the empty <p>s on submit. The usual warnings about messing with content before it goes into the database apply.
You don't always need the above hacks. as marcvangend mentioned but in plainer english you can change it in settings.
Go to drupal administer
Site configuration
Input formats
configure the input format of your choice
unselect "Line break converter"
A quick and easy way is just to put something like this in your theme's template.php:
<?php
function THEMENAME_preprocess_node(&$vars, $hook) {
$vars['content'] = str_replace('<p> </p>','', $vars['content']);
}
That just does a quick find and replace to replace the empty paragraph with nothing. It's sort of a hack, but it works.