problem with custom tinymce editor and smidge in production

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Andreas Nylin 10 posts 80 karma points

Aug 16, 2024 @ 09:25
0

Problem with Custom TinyMCE editor and Smidge in production
Problem with Custom TinyMCE editor and Smidge in production

Hi,

I have created a custom property editor with a TinyMCE editor.
```
angular.module("umbraco")
    .controller("MyPluginController",
        function ($scope, $element) {
                tinyMCE.init({
                    // ...
                });
        });
```
Everything is working fine when i run the site in debug mode. But when I turn of debug the TinyMCE editor stops working. The reason is that the TinyMCE scripts for themes and plugins are now loaded from a different path.

In debug mode they load from: /umbraco/lib/tinymce/themes/modern/theme.min.js

But in release they load from: /sb/themes/modern/theme.js which results in 404 since it doesn't exists.

If I understand things correctly it seems like Smidge is causing this. But I cannot understand how this works or why this happens. Or how I can stop Smidge from interfering.

I've read that you can specify bundling options in the manifest file for the plugin but it doesn't seem to work for me.
```
"propertyEditors": [
// ...
],
"css": [],
"javascript": [
"~/App_Plugins/MyPlugin/myplugin.controller.js"
],
"bundleOptions": "None"
```
Anyone else experienced this problem?
Copy Link

Bishal Tim 26 posts 115 karma points c-trib

Sep 03, 2024 @ 20:58

hey andreas,

in production i would not suggest using "bundleOptions": "None" in my angular projects i used to show RTE like

  $scope.page.content = {
        label: '',
        description: '',
        view: 'rte',
        config: {
            editor: {
                toolbar: ["ace", "undo", "redo", "cut", "copy", "styleselect", "fontselect", "fontsizeselect", "forecolor", "bold", "italic", "alignleft", "aligncenter", "alignright", "bullist", "numlist", "link", "umbmediapicker", "umbmacro", "table", "umbembeddialog"],
                stylesheets: [],
                style_formats: [{ title: "Heading 1", inline: "h1" }],
                plugins: ["advlist", "autolink", "link", "code", "fullscreen", "textcolor", "colorpicker"],
                dimensions: { height: 300, width: 800 }
            }
        },
        value: ""
    };

Copy Link

Andreas Nylin 10 posts 80 karma points

Nov 21, 2024 @ 10:44

0

I'm still having problems with this. Is there some way to resolve script paths in a custom property editor?

Copy Link

Afreed 64 posts 277 karma points

Nov 21, 2024 @ 11:45

Hi Andreas,

Can you try loading the the tinyMceAssets like this

function RteController($element, $scope, tinyMceAssets, assetsService, tinyMceService) {

          tinyMceAssets.forEach(function (tinyJsAsset) {
              assetPromises.push(assetsService.loadJs(tinyJsAsset, $scope));
          });

Manually adding the asset example like this one I did with ace

angular.module("umbraco").controller("test", ["$scope", "assetsService", function ($scope, assetsService) {
  assetsService.loadCss("lib/ace-razor-mode/theme/razor_chrome.css");

vm.aceOption = {
  mode: selectedType,
  theme: "chrome",
  showPrintMargin: false,
  advanced: {
    fontSize: '14px',
    enableSnippets: false,
    enableBasicAutocompletion: true,
    enableLiveAutocompletion: false
  }
};

I haven't tested this with TinyMce, hope it helps.

Copy Link

Andreas Nylin 10 posts 80 karma points

Nov 29, 2024 @ 15:48

0

Afreed, I think you are on to the correct solution. After some digging I ended up in the source code for the RTE propery-editor where assetservice also is used.

Copy Link
Afreed 64 posts 277 karma points

Nov 29, 2024 @ 16:15

0

I pulled the same from the repo as well. Glad that worked!

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?