in tinymce 4, using standard formatselect control format block elements in content. config looks this:
block_formats: 'paragraph=p;header 1=h1;header 2=h2' i have custom styles blocks, , need styles remain no matter html generated editor ends up. content.min.css in theme can control how blocks inside editor, not elsewhere, can't rely on that. using custom formats instead of standard block formats. config looks this:
block_formats: 'normal=normal;header 1=header1;header 2=header2', formats: { normal: {block: 'p', styles: { 'font-family': '"helvetica neue",helvetica,arial,sans-serif', 'font-weight': 'normal', 'font-size': '13px', 'line-height': '20px', 'color': '#333'}}, header1: {block: 'h1', styles: { 'font-family': '"helvetica neue",helvetica,arial,sans-serif', 'font-weight': 'normal', 'font-size': '30px', 'line-height': '40px', 'color': '#333'}}, header2: {block: 'h2', styles: { 'font-family': '"helvetica neue",helvetica,arial,sans-serif', 'font-weight': 'normal', 'font-size': '20px', 'line-height': '30px', 'color': '#333'}} }, this achieves intended embedding styles in html elements produced. there changes in behavior when using custom formats don't understand.
when using default block formats, paragraph selected default when content empty , whenever new block created. custom formats, doesn't select default block format, default have none of custom styles. want normal default. how can achieve that?
this terribly late, think able pull off in way might suit you. finds useful.
(using tinymce: 4.3.13)
in situation, showing tinymce instance in modal. modal can used create, or edit text saved database html. issue had when creating new text instance, p tag dropped in (assuming add content) default not reflect current styles viewing. later, need render html image, styles have present on tags when render , 'formats' object not effect it, because user has not selected through ui. user create resulting html displayed differently in image, since web-kit rendered did not have right css, rendered defaults.
so, force display initial style (font size , font family concerns) can set initial content of editor. right before modal shown user, if no html available edited.
tinymce.activeeditor.setcontent('<p><span style="font-family: arial; font-size: 8pt;"> </span></p>'); of course, check on browser version can done first make sure setting acceptable values.
hope helps.
[update] *this fail! editor render default character , place cursor after on focus. creates mis-edits design. (imagine impose default 'underline' style on text)
because made space, underlined space appear in editor. if user hits backspace remove space, ok. but, if user hits backspace 1 more time, deletes formatting. not fix.
to fix it, need set tiny not verify html. unfortunately, not render great html. cannot toggle verification. think should change. need able inject content style only. make ticket.
Comments
Post a Comment