using tinymcs wysiwig editor



  • i would like to use tinymce editor in a framework7 & vite project of mine. the problem is, that the include urls are not correct after bundling.

    i checked tinymcs dos and they have a config file for rollup that should correct thes urls. i tried to uses them but they have no affect.

    vite.config.js

    import { defineConfig } from 'vite'
    import path from 'path';
    import framework7 from 'rollup-plugin-framework7';
    import postcss from 'rollup-plugin-postcss';
    import commonjs from '@rollup/plugin-commonjs';
    import { nodeResolve } from '@rollup/plugin-node-resolve';
    
    const SRC_DIR = path.resolve(__dirname, './src');
    const PUBLIC_DIR = path.resolve(__dirname, './public');
    const BUILD_DIR = path.resolve(__dirname, './www',);
    
    export default defineConfig ({
      plugins: [
        framework7({ emitCss: false }),
          nodeResolve(),
          commonjs(),
          postcss({
              include: "**/skin.css",
              inject: false,
              extract: true
          }),
          postcss({
              include: "**/content.css",
              inject: false,
              extract: false
          })
      ],
      root: SRC_DIR,
      base: '',
      publicDir: PUBLIC_DIR,
      build: {
        outDir: BUILD_DIR,
        assetsInlineLimit: 0,
        emptyOutDir: true,
        rollupOptions: {
          treeshake: false,
            input: {
                main: path.resolve(__dirname, SRC_DIR, 'app/index.html'),
                nested: path.resolve(__dirname, SRC_DIR, 'admin/index.html')
            }
        },
        sourcemap: 'inline',
      },
      resolve: {
        alias: {
          '@': SRC_DIR,
        },
      },
      server: {
        host: true,
      },
      esbuild: {
        jsxFactory: '$jsx',
        jsxFragment: '"Fragment"',
      },
      define: {
          global: "window",
      },
    });
    
    

    i get the following error:

    GET http://localhost:3000/admin//models/dom/model.js net::ERR_ABORTED 404 (Not Found)
    Failed to load model: dom from url models/dom/model.js
    

    As you can see the url is not pointing to the bundle, it should be in assets. At the moment i dont think it is the bundle at all. My question is why cant i just use the rollup plugins command to do this as described here. i have imported it in my site exactly like described in howto but it has no effect.

    i also tried to use ckeditor but couldn't get that working either. i get the error:

    Error: "export 'default' (imported as 'ClassicEditor') was not found in '@ckeditor/ckeditor5-build-classic'
    

    the most promising article to this problem is here but they dont have any solution yet either.

    so i am at a bit of a lose what to do, can anyone help me with either or sugest a wysiwig editor that can be bundled by vite. i need text formating (size, color & styles), orientation, tables, images and embed youtube (nice to have).



  • Hello, you can load the model directly. I also imported a language pack without issues.

    /* Import TinyMCE */
    import tinymce from 'tinymce';
    
    /* Default icons are required for TinyMCE 5.3 or above */
    import 'tinymce/icons/default';
    
    /* A theme is also required */
    import 'tinymce/themes/silver';
    
    /* Import the skin */
    import 'tinymce/skins/ui/oxide/skin.css';
    
    /* Import plugins */
    // import 'tinymce/plugins/advlist';
    // import 'tinymce/plugins/code';
    // import 'tinymce/plugins/emoticons';
    // import 'tinymce/plugins/emoticons/js/emojis';
    import 'tinymce/plugins/image';
    import 'tinymce/plugins/lists';
    import 'tinymce/plugins/table';
    
    /* Import premium plugins */
    /* NOTE: Download separately and add these to /src/plugins */
    /* import './plugins/checklist/plugin'; */
    /* import './plugins/powerpaste/plugin'; */
    /* import './plugins/powerpaste/js/wordimport'; */
    
    /* Import content css - will be built into css file */
    import skinUiCss from 'tinymce/skins/ui/oxide/skin.css';
    import contentUiCss from 'tinymce/skins/ui/oxide/content.css';
    import contentCss from 'tinymce/skins/content/default/content.css';
    
    import 'tinymce/models/dom';
    
    import './tinymce/langs/fr_FR.js';
    
    window.tinymce = tinymce;
    

    Then on wanted pages I import the script and the css like so (using Laravel helpers but whatever, it works the same without) and I init the editor :

    <script src="{{ Vite::asset('resources/js/tinymce.js') }}"></script>
    @vite('resources/js/tinymce.css')
    
    <script>
        tinymce.init({
            selector: 'textarea.richEditor',
            menubar: false,
            height : "90%",
            plugins: 'table lists',
            toolbar: 'undo redo | blocks | bold italic | alignleft aligncenter alignright | indent outdent | bullist numlist | table',
            language: 'fr_FR',
            skin: false,
            content_css: false,
        });
    </script>
    


  • more active tech talk could be found on our discord server https://discord.com/channels/425843004616474635/425843004616474637


Log in to reply