2016-08-23 7 views
0

В настоящее время я использую редактор WYSIWYG tinyMCE в CMS для того, чтобы клиенты могли создавать свой собственный текст для рекламы. Это означает, что на переднем конце все, что они помещают в текстовое поле, появится в теге <a>.TinyMCE - применить «text-align» к span

Я пытаюсь убедиться, что семантика правильно, поэтому я отключил forced_root_block возможность остановить <p> теги используются, но выравнивания текста варианты завернуть выбранный текст/элемент в <div style="text-align:center">, который я не хочу ,

Есть ли способ, которым я могу заставить tinyMCE использовать <span style="display:block; text-align:center"> вместо этого для достижения того же результата.

Вот мой текущий TinyMCE INIT

tinymce.init({ 
     selector: 'textarea#advertText', 
     menubar: false, 
     width: <?php echo $selectedSizeWidth ?>, 
     height: <?php echo $selectedSizeHeight ?>, 
     forced_root_block: false, 
     resize: false, 
     invalid_elements: 'div', 
     plugins: [ 
      'textcolor colorpicker fontawesome' 
     ], 
     fontsize_formats: "14px 16px 18px 20px 24px 36px", 
     toolbar: 'bold, italic, underline, strikethrough, |, fontsizeselect, |, forecolor, backcolor, |, alignleft, aligncenter, alignright, alignjustify, |, outdent, indent, |, fontawesome' 
}); 

Благодаря

ответ

2

удалось найти решение себя в конечном счете путем редактирования форматов стилей по умолчанию в TinyMCE инициализации.

https://www.tinymce.com/docs/demo/format-custom/

Ниже приведен код, я добавил к моему TinyMCE инициализации, чтобы переопределить стандартные стили. Это означает, что выделенный текстовый элемент (например, span) будет обернут в промежутке со стилями display: block и соответствующим text-align.

formats: { 
      alignleft: {selector: 'span,em,i,b,strong', block: 'span', styles: {display: 'block', 'text-align':'left'}}, 
      aligncenter: {selector: 'span,em,i,b,strong', block: 'span', styles: {display: 'block', 'text-align':'center'}}, 
      alignright: {selector: 'span,em,i,b,strong', block: 'span', styles: {display: 'block', 'text-align':'right'}}, 
      alignfull: {selector: 'span,em,i,b,strong', block: 'span', styles: {display: 'block', 'text-align':'full'}} 
     } 
2

Возможно, еще не слишком поздно для вас. У меня была та же проблема, потому что я загружаю содержимое в теги p. Первый ответ близок к решению. Но вы должны определить встроенный тег, который будет использоваться для выравнивания. Полный код первый ответ с этим: рядный: 'пролет', как это:

formats: { 
    alignleft: {selector: 'span,em,i,b,strong', inline: 'span', block: 'span', styles: {display: 'block', 'text-align':'left'}}, 
    aligncenter: {selector: 'span,em,i,b,strong', inline: 'span', block: 'span', styles: {display: 'block', 'text-align':'center'}}, 
    alignright: {selector: 'span,em,i,b,strong', inline: 'span', block: 'span', styles: {display: 'block', 'text-align':'right'}}, 
    alignfull: {selector: 'span,em,i,b,strong', inline: 'span', block: 'span', styles: {display: 'block', 'text-align':'full'}} 

},