using tinymcs wysiwig editor

owitec

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

JerryBels

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>

Isda Chen

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