Jump to content

Problème avec <section>

@rthur
 Share

Recommended Posts

@rthur Collaborator

@rthur

Posted
Posted

Bonjour.

 

J'essaie de rédiger un article via la section cms avec une série de questions et une série de réponse. J'aimerais que ça se présente sous la forme : Toutes les question sont affichées sous forme de boutons et lorsque l'on clique sur chaque question, le texte correspondant apparait.

Je sais pas si c'est un problème lié à Prestashop (1.7.5) mais à chaque fois que j'enregistre il me supprime les <section class="faq"></section> et du coup ca ne fonctionne pas du tout, le style n'est pas pris en compte et les réponses ne s'affichent pas lorsque l'on clique sur la question.

Auriez-vous une idée?

 

Merci

  

<section class="faq">
<div class="container">
<div class="row justify-content-center">
<div class="col-xl-12 col-lg-12 text-center">
<div class="section-title">
<h1>GUIDE</h1>
<p>Votre guide</p>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-12 col-lg-12">
<div id="accordionExample" class="accordion">
<div class="row">
<div class="col-xl-6 col-lg-6">
<div class="card">
<div class="card-header">
<h5 class="mb-0"><button class="btn btn-link collapsed" type="button"> question 1</button></h5>
</div>
<div id="collapseOne" class="collapse accorpad">
<div class="card-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris blandit lorem ut leo laoreet interdum nec nec lorem. Donec eleifend rhoncus massa a rhoncus. Donec sagittis sem vel fermentum sollicitudin. Cras eget ornare urna, nec egestas augue. Mauris egestas augue imperdiet nisl posuere pellentesque. Aenean dignissim porttitor leo nec pharetra. Integer orci magna, semper vitae lacus a, vulputate varius urna. Morbi maximus mi id nunc lacinia fermentum.</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h5 class="mb-0"><button class="btn btn-link collapsed" type="button"> question 2 </button></h5>
</div>
<div id="collapseTwo" class="collapse accorpad">
<div class="card-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris blandit lorem ut leo laoreet interdum nec nec lorem. Donec eleifend rhoncus massa a rhoncus. Donec sagittis sem vel fermentum sollicitudin. Cras eget ornare urna, nec egestas augue. Mauris egestas augue imperdiet nisl posuere pellentesque. Aenean dignissim porttitor leo nec pharetra. Integer orci magna, semper vitae lacus a, vulputate varius urna. Morbi maximus mi id nunc lacinia fermentum.</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h5 class="mb-0"><button class="btn btn-link collapsed" type="button"> Question 4</button></h5>
</div>
<div id="collapseThree" class="collapse accorpad">
<div class="card-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris blandit lorem ut leo laoreet interdum nec nec lorem. Donec eleifend rhoncus massa a rhoncus. Donec sagittis sem vel fermentum sollicitudin. Cras eget ornare urna, nec egestas augue. Mauris egestas augue imperdiet nisl posuere pellentesque. Aenean dignissim porttitor leo nec pharetra. Integer orci magna, semper vitae lacus a, vulputate varius urna. Morbi maximus mi id nunc lacinia fermentum.</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h5 class="mb-0"><button class="btn btn-link collapsed" type="button"> Question 5</button></h5>
</div>
<div id="collapse4" class="collapse accorpad">
<div class="card-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris blandit lorem ut leo laoreet interdum nec nec lorem. Donec eleifend rhoncus massa a rhoncus. Donec sagittis sem vel fermentum sollicitudin. Cras eget ornare urna, nec egestas augue. Mauris egestas augue imperdiet nisl posuere pellentesque. Aenean dignissim porttitor leo nec pharetra. Integer orci magna, semper vitae lacus a, vulputate varius urna. Morbi maximus mi id nunc lacinia fermentum.</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

 

Link to comment
Share on other sites
Eolia Grand Master

Eolia

Posted
Posted

<section> n'est pas une balise reconnue dans tinymce il faut l'ajouter dans son fichier de config ou remonter le bug sur github 

    style_formats : [
            {title : 'h1', block : 'h1'},
            {title : 'h2', block : 'h2'},
            {title : 'h3', block : 'h3'},
            {title : 'h4', block : 'h4'},
            {title : 'h5', block : 'h5'},
            {title : 'h6', block : 'h6'},
            {title : 'p', block : 'p'},
            {title : 'div', block : 'div'},
            {title : 'pre', block : 'pre'},
            {title : 'section', block : 'section', wrapper: true, merge_siblings: false},
            {title : 'article', block : 'article', wrapper: true, merge_siblings: false},
            {title : 'blockquote', block : 'blockquote', wrapper: true},
            {title : 'hgroup', block : 'hgroup', wrapper: true},
            {title : 'aside', block : 'aside', wrapper: true},
            {title : 'figure', block : 'figure', wrapper: true}
    ]");

et également 

		valid_children : "+*[*]",
		valid_elements:"*[*]",

 

Link to comment
Share on other sites
@rthur Collaborator

@rthur

Posted
  • Author
Posted
2 minutes ago, Eolia said:

<section> n'est pas une balise reconnue dans tinymce il faut l'ajouter dans son fichier de config ou remonter le bug sur github 


    style_formats : [
            {title : 'h1', block : 'h1'},
            {title : 'h2', block : 'h2'},
            {title : 'h3', block : 'h3'},
            {title : 'h4', block : 'h4'},
            {title : 'h5', block : 'h5'},
            {title : 'h6', block : 'h6'},
            {title : 'p', block : 'p'},
            {title : 'div', block : 'div'},
            {title : 'pre', block : 'pre'},
            {title : 'section', block : 'section', wrapper: true, merge_siblings: false},
            {title : 'article', block : 'article', wrapper: true, merge_siblings: false},
            {title : 'blockquote', block : 'blockquote', wrapper: true},
            {title : 'hgroup', block : 'hgroup', wrapper: true},
            {title : 'aside', block : 'aside', wrapper: true},
            {title : 'figure', block : 'figure', wrapper: true}
    ]");

et également 


		valid_children : "+*[*]",
		valid_elements:"*[*]",

 

Merci de ta réponse. Je ne suis pas très à l'aise avec prestashop donc je ne suis pas sur de savoir ce qu'il faut faire exactement. Je vais dans quel fichier config? Et j'y fais quoi dedans? J'y ajoute ce code que tu m'a donné?

Merci

Link to comment
Share on other sites
@rthur Collaborator

@rthur

Posted
  • Author
Posted
19 minutes ago, Eolia said:

dans /js/admin/tinymce.inc.js (pour une version 1.6, pour les 1.7 je ne veux même pas le savoir^^)

Merci. Ca se trouve au meme endroit dans 1.5.

Du coup j'ai copié ce code :  

style_formats : [
            {title : 'h1', block : 'h1'},
            {title : 'h2', block : 'h2'},
            {title : 'h3', block : 'h3'},
            {title : 'h4', block : 'h4'},
            {title : 'h5', block : 'h5'},
            {title : 'h6', block : 'h6'},
            {title : 'p', block : 'p'},
            {title : 'div', block : 'div'},
            {title : 'pre', block : 'pre'},
            {title : 'section', block : 'section', wrapper: true, merge_siblings: false},
            {title : 'article', block : 'article', wrapper: true, merge_siblings: false},
            {title : 'blockquote', block : 'blockquote', wrapper: true},
            {title : 'hgroup', block : 'hgroup', wrapper: true},
            {title : 'aside', block : 'aside', wrapper: true},
            {title : 'figure', block : 'figure', wrapper: true}
    ]");


		valid_children : "+*[*]",
		valid_elements:"*[*]",

Mais ca ne change rien... Toujours le meme problème... snif

Link to comment
Share on other sites
Eolia Grand Master

Eolia

Posted
Posted

Attention à comment vous les avez copié et à quel endroit du fichier.

Ensuite il faut vider vos caches js

image.png.c92dcc1149156389b71abacf5662ffbe.png

  

function tinySetup(config)
{
    if (typeof tinyMCE === 'undefined') {
            setTimeout(function() {
                tinySetup(config);
            }, 100);
        return;
 	}
 
	if(!config)
		config = {};

	//var editor_selector = 'rte';

	if (typeof config.editor_selector != 'undefined')
		config.selector = '.'+config.editor_selector;

	default_config = {
		selector: ".rte" ,
        plugins : "visualblocks, preview searchreplace print insertdatetime, hr charmap colorpicker anchor code link image paste pagebreak table contextmenu filemanager table code media autoresize textcolor emoticons",
		browser_spellcheck : true,
        toolbar1 : "styleselect,|,formatselect,|,fontselect,|,fontsizeselect,", 
        toolbar2 : "newdocument,print,|,bold,italic,underline,|,strikethrough,superscript,subscript,|,alignleft,aligncenter,alignright,alignjustify,|,forecolor,colorpicker,backcolor,|,bullist,numlist,outdent,indent",
        toolbar3 : "code,|,table,|,cut,copy,paste,searchreplace,|,blockquote,|,undo,redo,|,link,unlink,anchor,|,image,emoticons,media,|,inserttime,|,charmap,|,preview ",
		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 : "em[class|name|id]",
		valid_children : "+*[*]",
		valid_elements:"*[*]",
		style_formats : [
            {title : 'h1', block : 'h1'},
            {title : 'h2', block : 'h2'},
            {title : 'h3', block : 'h3'},
            {title : 'h4', block : 'h4'},
            {title : 'h5', block : 'h5'},
            {title : 'h6', block : 'h6'},
            {title : 'p', block : 'p'},
            {title : 'div', block : 'div'},
            {title : 'pre', block : 'pre'},
            {title : 'section', block : 'section', wrapper: true, merge_siblings: false},
            {title : 'article', block : 'article', wrapper: true, merge_siblings: false},
            {title : 'blockquote', block : 'blockquote', wrapper: true},
            {title : 'hgroup', block : 'hgroup', wrapper: true},
            {title : 'aside', block : 'aside', wrapper: true},
            {title : 'figure', block : 'figure', wrapper: true}
		],
		rel_list: [
			{title: 'alternate', value: 'alternate'},
			{title: 'no follow', value: 'nofollow'},
			{title: 'no openner', value: 'noopenner'},
			{title: 'no referer', value: 'noreferer'}
		],
		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'}
		}
	};

	$.each(default_config, function(index, el)
	{
		if (config[index] === undefined )
			config[index] = el;
	});

	tinyMCE.init(config);
}

 

Link to comment
Share on other sites
@rthur Collaborator

@rthur

Posted
  • Author
Posted
2 minutes ago, Eolia said:

Attention à comment vous les avez copié et à quel endroit du fichier.

Ensuite il faut vider vos caches js

image.png.c92dcc1149156389b71abacf5662ffbe.png

  


function tinySetup(config)
{
    if (typeof tinyMCE === 'undefined') {
            setTimeout(function() {
                tinySetup(config);
            }, 100);
        return;
 	}
 
	if(!config)
		config = {};

	//var editor_selector = 'rte';

	if (typeof config.editor_selector != 'undefined')
		config.selector = '.'+config.editor_selector;

	default_config = {
		selector: ".rte" ,
        plugins : "visualblocks, preview searchreplace print insertdatetime, hr charmap colorpicker anchor code link image paste pagebreak table contextmenu filemanager table code media autoresize textcolor emoticons",
		browser_spellcheck : true,
        toolbar1 : "styleselect,|,formatselect,|,fontselect,|,fontsizeselect,", 
        toolbar2 : "newdocument,print,|,bold,italic,underline,|,strikethrough,superscript,subscript,|,alignleft,aligncenter,alignright,alignjustify,|,forecolor,colorpicker,backcolor,|,bullist,numlist,outdent,indent",
        toolbar3 : "code,|,table,|,cut,copy,paste,searchreplace,|,blockquote,|,undo,redo,|,link,unlink,anchor,|,image,emoticons,media,|,inserttime,|,charmap,|,preview ",
		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 : "em[class|name|id]",
		valid_children : "+*[*]",
		valid_elements:"*[*]",
		style_formats : [
            {title : 'h1', block : 'h1'},
            {title : 'h2', block : 'h2'},
            {title : 'h3', block : 'h3'},
            {title : 'h4', block : 'h4'},
            {title : 'h5', block : 'h5'},
            {title : 'h6', block : 'h6'},
            {title : 'p', block : 'p'},
            {title : 'div', block : 'div'},
            {title : 'pre', block : 'pre'},
            {title : 'section', block : 'section', wrapper: true, merge_siblings: false},
            {title : 'article', block : 'article', wrapper: true, merge_siblings: false},
            {title : 'blockquote', block : 'blockquote', wrapper: true},
            {title : 'hgroup', block : 'hgroup', wrapper: true},
            {title : 'aside', block : 'aside', wrapper: true},
            {title : 'figure', block : 'figure', wrapper: true}
		],
		rel_list: [
			{title: 'alternate', value: 'alternate'},
			{title: 'no follow', value: 'nofollow'},
			{title: 'no openner', value: 'noopenner'},
			{title: 'no referer', value: 'noreferer'}
		],
		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'}
		}
	};

	$.each(default_config, function(index, el)
	{
		if (config[index] === undefined )
			config[index] = el;
	});

	tinyMCE.init(config);
}

 

Je l'ai mis à la fin mais mon éditeur m'indique une erreur au niveau du crochet : 

 

Capture d’écran 2019-11-22 à 10.43.22.png

Link to comment
Share on other sites
@rthur Collaborator

@rthur

Posted
  • Author
Posted

Ca m'indique des erreur dans mon editeur de texte. Je dois faire des erreur au niveau des crochets ou des virgules...  

/**
 * Change default icons to marerial icons
 */
function changeToMaterial() {
  var materialIconAssoc = {
    'mce-i-code': '<i class="material-icons">code</i>',
    'mce-i-visualblocks': '<i class="material-icons">dashboard</i>',
    'mce-i-charmap': '<i class="material-icons">grade</i>',
    'mce-i-hr': '<i class="material-icons">remove</i>',
    'mce-i-searchreplace': '<i class="material-icons">find_replace</i>',
    'mce-i-none': '<i class="material-icons">format_color_text</i>',
    'mce-i-bold': '<i class="material-icons">format_bold</i>',
    'mce-i-italic': '<i class="material-icons">format_italic</i>',
    'mce-i-underline': '<i class="material-icons">format_underlined</i>',
    'mce-i-strikethrough': '<i class="material-icons">format_strikethrough</i>',
    'mce-i-blockquote': '<i class="material-icons">format_quote</i>',
    'mce-i-link': '<i class="material-icons">link</i>',
    'mce-i-alignleft': '<i class="material-icons">format_align_left</i>',
    'mce-i-aligncenter': '<i class="material-icons">format_align_center</i>',
    'mce-i-alignright': '<i class="material-icons">format_align_right</i>',
    'mce-i-alignjustify': '<i class="material-icons">format_align_justify</i>',
    'mce-i-bullist': '<i class="material-icons">format_list_bulleted</i>',
    'mce-i-numlist': '<i class="material-icons">format_list_numbered</i>',
    'mce-i-image': '<i class="material-icons">image</i>',
    'mce-i-table': '<i class="material-icons">grid_on</i>',
    'mce-i-media': '<i class="material-icons">video_library</i>',
    'mce-i-browse': '<i class="material-icons">attachment</i>',
    'mce-i-checkbox': '<i class="mce-ico mce-i-checkbox"></i>',
  };
  
  $.each(materialIconAssoc, function (index, value) {
    $('.' + index).replaceWith(value);
  });
}
  
function tinySetup(config) {
  
  if (typeof tinyMCE === 'undefined') {
    setTimeout(function () {
      tinySetup(config);
    }, 100);
    return;
  }  
  if (!config) {
    config = {};
  }
  
  if (typeof config.editor_selector != 'undefined') {
    config.selector = '.' + config.editor_selector;
  }
  
  var default_config = {
    selector: ".rte",
    browser_spellcheck: true,
    plugins : "visualblocks, preview searchreplace print insertdatetime, hr charmap colorpicker anchor code link image paste pagebreak table contextmenu filemanager table code media autoresize textcolor emoticons",
    toolbar2 : "newdocument,print,|,bold,italic,underline,|,strikethrough,superscript,subscript,|,forecolor,colorpicker,backcolor,|,bullist,numlist,outdent,indent",
    toolbar1 : "styleselect,|,formatselect,|,fontselect,|,fontsizeselect,", 
    toolbar3 : "code,|,table,|,cut,copy,paste,searchreplace,|,blockquote,|,undo,redo,|,link,unlink,anchor,|,image,emoticons,media,|,inserttime,|,preview ",
    toolbar4 : "visualblocks,|,charmap,|,hr,",
    external_filemanager_path: baseAdminDir + "filemanager/",
    filemanager_title: "File manager",
    external_plugins: {"filemanager": baseAdminDir + "filemanager/plugin.min.js"},
    language: iso_user,
    skin: "prestashop",
    menubar: false,
    statusbar: false,
    relative_urls: false,
    convert_urls: false,
    entity_encoding: "raw",
    valid_children: "+body[style|script|iframe|section],pre[iframe|section|script|div|p|br|span|img|style|h1|h2|h3|h4|h5],*[*]",
    valid_elements : '*[*]', 
    force_p_newlines : false, 
    cleanup: false,
    forced_root_block : false, 
    force_br_newlines : true,  
    convert_urls:true,
    relative_urls:false,
    remove_script_host:false,
    init_instance_callback: "changeToMaterial",
    valid_children : "+*[*]",
		valid_elements:"*[*]",
		style_formats : [
            {title : 'h1', block : 'h1'},
            {title : 'h2', block : 'h2'},
            {title : 'h3', block : 'h3'},
            {title : 'h4', block : 'h4'},
            {title : 'h5', block : 'h5'},
            {title : 'h6', block : 'h6'},
            {title : 'p', block : 'p'},
            {title : 'div', block : 'div'},
            {title : 'pre', block : 'pre'},
            {title : 'section', block : 'section', wrapper: true, merge_siblings: false},
            {title : 'article', block : 'article', wrapper: true, merge_siblings: false},
            {title : 'blockquote', block : 'blockquote', wrapper: true},
            {title : 'hgroup', block : 'hgroup', wrapper: true},
            {title : 'aside', block : 'aside', wrapper: true},
            {title : 'figure', block : 'figure', wrapper: true}
		],
		rel_list: [
			{title: 'alternate', value: 'alternate'},
			{title: 'no follow', value: 'nofollow'},
			{title: 'no openner', value: 'noopenner'},
			{title: 'no referer', value: 'noreferer'}
		],
		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'}
		}
	};
  
  $.each(default_config, function (index, el) {
    if (config[index] === undefined)
      config[index] = el;
  });
  
  // Change icons in popups
  $('body').on('click', '.mce-btn, .mce-open, .mce-menu-item', function () {
    changeToMaterial();
  });
  
  tinyMCE.init(config);
}

 

Link to comment
Share on other sites
Eolia Grand Master

Eolia

Posted
Posted

Ca serait bien de nous montrer les erreurs^^

Pour info, je vous ai donné le fichier d'une 1.6 et il faut également désactiver cette option dans les préférences générales autrement c'est Prestashop qui vire les balises à l'enregistrement^^

image.png.5ed69745c448beccc8f66f8194a75527.png

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...