Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

big vs smaller toolbar. Is it possible to force which one to use? #244

Closed
perlpty opened this issue Dec 5, 2016 · 8 comments · Fixed by #644
Closed

big vs smaller toolbar. Is it possible to force which one to use? #244

perlpty opened this issue Dec 5, 2016 · 8 comments · Fixed by #644
Labels

Comments

@perlpty
Copy link

perlpty commented Dec 5, 2016

Hi. I was wondering how can I force which toolbar to use: big or small.
I did read: Template language
and it specifies:

for inline elements, or for div: mosaico automatically use the multiline editing (and the big toolbar) when you use data-ko-editable on TD or DIV tags while it uses the single line editing (and the smaller toolbar) when you use it on other tags.

However, I 'd like force sometimes the one I wish use and not use the automatic feature. I couldn't find the option to do that. For instance, How could use the SMALL toolbar within a TD element?

Why do I ask this? Because when using the Big Toolbar TinyMCE automatically asign the Paragraph Style but sometimes what I need is the DIV Style.

So, 2 options would be possible to this issue:

  1. Force toolbar option with some template Keyword
  2. A workaround Making TinyMCE to default to DIV Style instead of Paragraph style.

Thanks in advance.

@bago
Copy link
Member

bago commented Dec 5, 2016

I think the <p> behaviour is not related to the toolbar you use: tinymce adapt the <p> behaviour to the tag it is used as "contenteditable". This makes sense in HTML.

If you want the small toolbar create a spam element and make it "editable": if you don't want this element in the output then you can add a data-ko-wrap="false" to the same element.

@perlpty
Copy link
Author

perlpty commented Dec 5, 2016

Ok... I will try that. My current template is like this:
<TD style="some styles" data-ko-editable="titleText" >My content</TD>

2 Questions:
1) You suggest I should do this:
<TD style="some styles"><span data-ko-editable="titleText" data-ko-wrap="false">My content</span></TD>

Is that correct?

  1. I have not use data-ko-wrap="false" yet, so I cannot say. But what I expect by using "data-ko-wrap" is that styles applied to SPAN element be copied to TD tag because SPAN element would disappear. (copied to Parent element which is TD). Is that thought correct?

@bago
Copy link
Member

bago commented Dec 5, 2016

data-ko-wrap="false" means that tag will only be used during editing and will be removed in the final output. No style is copied around. Tinymce is used to edit content, not to style the "editable" tag..

@bago bago added the question label Dec 5, 2016
@perlpty
Copy link
Author

perlpty commented Dec 5, 2016

Ok. I did the test. The result is that the element disappear and styles are applied as inline html not css. (different from what I thought before)

SMALL toolbar only has 2 styles. Bold and Italic and they are applied as this:
BOLD = <strong>bold text</strong>
ITALIC = <em>italic text</em>

OK. It solves the 1st issue about using Small Tool Bar. perfectly!!!!

But still I would like to explore the 2nd option ( Making TinyMCE to default to DIV Style instead of Paragraph style. ) because some times you also have links and other stuff, but don’t want TinyMCE to add some P tags around them because of the space added when editing . If I change to
Formats > Blocks > Div using the Big toolbar, the P tag is substituted by a DIV tag, which does not create the extra Space in that editable area (at least not in the template Im working on now)

So, I would be a matter of:
A) Telling Tiny MCE to default block styles to DIV instead of paragraph

B) or Telling TinyMCE to not print any tag after editing. Im not sure if that option (B) is possible.

C) or using / adding inline (SPAN tags) for format styles.

I tried reading some TinyMCE docs but it needs to be TinyMCE available to configure inside mosaico.

@bago
Copy link
Member

bago commented Dec 5, 2016

#178 (comment)

@bago bago closed this as completed Dec 5, 2016
@perlpty
Copy link
Author

perlpty commented Dec 5, 2016

Exactly, I just found that link. Ok, I will try to see how can I use that information.

@perlpty
Copy link
Author

perlpty commented Dec 5, 2016

Ok. I did the test and Everything worked perfect with that plug-in solution.

@bago
Copy link
Member

bago commented Dec 5, 2016

Thank you for the update/feedback!

bago added a commit that referenced this issue May 10, 2022
We found that most browser/tinymce bugs related to contenteditable are about editing non-DIV elements, so we try to change the template converter to always create an utility DIV and make it editable (Fix #429 and #362).

This should still work with 4.5.x (currently the last version supported by mosaico) and by updated releases.

Mosaico now supports multiple editing styles: the legacy styles are named "singleline" and "multiline" and they are automatically applied depending on the data-ko-editable element (td & div use "multiline", the other ones "singleline") but a data-ko-editor-style="newstyle" can be used to force the use of a different tinymce options set. This set will inherit ko.bindingHandlers.wysiwyg.standardOptions, ko.bindingHandlers.wysiwyg.fullOptions and then ko.bindingHandlers.wysiwyg.extendedOptions. (Fix #244)

This changeset also remove the support for ko.bindingHandlers.wysiwyg.getContentOptions and replaces it with a new option "_use_raw_format" that defines wether to use "raw" format when getting/setting the content from tinymce. The new default is to use "raw" format for the singleline style and non raw format for everything else (the raw in singleline is required in order to prevent tinymce from trimming contents). Note that previously mosaico used raw format for every style, so if you want to preserve the previous behaviour you need to set ko.bindingHandlers.wysiwyg.fullOptions._use_raw_format to true. (should fix #446)

Another breaking change is the default  "extended_valid_elements" option that changed from "strong/b,em/i,*[*]" to "strong/b,em/i" so to enable content filtering and strip unwanted tags (like scripts). You can revert it by setting that option to the old value but beware XSS vulnerabilities.

This changeset enable to upgrade of tinymce to newer 4.x (4.7.x, 4.9.x) and latest 5.x (Fix #593). For 5.x and 6.x we also had to update the scrollfix binding so that the toolbar is correclty moved when the edit area is scrolled.

TinyMCE 6.x compatibility requires more changes because they removed support for "forced_root_block = false" or "forced_root_block = ''" that is needed for the singleline editing. You can trick tinymce by usign "forced_root_block = 'unknownelementname'" but it will prevent use of "ENTER" to insert <br/>.

Issues #596 and #443 may be fixed by this changeset.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants