TinyMCE color formating is putting in to span tag,
now I need when ever user change color for a text add
one extra character
(for those who may wonder way I need this, read this: Inserting HTML tag in the middle of Arabic word breaks word connection (cursive))
so this is how TinyMCE normaly format text:
<p><span style="color: #ff6600;">forma</span>tings</p>
this is how I need to be:
<p>X<span style="color: #ff6600;">forma</span>tings</p>
so before any span I need to add one extra character.
I was searching throug TinyMCE source but I couldn't find where it assembly this.
I totaly understand your need for a word-joiner.
Depending on the browser you might be able to insert this character using a css-pseudo element - in this case before: http://www.w3schools.com/cssref/sel_before.asp
Your tinymce content css (use the tinymce init setting content_css) should contain the following:
body span:before {
content:'\2060'; // use '\00b6' to get something visible for testing
}
UPDATE: Approch2:
You can do this check to enter your word joiners:
var ed = tinymce.get('content') || tinymce.editors[0];
var span = $(ed.getBody()).find('span:not(.has_word_joiner)').each(function(index) {
ed.selection.select(this);
ed.execCommand('mceInsertContent', false, '\u2060<span class="has_word_joiner">'+this.innerHTML+'</span>'); // you might want to add the formerspan attributes too, but that is a minor issue
});
You might need to call this using an own plugin on special events.
Related
I'm a bit stuck. I have scraped a website and would now like to convert it into markdown. My html looks like this:
Some text more text, and more text. Some text more text, and more text.
Once in a while <span class="bold">something is bold</span>.
Then some more text. And <span class="bold">more bold stuff</span>.
There are html to markdown modules available, however, they would only work if the text <b> looked like this </b>.
How could I go through the html, and everytime I find a span which is supposed to bold something, turn this piece of the html into bold markdown, that is, make it **look like this**
Try this one https://github.com/domchristie/to-markdown, an HTML to Markdown converter written in JavaScript.
It can be extended by passing in an array of converters to the options object:
toMarkdown(stringOfHTML, { converters: [converter1, converter2, …] });
In your case, the converter can be
{
filter: 'span',
replacement: function(content) {
return '**' + content + '**';
}
}
Refer to its readme for more details.
Notepad++ is an open-source editor that supports regex. This picture shows the basic idea.
You know how to use an editor to find and replace strings. In an editor like Notepad++ you can look for string patterns and replace parts of the patterns and keep what's left. In your case, you want to find strings that are framed by HTML markup. Here the regex in the 'Find what' edit box displays that, with the special notation ([^<]*) meaning save zero or more of any character other than the '<' for use in a replacement string. The 'Replace with' edit box says used what was saved (as \1) in the expression **\1** which gives you what you prefer to have in the text file. It remains to click on 'Replace all'.
To be able to do this you need to install Notepad++ and learn some basic Perl regex. To get this dialogue box click on Ctl-H. Of course, if you get it wrong there's always Ctl-Z.
I have a textarea containing a text like:
Foo 📷 Bar
When I apply CKeditor on that area it correctly displays it as:
Foo 📷 Bar
Which is fine.
But unfortunately it convertes 📷 to 📷 while doing so.
Can I disable this somehow?
Edit
I tried Enities addon with the setting entities_additional set to true.
This setting actually breaks the 📷 character into 📷 which is invalid. I'm sure this is a bug and the Enitiy Plugin can't handle multibyte characters.
By default CKEditor should translate entities with either this entities_processNumerical : force or this entities_additional:'#128247' setting.
This is however not the case for 4-byte entities as they get destroyed most likely by replace method.
I have reported this issue here: https://dev.ckeditor.com/ticket/14588
I had a similar problem, my textarea using CKEditor was adding the encoded HTML tags as plain text, so when I displayed the output on a web page the HTML tags showed up as: <p> in the page and not which one would not normally see in the browser (one would only see result, the actual paragraph spacing).
I tried all combinations of:
config.entities = false
config.htmlEncodeOutput = false;
config.entities = true
config.htmlEncodeOutput = true;
Nothing worked until I realised that I was using the PHP htmlspecialchars() in my form to parse the textarea field.
By removing htmlspecialchars() in my form for that field and setting:
config.entities = true;
I resolved the problem.
I Got a solution, Please use "htmlspecialchars" like echo htmlspecialchars( $content );
This will convert "&" to "& ;".
I need to bold the words inside of double quotes.
title="Character needs to be bold"
When i put <b></b> inside of title's double quote. it just displays them as it is.
So, Is there any way i can bold the characters inside the double quotes?
Are you trying to markup the text inside a title attribute? Because that's not going to work, you'll have to resort to some kind of extended tooltip solution (can be js, but there's also ways to do it with just html/css).
See this question:
Tooltip with HTML content without JavaScript
Some more context would be appreciated though, just the title attribute doesn't give us much information
Title was edited to give context, my answer remains the same.
There is a way depending on the node you are using the 'title' attribute under. See if it has a 'format' attribute as by default the title is set to 'text'. If so, set the format="html", then you will be able to use <b> within your title.
As far as i know you cannot format the string, that is used as the title of a html document. That ist the String, that will get the titel of the tab or window of the browser etc.
If you have a html-entity, that needs formatting, you can format the whole thing with style="your css style", or other css integration. If you have a switch of formatting inside one html entity, you schould look after dividing it up into multiple entities or using another aproach. Do you have a complete example?
cheers,
nx
use < b > Character needs to be bold < / b>
no spaces in between the b and the symbols
From wikipedia:
Cursive (from Latin curro, currere, cucurri, cursum, to run, hasten) is any style of handwriting that is designed for writing notes and letters quickly by hand. In the Arabic, Latin, and Cyrillic writing systems, the letters in a word are connected, making a word one single complex stroke.
In the above languages when we want to format one single word with e.g. <span> tag to apply custom css style it breaks word conection, so is there any solution for this.
example this is for example normal arabic word: كتب
but when we want to color last letter in other color using the span tag get this:
because first two letter are in one tag and last is in other to color it.
Is there something I can do to avoid word breaks.
Here is the full html:
<p>كت<span style="color: Red;">ب</span></p>
I'm not sure if there's any HTML way to do it, but you can fix it by adding a zero-width joiner Unicode character before the opening span tag:
<p>كت<span style="color: Red;">ب</span></p>
You can use the actual Unicode character instead of the HTML character entity, of course, but that wouldn't be visible here. Or you can use the prettier entity.
Here it is in action (using an invisible <b> tag, since I can't do color here), without the joiner:
كتب
and with the joiner:
كتب
It's supposed to work without the joiner as far as I understand it, though, and it does in some browsers, but clearly not all of them.
Update 2020/5
Google Chrome (Checked version 81.0.4044.138) and Firefox (76.0.1) have solved this issue when rendreing Arabic and Farsi words and there is no more need to handle the situation manually. Simply wrap the keyword with <span style="color:red">Keyword</span> works fine with both connecting and non-connecting characters.
For this reason, you probably can not see the difference between Correct and Wrong examples below:
Main post:
After 7 years of accepted answer I would like to add a new answer with more practical details as my native language is Farsi. I assume that we want to replace a keyword within a long word. This answer considers the following details:
1- Sometimes it is not enough to add only to the previous character becase next character should also has a tail to complete the connection.
body{font-size:36pt;}
span{color:red}
Wrong: مک<span>انیک</span>
<br>
Correct: مک<span>انیک</span>
2- We may also need to add after the keyword to connect it to next character.
body{font-size:36pt;}
span{color:red}
Wrong: مک<span>انیک</span>ی
<br>
Correct: مک<span>انیک</span>ی
3- There are some characters that accept tail before but not after. So we have to exclude them from accepting tail after them. This is the list of non-connecting characters to next characters: ا آ د ذ ر ز ژ و
4- Finally to respect search engines and scrappers, I recommend using javascript (jquery) to replace keywords after DOM ready to keep the page source clean.
This is my final code with regards to all details above:
$(document).ready(function(){
var tail="\u200D";
var keyword="ستر";
$(".searchableContent").each(function(){
var htm=$(this).html();
/*
preserve keywords which have space both before and after
with a temp sign say #fullHolder#
*/
htm=htm.split(' '+keyword+' ').join(' #fullHolder# ');
/*
preserve keywords which have only space after
with a temp sign say #preHolder#
*/
htm=htm.split(keyword+' ').join('#preHolder#'+' ');
/*
preserve keywords which have only space before
with a temp sign say #nextHolder#
*/
htm=htm.split(' '+keyword).join(' '+'#nextHolder#');
/*
replace remaining keywords with marked up span.
Add tail to both side of span to make sure it is
connected to both letters before and after
*/
htm=htm.split(keyword).join(tail+'<span style="color:#ff0000">'+tail+keyword+tail+'</span>'+tail);
//Deal #preHolder# by adding tail only before the keyword
htm=htm.split('#preHolder#'+' ').join(tail+'<span style="color:#ff0000">'+tail+keyword+'</span>'+' ');
//Deal #nextHolder# by adding tail only after the keyword
htm=htm.split(' '+'#nextHolder#').join(' '+'<span style="color:#ff0000">'+keyword+tail+'</span>'+tail);
//Deal #fullHolder# by adding markup only without tail
htm=htm.split(' '+'#fullHolder#'+' ').join(' '+'<span style="color:#ff0000">'+keyword+'</span>'+' ');
//Remove all possible combination of added tails to non-connecting characters
var nonConnectings=['ا','آ','د','ذ','ر','ز','ژ','و'];
for (x = 0; x < nonConnectings.length; x++) {
htm=htm.split(nonConnectings[x]+tail).join(nonConnectings[x]);
htm=htm.split(nonConnectings[x]+'<span style="color:#ff0000">'+tail).join(nonConnectings[x]+'<span style="color:#ff0000">');
htm=htm.split(nonConnectings[x]+'</span>'+tail).join(nonConnectings[x]+'</span>');
}
$(this).html(htm);
})
})
div{font-size:26pt}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="searchableContent">
سترون - بستری - آستر - بستر - استراحت
</div>
which property is used for write all text for capitalize in textfield.
And how?
please reply
you can use css property "text-transform":
.myClassName {text-transform:capitalize;}
link for details
There's no attribute that says "this field can only contain capital letters". What you might be able to do is add text-transform: uppercase to the CSS for the text box, but the actual value of the box will still contain mixed case.
If that's not good enough, you could add an onchange event handler that says something like this.value = this.value.toUpperCase();. That'd alter the value passed back to the server, or the value your scripts see (as opposed to the CSS, which only alters the value the user sees).