TinyMCE 4 valid_elements Default Rule Set - configuration

Does anyone know if the default rule set for valid_elements in TinyMCE 4 is the same as the one defined in TinyMCE 3, as it is missing from the documentation for TinyMCE 4 (have put a request in for it to be added).
valid_elements TinyMCE 4 documentation - missing the default rule set
valid_elements TinyMCE 3 documentation - includes the default rule set
Thanks

I looked this up in the source. Unfortunately it's not in the form of a single handy string, but it should give you the information you need.
Most of it is in the form add(ELEMENT, ALLOWED_ATTRIBUTES)
// HTML4 base schema TODO: Move HTML5 specific attributes to HTML5 specific if statement
// Schema items <element name>, <specific attributes>, <children ..>
add('html', 'manifest', 'head body');
add('head', '', 'base command link meta noscript script style title');
add('title hr noscript br');
add('base', 'href target');
add('link', 'href rel media hreflang type sizes hreflang');
add('meta', 'name http-equiv content charset');
add('style', 'media type scoped');
add('script', 'src async defer type charset');
add('body', 'onafterprint onbeforeprint onbeforeunload onblur onerror onfocus ' +
'onhashchange onload onmessage onoffline ononline onpagehide onpageshow ' +
'onpopstate onresize onscroll onstorage onunload', flowContent);
add('address dt dd div caption', '', flowContent);
add('h1 h2 h3 h4 h5 h6 pre p abbr code var samp kbd sub sup i b u bdo span legend em strong small s cite dfn', '', phrasingContent);
add('blockquote', 'cite', flowContent);
add('ol', 'reversed start type', 'li');
add('ul', '', 'li');
add('li', 'value', flowContent);
add('dl', '', 'dt dd');
add('a', 'href target rel media hreflang type', phrasingContent);
add('q', 'cite', phrasingContent);
add('ins del', 'cite datetime', flowContent);
add('img', 'src sizes srcset alt usemap ismap width height');
add('iframe', 'src name width height', flowContent);
add('embed', 'src type width height');
add('object', 'data type typemustmatch name usemap form width height', [flowContent, 'param'].join(' '));
add('param', 'name value');
add('map', 'name', [flowContent, 'area'].join(' '));
add('area', 'alt coords shape href target rel media hreflang type');
add('table', 'border', 'caption colgroup thead tfoot tbody tr' + (type === 'html4' ? ' col' : ''));
add('colgroup', 'span', 'col');
add('col', 'span');
add('tbody thead tfoot', '', 'tr');
add('tr', '', 'td th');
add('td', 'colspan rowspan headers', flowContent);
add('th', 'colspan rowspan headers scope abbr', flowContent);
add('form', 'accept-charset action autocomplete enctype method name novalidate target', flowContent);
add('fieldset', 'disabled form name', [flowContent, 'legend'].join(' '));
add('label', 'form for', phrasingContent);
add('input', 'accept alt autocomplete checked dirname disabled form formaction formenctype formmethod formnovalidate ' +
'formtarget height list max maxlength min multiple name pattern readonly required size src step type value width'
);
add('button', 'disabled form formaction formenctype formmethod formnovalidate formtarget name type value',
type === 'html4' ? flowContent : phrasingContent);
add('select', 'disabled form multiple name required size', 'option optgroup');
add('optgroup', 'disabled label', 'option');
add('option', 'disabled label selected value');
add('textarea', 'cols dirname disabled form maxlength name readonly required rows wrap');
add('menu', 'type label', [flowContent, 'li'].join(' '));
add('noscript', '', flowContent);
// Extend with HTML5 elements
if (type !== 'html4') {
add('wbr');
add('ruby', '', [phrasingContent, 'rt rp'].join(' '));
add('figcaption', '', flowContent);
add('mark rt rp summary bdi', '', phrasingContent);
add('canvas', 'width height', flowContent);
add('video', 'src crossorigin poster preload autoplay mediagroup loop ' +
'muted controls width height buffered', [flowContent, 'track source'].join(' '));
add('audio', 'src crossorigin preload autoplay mediagroup loop muted controls ' +
'buffered volume', [flowContent, 'track source'].join(' '));
add('picture', '', 'img source');
add('source', 'src srcset type media sizes');
add('track', 'kind src srclang label default');
add('datalist', '', [phrasingContent, 'option'].join(' '));
add('article section nav aside main header footer', '', flowContent);
add('hgroup', '', 'h1 h2 h3 h4 h5 h6');
add('figure', '', [flowContent, 'figcaption'].join(' '));
add('time', 'datetime', phrasingContent);
add('dialog', 'open', flowContent);
add('command', 'type label icon disabled checked radiogroup command');
add('output', 'for form name', phrasingContent);
add('progress', 'value max', phrasingContent);
add('meter', 'value min max low high optimum', phrasingContent);
add('details', 'open', [flowContent, 'summary'].join(' '));
add('keygen', 'autofocus challenge disabled form keytype name');
}
// Extend with HTML4 attributes unless it's html5-strict
if (type !== 'html5-strict') {
addAttrs('script', 'language xml:space');
addAttrs('style', 'xml:space');
addAttrs('object', 'declare classid code codebase codetype archive standby align border hspace vspace');
addAttrs('embed', 'align name hspace vspace');
addAttrs('param', 'valuetype type');
addAttrs('a', 'charset name rev shape coords');
addAttrs('br', 'clear');
addAttrs('applet', 'codebase archive code object alt name width height align hspace vspace');
addAttrs('img', 'name longdesc align border hspace vspace');
addAttrs('iframe', 'longdesc frameborder marginwidth marginheight scrolling align');
addAttrs('font basefont', 'size color face');
addAttrs('input', 'usemap align');
addAttrs('select', 'onchange');
addAttrs('textarea');
addAttrs('h1 h2 h3 h4 h5 h6 div p legend caption', 'align');
addAttrs('ul', 'type compact');
addAttrs('li', 'type');
addAttrs('ol dl menu dir', 'compact');
addAttrs('pre', 'width xml:space');
addAttrs('hr', 'align noshade size width');
addAttrs('isindex', 'prompt');
addAttrs('table', 'summary width frame rules cellspacing cellpadding align bgcolor');
addAttrs('col', 'width align char charoff valign');
addAttrs('colgroup', 'width align char charoff valign');
addAttrs('thead', 'align char charoff valign');
addAttrs('tr', 'align char charoff valign bgcolor');
addAttrs('th', 'axis align char charoff valign nowrap bgcolor width height');
addAttrs('form', 'accept');
addAttrs('td', 'abbr axis scope align char charoff valign nowrap bgcolor width height');
addAttrs('tfoot', 'align char charoff valign');
addAttrs('tbody', 'align char charoff valign');
addAttrs('area', 'nohref');
addAttrs('body', 'background bgcolor text link vlink alink');
}
// Extend with HTML5 attributes unless it's html4
if (type !== 'html4') {
addAttrs('input button select textarea', 'autofocus');
addAttrs('input textarea', 'placeholder');
addAttrs('a', 'download');
addAttrs('link script img', 'crossorigin');
addAttrs('iframe', 'sandbox seamless allowfullscreen'); // Excluded: srcdoc
}
For those interested, it's in tinymce/src/core/main/ts/api/html/Schema.ts around line 250;

TinyMCE has since updated the documentation for TinyMCE 4. There is actually no default option for this tag anymore.
The default rule set for this option is a mixture of the full HTML5
and HTML4 specification or the HTML5 or HTML4 specification depending
on the configured schema.

Related

Color and background button not appear in my CKEditor Widget Template

I Create a CKEditor Widget and the color and background color not enable when I Select for example a paragraphe.
Here is my widget
CKEDITOR.plugins.add( 'applivewidget', {
requires: 'widget',
icons: 'applivewidgetLeftCol,applivewidgetRightCol,applivewidgetThreeCol,applivewidgetTwoCol',
init: function( editor ) {
// Configurable settings
var allowedText = editor.config.applivewidget_allowedText != undefined ? editor.config.applivewidget_allowedText : 'font;div{background-color};h2{color};p{color, font} [font];span;br;ul;ol;li;strong;em;h3;img{ height, width } [!src,width,height];';
CKEDITOR.dialog.add( 'applivewidgetLeftCol', this.path + 'dialogs/applivewidget.js' );
var showButtons = editor.config.applivewidgetShowButtons != undefined ? editor.config.applivewidgetShowButtons : true;
// Define the widgets
editor.widgets.add( 'applivewidgetLeftCol', {
button: showButtons ? 'Add left column box' : undefined,
dialog: 'applivewidgetLeftCol',
template:
'<div class="span_wrapper col_1_2">' +
'<div class="span equal edit1 span1_3 wow bounceIn"><p class="nopadding"><img src="/sites/all/themes/cefort/images/img450_375.png" /></p></div>' +
'<div class="span equal edit2 span2_3 wow bounceIn"><h2>Sub Title</h2><p>Content</p></div>' +
'</div>',
init: function() {
var bgc = this.element.getChild(0).getStyle( 'background-color' );
if ( bgc )
this.setData( 'bgc', bgc );
},
data: function() {
if ( this.data.bgc == '' )
{
this.element.getChild(0).removeStyle( 'background-color' );
this.element.getChild(1).removeStyle( 'background-color');
}
else
{
this.element.getChild(0).setStyle( 'background-color', '#'+this.data.bgc );
this.element.getChild(1).setStyle( 'background-color', '#'+this.data.bgc );
}
},
editables: {
col1: {
selector: '.edit1',
allowedContent: allowedText
},
col2: {
selector: '.edit2',
allowedContent: allowedText
}
},
allowedContent: allowedText,
upcast: function( element ) {
return element.name == 'div' && element.hasClass( 'col_1_2' );
}
} );
I'm not able to select my text color of the previous widget.
Please help
Thanks
The issue comes from your allowedText content, which I seem pretty weird.
Here is its content, where I added spaces to make it more readable:
'font; div{background-color}; h2{color}; p{color, font} [font]; span; br; ul; ol; li; strong; em; h3; img{ height, width } [!src,width,height];'
First you directly quote font, which is no longer a valid element in HTML 5: so it has no effect here.
Then you allow font style and font attribute to p element: both have only a chance to be useful if some (already entered) content quotes them. The same remark applies to div{background-color}, h2{color} and p{color}.
All these specifications don't meet the way CKEditor creates font or color styles variations, which is like <span style="font-family:...">, <span style="font-style:...">, <span style="color:..."> or <span style="background-color:...">.
So for your text color feature to be active you must write span {color}, or span {background-color} for background color feature, and so on.
More simply I suggest you merely write span {*} to have all of these features active, unless you want to specifically limit what is allowed.
Also note that you may simplify your allowedContent string where a number of elements share the same properties (or not property at all), like in br ul ol li strong em h3;.

How to toggle form element visibility in Play framework 2.0?

For example I have some form which looks like this:
#main{
<fieldset>
#inputText(myForm"Id"),'_label -> "Id")
#checkbox(myForm("isEnabled"))
#inputText(myForm("someOptionvalue"))
</fieldset>
}
What I need is that if isEnabled is checked - someOptionValue inputText should be shown.
This checkbox is just an example and it can be any other element. I want to know how to show\hide elements depending on other elements. Sorry for my bad English. I hope somebody can help.
add I think I should use java script but i don't know how inject js functions in play view templates
The Play's form elements you used are Play Scala templates used to generate plain html.
For your purposes I think you should just use javascript the way you would any html form. An example would be:
<script type="text/javascript">
window.onload = function(e) {
document.getElementById("myCheck").onclick = function() {
showHideElement();
};
showHideElement();
}
function showHideElement() {
var checked = document.getElementById("myCheck").checked;
var el = document.getElementById("myOptionValue");
if (checked) {
el.style.display = 'block'
} else {
el.style.display = 'none'
}
}
</script>
Your checkbox and input text template should both have id attributes added to them, example:
#checkbox(myForm("isEnabled"), 'id -> "myCheck")
#inputText(myForm("someOptionvalue"), 'id -> "myOptionValue")
Just for info you could add more attributes to the tags above like CSS style class, example:
#inputText(myForm("name"),
'id -> "username",
'class -> "classForInputText",
'_id -> "idForTheTopDlElement",
'_class -> "classForTheTopElement",
'size -> 30
)
You can then set the display to none or block

PHP - Display all characters in html textarea (newline, whitespace included)

I have a text field in MySQL that contains an e-mail template.
I build an admin interface where the admin will be able to display the content in a <textarea></textarea> and edit it.
It works great, but I'd like to actualy see the whitespaces and the \r\n, something like Notepad++ "Show All Characters" button.
Here is the email template, as it is currently shown in textarea:
And this is how I'd like to see it, like Notepad++ shows it, displaying the newlines and the whitespaces:
How can I do that using php? Should I just escape the \r\n from the database to make them to show up, or is there an other way?
Update.
I did manage to create a toggle button that displays whitespaces and newlines, even while typing.
See example demo http://jsfiddle.net/QshDd/80/
Here is where I found some of this interesting code: http://www.kristofdegrave.be/2012/03/javascript-change-entered-character-in.html
An approach:
before adding the text to the textarea you could make an replacement of the newline characters with some other "special" characters. Then at post before saving the content of textarea in mysql switch the "special" characters with the newline characters
You can use TinyMCE. Here is the reference link http://www.tinymce.com/tryit/full.php
Just give id to your text area like
<textarea id="tinyeditor" ></textarea>
In your script customize your requirement like
var editor = new TINY.editor.edit('editor', {
id: 'tinyeditor',
width: 584,
height: 175,
cssclass: 'tinyeditor',
controlclass: 'tinyeditor-control',
rowclass: 'tinyeditor-header',
dividerclass: 'tinyeditor-divider',
controls: ['bold', 'italic', 'underline', 'strikethrough', '|', 'subscript', 'superscript', '|',
'orderedlist', 'unorderedlist', '|', 'outdent', 'indent', '|', 'leftalign',
'centeralign', 'rightalign', 'blockjustify', '|', 'unformat', '|', 'undo', 'redo', 'n',
'font', 'size', 'style', '|', 'image', 'hr', 'link', 'unlink', '|', 'print'],
footer: true,
fonts: ['Verdana','Arial','Georgia','Trebuchet MS'],
xhtml: true,
cssfile: 'custom.css',
bodyid: 'editor',
footerclass: 'tinyeditor-footer',
toggle: {text: 'source', activetext: 'wysiwyg', cssclass: 'toggle'},
resize: {cssclass: 'resize'}
});
And last get value from data base in textarea on document ready
$(document).ready(function(){
var template_data = '<?php echo $database_result; ?>';
$("iframe").contents().find("#editor").html(template_data);
});

text_input: Placeholder keeps RTL while only change input to be LTR

The text-input now is RTL(both placeholder and the input). The attributes were set at some where else.
My question is how can I make a change that only changes the input to be LTR, while the placeholder remains RTL.
Example:
Initially, the text box is like
When it gets focus, the input should be LTR. Because the URL is LTR.
If user didn't type anything and the box lost focus, the placeholder should show up and keep RTL.
Can anyone help me with this? Thanks.
You can use this code.
//jQuery
(function($) {
$.fn.dir_auto = function() {
var selector = '.inputs-nyn[dir="auto"]';
var sclass = "auto-nyn05";
var ftime = true;
if ( $(selector).length ) {
$(document).on("keyup", selector , function() {
if( ftime || !$(this).val() ){
if( !$(this).val() ){
$(this).addClass(sclass);
ftime = true;
}
else{
$(this).removeClass(sclass);
ftime = false;
}
}
});
}
};
})(jQuery);
$(document).ready(function() {
$.fn.dir_auto();
});
//css
body{
direction: rtl;
}
.inputs-nyn.auto-nyn05[dir="auto"] {
direction: rtl;
}
.inputs-nyn[dir="auto"]::placeholder {
text-align: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- HTML -->
<input class="inputs-nyn auto-nyn05" dir="auto" placeholder="متن فارسی..." type="text">
You cannot do that with HTML markup, since the dir attribute sets the basic directionality of all attributes of the element (and the element content, if it has content).
What you can do is to override the basic directionality for an attribute at the character level. This means that you set the element’s directionality to LTR (so that the value will appear that way) but use U+202B RIGHT-TO-LEFT EMBEDDING at the start of the placeholder value and U+202C POP DIRECTIONAL FORMATTING at its end. This will make it an “RTL island”. E.g.,
<input ... dir=ltr placeholder="‫...‬">
Unfortunately, the placeholder text will then appear as left-aligned (due to the element’s directionality). But the directionality of that text will be RTL.

InfoWindow: Setting lang attribute inside div tag not working

I am trying to set language attribute to some value other than
"en" [say "ko"] inside a div tag. The content string that I create in
this way is being used to set the InfoWindow's setContent(). Unfortunately, I continue to see the text in English rather than the language value I have defined.
Here are the relevant pieces of code:
content_string = '<div style="width: 210px; padding-right: 10px" lang="ko" xml:lang="ko">' + biz_name_html + '<br>' + biz_addr + '<br>' + biz_url_html + '<br>' + biz_phone + '<br>' + biz_description + '</div>';
marker = new google.maps.Marker({
position: latlng,
map: map,
title: biz_name,
html: content_string,
icon: new google.maps.MarkerImage(marker_icon_url)
});
google.maps.event.addListener(marker, 'click', function() {
info_window.setContent(this.html);
info_window.open(map, this);
});
Defining the lang attribute will not convert text to a specified language. From the htmlhelp.com
The LANG attribute specifies the language of an element's attribute
values and its content, including all contained elements that do not
specify their own LANG attribute. While the LANG attribute is not
widely supported, its use may help search engines index a document by
its language while allowing speech synthesizers to use
language-dependent pronunciation rules. As well, visual browsers can
use the language's proper quotation marks when rendering the Q
element.
Actually putting Korean into your div tag (or using the character codes) will display correctly, such as :
content_string = '<div style="width: 210px; padding-right: 10px" lang="ko" xml:lang="ko">구결 口訣</div>';