I have a problem with TinyMCE:
I need to get this code:
<blockquote>
<h2>REVOLUTIONARY QUOTE RELATING MANIFESTO TO PROJECT GOES HERE</h2>
<hr/>
<p>Erik Heinsholt</p>
</blockquote>
TinyMCE settings:
valid_elements: "a[href|target|title],ul,ol,li,br,strong/b,em/i,span[style<text-decoration: underline;|class],u,p,blockquote,hr,h2",
force_br_newlines: false,
force_p_newlines: true,
theme_advanced_buttons1: "undo,redo,|,bold,italic,underline,|,hr,code,preview, styleselect",
schema: "html5",
style_formats : [
{title : "First Word", inline : "span", classes : "first_word"},
{title : "Blockquote", block : "blockquote"},
{title : "Quote Header", inline : "h2"}
]
What I have: I write in admin textarea "REVOLUTIONARY QUOTE RELATING MANIFESTO TO PROJECT GOES HERE <hr /> Erik Heisholt", then select "REVOLUTIONARY QUOTE RELATING MANIFESTO TO PROJECT GOES HERE", set a style "Quote Header" for it, then select all and set a style "Blockquote" for it. As a result I get this:
<blockquote><h2>REVOLUTIONARY QUOTE RELATING MANIFESTO TO PROJECT GOES HERE</h2></blockquote>
<blockquote><hr /></blockquote>
<blockquote><p>Erik Heinsholt</p></blockquote>
What should I do to put all elements in one blockquote tag, not each element??
p.s.: the video describing this problem: http://www.sendspace.com/file/nkz97d
Have a look at the tinymce configuration parameters valid_elements and valid_children.
You can define that h2- and hr-tags may be childs to other htmlnodes.
Related
I'm using Tinymce 5.9.1 with template plugin.
I made a new template like this code with special css code :
templates: [
{title: 'green-box', description: 'box tiny green', content: '<div class="tiny-green-box"> Content </div><div class="p-1"></div></br>'},],
It works when edit content in one line. when i want to put multiple line there is a problem.
Tinymce duplicates template for every new line.
for example if i type line1 and press ENTER it will create new div and result will be something like this :
you can see in html code it repeates many time :
putting content inside an extra <p></p> tag can solve this problem.
final code must be something like this :
templates: [
{
title: 'green-box',
description: 'box tiny green',
content: '<div class="tiny-green-box"><p> Content </p></div><div class="p-1"></div></br>'
}
,],
The result HTML code will be like this :
<div class="tiny-green-box">
<p>line 1</p>
<p>line 2</p>
<p>line 3</p>
<p>line 4</p>
</div>
I would like to add the following content
<label for="tab1">Product Name</label>
inside a long product description in Prestashop, but when I save the product the "for" attributes is stripped away from HTML code.
I did some research and I found that the editor is TinyMCE and so I tried to change the configuration by adding:
extended_valid_elements : "+#[class|name|id|for]",
inside TinyMCE init script but the result is the same. I am sure that I didn't use the cached version of old script because I disable the Chrome cache and checked that the javascript code was correct.
Do you have any idea?
Here it is the full configuration script:
default_config = {
selector: ".rte" ,
plugins : "colorpicker link image paste pagebreak table contextmenu filemanager table code media autoresize textcolor anchor",
browser_spellcheck : true,
toolbar1 : "code,|,bold,italic,underline,strikethrough,|,alignleft,aligncenter,alignright,alignfull,formatselect,|,blockquote,colorpicker,pasteword,|,bullist,numlist,|,outdent,indent,|,link,unlink,|,anchor,|,media,image",
toolbar2: "",
external_filemanager_path: ad+"/filemanager/",
filemanager_title: "File manager" ,
external_plugins: { "filemanager" : ad+"/filemanager/plugin.min.js"},
language: iso,
skin: "prestashop",
statusbar: false,
relative_urls : false,
convert_urls: false,
entity_encoding: "raw",
extended_valid_elements : "+#[class|name|id|for]",
valid_children : "+*[*]",
valid_elements:"*[*]",
menu: {
edit: {title: 'Edit', items: 'undo redo | cut copy paste | selectall'},
insert: {title: 'Insert', items: 'media image link | pagebreak'},
view: {title: 'View', items: 'visualaid'},
format: {title: 'Format', items: 'bold italic underline strikethrough superscript subscript | formats | removeformat'},
table: {title: 'Table', items: 'inserttable tableprops deletetable | cell row column'},
tools: {title: 'Tools', items: 'code'}
}
};
Have you tried to add to extended_valid_elements the tag and not the attribute? Like this:
extended_valid_elements : "label[for]"
It's a fault of HTMLPurifier library, if you have control of the content of the html disable from the backoffice.
Preferences -> General set to NO Use HTMLPurifier Library
If you don't want to disable the library, you have to edit in PrestaShop/tools/htmlpurifier/
Maybe it's more easy to override the purifyHTML() method of Tools class, and add the 'for' attribute for the label, adding this when instancing the library:
$config->set('HTML.AllowedAttributes', 'label.for');
I use ngJSTree first time.
I cannot see checkboxes. In Browser I see style as follows when examine html element:
<a class="jstree-anchor jstree-clicked" href="#" tabindex="-1" id="21_anchor">
<i class="jstree-icon jstree-checkbox" role="presentation"></i>...
Controller uses checkbox plugin:
plugins : ['types','themes', 'checkbox'],
checkbox : {
"override_ui": true,
"real_checkboxes": true,
"keep_selected_style" : false,
"visible": true
}
I use css from jstree.dist.themes.default.
JsTree should be easy to use.
Do I miss some part of configuration?
Problem was in my build environment. Just add file 32px.png to the same folder as the file style.css. Then it worked.
Is there a 'modern theme' (in other words, tinymce 4) equivalent of the theme_advanced_blockformats option?
theme_advanced_blockformats allows you to limit the set of available formats by adding the following to tinymce.init():
tinyMCE.init({
...
theme_advanced_blockformats : "p,div,h1,h2,h3,h4,h5,h6,blockquote,dt,dd,code,samp"
});
(TinyMCE theme advanced block formats)
I know that it's possible to explicitly specify which formats are available by passing an option to tinymce.init(), like so:
tinyMCE.init({
...
formats :
bold : {inline : 'span', 'classes' : 'bold'},
italic : {inline : 'span', 'classes' : 'italic'},
underline : {inline : 'span', 'classes' : 'underline', exact : true},
}
});
(TinyMCE formats)
Unfortunately, this wants a lot of detail about the way that each format is implemented that I don't have.
Any words of advice?
This is as of latest TinyMCE release (4.1.3).
Although the "block_formats" setting documents this functionality, I could only get this to work using the following:
tinymce.init({
selector: "textarea",
style_formats: [
{title: 'Paragraph', block: 'p'},
{title: 'Heading 2', block: 'h2'},
{title: 'Heading 3', block: 'h3'},
{title: 'Heading 4', block: 'h4'},
],
});
This is a simple example of the Tinymce documented custom formats syntax.
The documentation is a bit spotty right now but you can control what is a valid block as well as define default attributes for blocks using valid elements. Declaring allowed blocks and default styles are now up to the TinyMCE core rather than the theme. valid_elements declares allowed blocks and extended_valid_elements declares default attributes for allowed blocks.
tinymce.init({
selector: "textarea",
valid_elements : "a[href|target=_blank],strong/b,div[align],br",
extended_valid_elements: "img[class=myclass|!src|border:0|alt|title|width|height]",
invalid_elements: "strong,b,em,i"
});
I think this is what you need:
http://www.tinymce.com/wiki.php/Configuration:block_formats
Like:
block_formats: "Paragraph=p;Heading 1=h1;Heading 2=h2;Heading 3=h3;Heading 4=h4"
For Tinymce 4x, try the following:
tinymce.init({
selector: "textarea",
block_formats: 'Paragraph=p;Heading 1=h1;Heading 2=h2;Heading 3=h3;Heading 4=h4;Heading 5=h5;Heading 6=h6;Preformatted=pre',
});
https://www.tiny.cloud/docs-4x/configure/content-formatting/#block_formats
ben.hamelin's answer didn't work for me in v4.8.1.
Does anyone know how to allow having custom uppercase tags in TinyMCE? It seems that TinyMCE doesn't like uppercase tags, even though they have been declared as valid. Here is my TinyMCE config:
tinyMCE.init({
mode: "specific_textareas",
theme: "advanced",
language: "en",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
theme_advanced_buttons1: "bold,italic,|,sub,sup,|,charmap,|,table,|,code",
theme_advanced_path: false,
theme_advanced_resizing: true,
plugins: "fullscreen,paste,table",
paste_auto_cleanup_on_paste : true,
relative_urls: false,
width: "300",
height: "300",
theme_advanced_resizing_min_height : "10",
force_br_newlines : true,
force_p_newlines : false,
forced_root_block : '',
entity_encoding: "raw",
valid_elements : "B/strong,I/em,SUP/sup,SUB/sub",
extended_valid_elements: "CUSTOM"
})
Typing something like
<CUSTOM>this is a custom tag</CUSTOM>
doesn't work because <CUSTOM> gets stripped off.
If I change the init script to extended_valid_elements: "custom", then it works fine - I can type
<custom>this is a custom tag</custom>
and the <custom gets preserved.
Doesn't anyone know any workaround?
Thanks!
Here is a description of how to do that (the reverse works analogue): http://www.codingforums.com/archive/index.php/t-148450.html
You should use the tinymce onInit event and to change the tags back to Uppercase use onSubmit or onSave (alternatively you may change the content back before submitting your content on any other suitable location of code).
To add this handlers use the tinymce setup configuration parameter
setup : function(ed) {
ed.onInit.add(function(ed, evt) {
$(ed.getBody()).find('p').addClass('headline');
// get content from editor source html element
var content = $(ed.id).html();
// tagname to lowercase
content = content.replace(/< *\/?(\w+)/g,function(w){return w.toLowerCase()});
ed.setContent(content);
});
ed.onSubmit.add(function(ed, evt) {
$(ed.getBody()).find('p').addClass('headline');
// get content from edito
var content = ed.getContent();
// tagname to toUpperCase
content = content.replace(/< *\/?(\w+)/g,function(w){return w.toUpperCase()});
// write content to html source element (usually a textarea)
$(ed.id).html(content );
});
},