tinymce-vue icon indicating copy to clipboard operation
tinymce-vue copied to clipboard

The `outputFormat` prop should allow `"raw"`

Open fisker opened this issue 2 years ago • 1 comments

What is the current behavior?

<tinymce-editor output-format="raw"></tinymce-editor>

Cause Vue warning

[Vue warn]: Invalid prop: custom validator check failed for prop "outputFormat". 

Please provide the steps to reproduce and if possible a minimal demo of the problem via codesandbox.io or similar.

I don't think this is necessary, but I can setup one if required.

What is the expected behavior?

According to type definition in core the getContent format should allow "raw", but in Vue component, "raw" is not allowed in the outputFormat prop.

Which versions of TinyMCE, and which browser / OS are affected by this issue? Did this work in previous versions of TinyMCE or tinymce-vue?

Version: @tinymce/[email protected].

Did this work in previous versions of TinyMCE or tinymce-vue?

IDK.


I'm using "raw" because the default "html" format cause \n added between <section style="display: inline-block"/> which is also a bug, but I'm not going to deal with it.

My workaround

import TinymceEditor from '@tinymce/tinymce-vue';

const TinymceEditorSupportsRawFormat = {
  ...TinymceEditor,
  props: {
    ...TinymceEditor.props,
    outputFormat: {
      ...TinymceEditor.props.outputFormat,
      validator: (format) =>
        format === 'html' || format === 'text' || format === 'raw',
    },
  },
};

fisker avatar Sep 14 '22 10:09 fisker

Ref: INT-3012

exalate-issue-sync[bot] avatar Sep 14 '22 10:09 exalate-issue-sync[bot]

@fisker the output format raw was intentionally excluded as it contains editor specific attributes and tags designed for internal use only.

If you really REALLY want this content you can access it via the editor ref of the component otherwise we don't recommend using it.

jscasca avatar Oct 12 '22 06:10 jscasca

In that case, do you think this should be fixed?

I'm using "raw" because the default "html" format cause \n added between <section style="display: inline-block"/> which is also a bug

fisker avatar Oct 12 '22 06:10 fisker

@fisker That is part of the editor behaviour, unfortunately, this repo only deals with the Vue component. You would need to open an issue at the TinyMCE repo since I'm not completely sure what is the editor expected behaviour.

If you want to use the raw option, you can write a custom handler using the editor ref of the component or a fork of this project but know that it is not supported

jscasca avatar Oct 12 '22 07:10 jscasca

Thanks anyway.

fisker avatar Oct 12 '22 07:10 fisker

不管怎么说,还是要谢谢你。 Can you provide a complete example, buddy?

afan0228 avatar Jun 16 '23 10:06 afan0228