tinymce / tinymce-react

Offical TinyMCE React component
MIT License
937 stars 152 forks source link

TinyMCE self hosted or tinymce cloud in production not loaded as in development #436

Closed febrifahmi closed 1 year ago

febrifahmi commented 1 year ago

What is the current behavior?

When using TinyMCE <Editor /> component in a Remix run app, the component loaded in development but not load in production.

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

  1. Create remix run app
  2. Install and import and use Editor component in the page.
  3. set tinymceScriptSrc opstion with the public url of tinymce.min.js hosted in hosting or tinymce url from unpkg, and even use global tinymce/cloud.
  4. deploy app to production
  5. check tinymce in webpage

What is the expected behavior?

Tinymce Editor loaded in production.

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

The same version is working in development version of the code which more or less the same code deployed in production, but somehow not loaded in production.

code example:

import { Editor } from '@tinymce/tinymce-react';
import { server, imgserver, announcementsAPIprefix } from '~/config';

export default function Pengumuman() {
    const data = useLoaderData()
    let fetcher = useFetcher()
    const tinymceurl = imgserver+"/static/tinymce/js/tinymce/tinymce.min.js"
    console.log(tinymceurl)
    // set tinymce text input
    const [text, setText] = useState("");
    return (
        <>
            <h1 className="text-4xl mb-10">Pengumuman</h1>
            <div className="mt-10 mb-10 text-md">
                <p>Rekam seluruh pengumuman penting Keluarga Alumni Arsitektur UNS (KartUNS) di sini.</p>
            </div>
            <div>
                <fetcher.Form method="post" action="/pengurus/pengumuman" encType="multipart/form-data" className="grow text-lg text-gray-dark">
                    <div>
                        <div className="flex py-1">
                            <input className="grow rounded h-12" name="judul" type={"text"} placeholder=" Judul pengumuman" />
                        </div>
                    </div>
                    <div className="flex py-6">
                        <input className="grow rounded h-12" name="pengumumandesc" type={"text"} placeholder=" Deskripsi pendek mengenai isi pengumuman" />
                    </div>
                    <div className="py-4">
                            <Editor
                                tinymceScriptSrc={tinymceurl}
                                initialValue="<p>Tuliskan isi pengumuman secara lengkap di sini.</p>"
                                init={{
                                    height: 500,
                                    width: "100%",
                                    menubar: false,
                                    plugins: [
                                        'a11ychecker', 'advlist', 'advcode', 'advtable', 'autolink', 'checklist', 'export',
                                        'lists', 'link', 'image', 'charmap', 'preview', 'anchor', 'searchreplace', 'visualblocks',
                                        'powerpaste', 'fullscreen', 'formatpainter', 'insertdatetime', 'media', 'table', 'help', 'wordcount'
                                    ],
                                    toolbar: 'undo redo | casechange blocks | bold italic backcolor | ' +
                                        'alignleft aligncenter alignright alignjustify | ' +
                                        'bullist numlist checklist outdent indent | removeformat | a11ycheck code table help',
                                    content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
                                    valid_elements: "@[id|class|style|title|dir<ltr?rtl|lang|xml::lang|onclick|ondblclick|"
                                        + "onmousedown|onmouseup|onmouseover|onmousemove|onmouseout|onkeypress|"
                                        + "onkeydown|onkeyup],a[rel|rev|charset|hreflang|tabindex|accesskey|type|"
                                        + "name|href|target|title|class|onfocus|onblur],strong/b,em/i,strike,u,"
                                        + "#p,-ol[type|compact],-ul[type|compact],-li,br,img[longdesc|usemap|"
                                        + "src|border|alt=|title|hspace|vspace|width|height|align],-sub,-sup,"
                                        + "-blockquote,-table[border=0|cellspacing|cellpadding|width|frame|rules|"
                                        + "height|align|summary|bgcolor|background|bordercolor],-tr[rowspan|width|"
                                        + "height|align|valign|bgcolor|background|bordercolor],tbody,thead,tfoot,"
                                        + "#td[colspan|rowspan|width|height|align|valign|bgcolor|background|bordercolor"
                                        + "|scope],#th[colspan|rowspan|width|height|align|valign|scope],caption,-div,"
                                        + "-span,-code,-pre,address,-h1,-h2,-h3,-h4,-h5,-h6,hr[size|noshade],-font[face"
                                        + "|size|color],dd,dl,dt,cite,abbr,acronym,del[datetime|cite],ins[datetime|cite],"
                                        + "object[classid|width|height|codebase|*],param[name|value|_value],embed[type|width"
                                        + "|height|src|*],map[name],area[shape|coords|href|alt|target],bdo,"
                                        + "button,col[align|char|charoff|span|valign|width],colgroup[align|char|charoff|span|"
                                        + "valign|width],dfn,fieldset,form[action|accept|accept-charset|enctype|method],"
                                        + "input[accept|alt|checked|disabled|maxlength|name|readonly|size|src|type|value],"
                                        + "kbd,label[for],legend,noscript,optgroup[label|disabled],option[disabled|label|selected|value],"
                                        + "q[cite],samp,select[disabled|multiple|name|size],small,"
                                        + "textarea[cols|rows|disabled|name|readonly],tt,var,big"
                                }}
                                onEditorChange={(newText) => setText(newText)}
                            />
                            <input type="hidden" id="pengumumantext" name="pengumumantext" value={text}></input>
                        </div>
                        <div className="text-white bg-gray-darker rounded-xl flex py-4 px-4 my-4 border-solid border-gray-darker border-[1px]">
                            <div className='flex'>
                                <label className='mr-6'>Upload gambar (max. <span className='text-red'>500Kb</span>)</label>
                                <input type="file" name="image" accept="image/*" />
                            </div>
                        </div>
                        <div className="flex justify-center pt-8 text-white text-2xl">
                            <input className="px-4 rounded h-12 bg-green-dark hover:bg-green-darker hover:drop-shadow-md font-bold" name="cover" type="submit" value={"Buat Pengumuman"} />
                        </div>
                </fetcher.Form>
            </div>
            <div className='mt-10 mb-10 p-10 rounded-xl border-solid border-[1px] border-gray-darker'>
                    <h2 className='text-2xl font-bold mb-10 text-blue'>Pengumuman Sebelumnya</h2>
                    <div className='w-full'>
                        {data.pengumuman != "" ?
                            data.pengumuman.map((item) =>
                                <div className='flex p-4 w-full mb-5' key={item.idpengumuman}>
                                    <div className='mr-10'>
                                        <img className='rounded' alt="" src={item.pengumumanimgurl ? "../uploads/" + item.pengumumanimgurl : "../../static/img/noimage.png"} width="300px" height="200px"></img>
                                    </div>
                                    <div className='flex flex-col w-full'>
                                        <h3 className='text-lg font-bold mb-2 text-gray'>{item.judul}</h3>
                                        <div className='text-xs mb-4 text-gray'>Published: {item.created_at.substring(0, 16)} UTC</div>
                                        <p className=''>{item.pengumumandesc}</p>
                                    </div>
                                </div>
                            )
                            :
                            "Belum ada data pengumuman."
                        }
                    </div>
                </div>
        </>
    )
}

and console error:

Loading module from “https://kartuns.space/build/manifest-9EDEEC43.js” was blocked because of a disallowed MIME type (“text/html”).
[buatiklan](https://kartuns.space/alumni/buatiklan)
Loading failed for the module with source “https://kartuns.space/build/manifest-9EDEEC43.js”. [buatiklan:18:1](https://kartuns.space/alumni/buatiklan)
Loading module from “https://kartuns.space/build/root-MAERP7RJ.js” was blocked because of a disallowed MIME type (“text/html”).
[buatiklan](https://kartuns.space/alumni/buatiklan)
Loading failed for the module with source “https://kartuns.space/build/root-MAERP7RJ.js”. [buatiklan:18:1](https://kartuns.space/alumni/buatiklan)
Loading module from “https://kartuns.space/build/routes/alumni-FSIWAD2R.js” was blocked because of a disallowed MIME type (“text/html”).
[buatiklan](https://kartuns.space/alumni/buatiklan)
Loading failed for the module with source “https://kartuns.space/build/routes/alumni-FSIWAD2R.js”. [buatiklan:18:1](https://kartuns.space/alumni/buatiklan)
Loading module from “https://kartuns.space/build/routes/alumni/buatiklan-GIW6J7XP.js” was blocked because of a disallowed MIME type (“text/html”).
[buatiklan](https://kartuns.space/alumni/buatiklan)
Loading failed for the module with source “https://kartuns.space/build/routes/alumni/buatiklan-GIW6J7XP.js”. [buatiklan:18:1](https://kartuns.space/alumni/buatiklan)
exalate-issue-sync[bot] commented 1 year ago

Ref: INT-3129

febrifahmi commented 1 year ago

Ok. The error is not part of tinymce-react, it's me that incorrectly run a build command in production. After creating the correct build by issuing "npm run build" everything works normally.