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).


Log in to reply