Могу ли я настроить теги заголовков (h1, h2, h3 ...) в редакторе редактора?

Question

Я использовал плагины редактора редактора, чтобы изменить размер шрифта и цвет шрифта текста. Он отлично работает в других тегах, кроме заголовка. Не понимаю, почему ..

Я попробовал этот

$('#redactor').redactor({ 
    focus: true, 
    plugins: ['fontcolor', 'fontsize'], 
    formatting: ['p', 'blockquote', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'], 
}); 

Любая помощь?

Answer 1

Вы можете форматировать текст, добавив CSS!

Добавляя классы элементов, можно укладывать их, как вы хотите

См documentation или пример ниже для получения дополнительной информации!

HTML:

<textarea id="redactor" name="content">...</textarea> 

JS:

<script type="text/javascript"> 
$(function() 
{ 
    $('#redactor').redactor({ 
     focus: true, 
     formatting: ['p', 'blockquote', 'h1', 'h2'], 
     formattingAdd: [ 
     { 
      tag: 'p', 
      title: 'Red Block', 
      class: 'red-styled' 
     }, 
     { 
      tag: 'p', 
      title: 'Blue Styled Block', 
      class: 'blue-styled' 
     }, 
     { 
      tag: 'p', 
      title: 'P Attr Title', 
      attr: { 
       name: 'title', 
       value: 'Hello World!' 
      }, 
      class: 'p-attr-title' 
     }, 
     { 
      tag: 'p', 
      title: 'P Data Set', 
      data: { 
       name: 'data-name', 
       value: 'true' 
      }, 
      class: 'p-data-set' 
     }, 
     { 
      tag: 'span', 
      title: 'Big Red', 
      style: 'font-size: 20px; color: red;', 
      class: 'span-big-red' 
     }, 
     { 
      tag: 'span', 
      title: 'Font Size 20px', 
      style: 'font-size: 20px;', 
      class: 'font-size-20' 
     }, 
     { 
      tag: 'span', 
      title: 'Font Georgia', 
      style: 'font-family: Georgia;', 
      class: 'font-family-georgia' 
     }, 
     { 
      tag: 'code', 
      title: 'Code' 
     }, 
     { 
      tag: 'mark', 
      title: 'Marked Tag' 
     }, 
     { 
      tag: 'span', 
      title: 'Marked Span', 
      class: 'marked-span' 
     }] 
    }); 
}); 
</script> 

CSS:

.red-styled { 
    color: red; 
} 
.blue-styled { 
    color: blue; 
    font-weight: bold; 
} 
.marked-span { 
    background: yellow; 
    font-family: monospace; 
} 


.redactor-dropdown .redactor-formatting-span-font-size-20 { 
    font-size: 20px; 
} 
.redactor-dropdown .redactor-formatting-span-font-family-georgia { 
    font-family: Georgia; 
} 
.redactor-dropdown .redactor-formatting-span-big-red { 
    font-size: 20px; 
    color: red; 
} 
.redactor-dropdown .redactor-formatting-code { 
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace; 
    background: #f4f4f4; 
} 
.redactor-dropdown .redactor-formatting-mark { 
    background-color: #ffc800; 
    color: #0f0f0f; 
} 
.redactor-dropdown .redactor-formatting-span-marked-span { 
    background: yellow; 
    font-family: monospace; 
} 

Answer 2

Если вы имеете в виду, так что пользователи могут изменить цвет шрифта заголовков, то в принципе вы не можете. Я спросил, почему, и они ответили

«это сделано в соответствии с проектом, возглавляющие стили должны быть в CSS» https://twitter.com/imperavi/status/575696417240391681

мне пришлось изменить redactor.js в конце концов и закомментируйте линию 4250, чтобы сделать его работу (как это было):

// Stop formatting pre and headers 
// if (this.utils.isCurrentOrParent('PRE') || his.utils.isCurrentOrParentHeader()) return; 

Answer 3

Или вы можете просто изменить линию так, чтобы она влияет только headings. С этим изменением вы можете теперь bold, italic, strike-through и т. Д. headings.

//if (this.utils.isCurrentOrParent('PRE') || this.utils.isCurrentOrParentHeader()) return; 
if (this.utils.isCurrentOrParent('PRE')) return; 

Я написал статью в блоге о том, как применять патч для достижения этого, а не для изменения источника.

http://blog.justinleveck.com/2015/12/21/patch-redactor-to-allow-header-formatting/