xdan / jodit

Jodit - Best WYSIWYG Editor for You
https://xdsoft.net/jodit/
MIT License
1.71k stars 354 forks source link

Missing CSS file for ImageProperties dialog #1160

Closed JKRomero closed 4 months ago

JKRomero commented 4 months ago

Hi! This is a great editor but I just want to ask if I have a missing CSS file for the imageProperties dialog? Currently in my project, the preview part is a mess or has no styles.

Actual Behavior: Screen Shot 2024-07-17 at 12 12 11 PM Screen Shot 2024-07-17 at 12 12 02 PM Screen Shot 2024-07-17 at 12 11 50 PM and preview doesn't refresh when I upload another image

Expected result should be: Screen Shot 2024-07-17 at 11 38 24 AM

Jodit Version: 4.2.27

Browser: Chrome v126 OS: Mac Is React App: false, using vue2 and jodit-vue Reproduced on xdsoft.net: false

Here is my current jodit setup:

 data () {
      return {
        test: null,
        // https://xdsoft.net/jodit/docs/options.html
        config: {
          disabled: this.disabled,
          cache: false,
          defaultTimeout: 500,
          enter: "div",
          enterBlock: "div",
          theme: 'default',
          spellcheck: true,
          language: 'en',
          height: 'auto',
          width: '100%',
          minWidth: this.minWidth,
          minHeight: this.minHeight,
          maxWidth: this.maxWidth,
          maxHeight: this.maxHeight,
          askBeforePasteHTML: false,
          processPasteHTML: true,
          disableEnforceFocus: true,
          cleanHTML: false,
          hidePoweredByJodit: true,
          toolbarSticky: true,
          toolbarDisableStickyForMobile: false,
          toolbarStickyOffset: 100,
          showTooltipshowTooltip: true,
          showTooltipDelayshowTooltipDelay: 100,
          showPlaceholder: true,
          placeholder: 'Type Here',
          tableAllowCellSelection: true,
          tableAllowCellResize: true,
          table:{
            selectionCellStyle: '',
            useExtraClassesOptions: true,
          },
          style: { 
            font: "18px SystemFont",
            'font-default': "-apple-system,BlinkMacSystemFont,'Segoe WPC','Segoe UI',HelveticaNeue-Light,Ubuntu,'Droid Sans',sans-serif",
          },
          editorClassName: 'custom-class-jodit',
          // https://xdsoft.net/jodit/docs/interfaces/types.IControlType.html
          controls:{
            paragraph: {
              component: 'select',
              list: {
                p: 'Paragraph',
                h1: 'Heading 1',
                h2: 'Heading 2',
                h3: 'Heading 3',
                h4: 'Heading 4',
                h5: 'Heading 5',
                h6: 'Heading 6',
                blockquote: "Quote",
                pre: 'Source code'
              },
            },
            lineHeight: {
              list: [1, 2, 3, 3.5]
            },
            font:{
              list:{
                "-apple-system,BlinkMacSystemFont,'Segoe WPC','Segoe UI',HelveticaNeue-Light,Ubuntu,'Droid Sans',sans-serif":'SystemFont',
                'roboto-light, Arial, sans-serif': 'Roboto'
              }
            }
          },
          imageProcessor: { 
            replaceDataURIToBlobIdInView: true 
          },
          // https://xdsoft.net/jodit/docs/classes/create.Create.html#createattributes
          createAttributes: {
            table: { style: 'border:1px solid #C5C6C8FF;border-collapse:collapse;width: 100%; color:#C5C6C8FF;'}, 
            tr: { style: ' border: 1px solid #C5C6C8FF;color:#C5C6C8FF;'}, 
            td: { style: ' border: 1px solid #C5C6C8FF;color:#C5C6C8FF;'},
            blockquote:{ style: 'margin: 1rem;' }
          },
          link:{
            processVideoLink: true,
            processPastedLink: true,
            openInNewTabCheckbox: true,
            followOnDblClick: true,
          },
          filebrowser:{
            contentType: function (p, requestData) {
              // multipart/form-data
              return 'multipart/form-data; boundary=----';
            },
          },
          // https://xdsoft.net/jodit/docs/classes/uploader.Uploader.html#root
          uploader:{
            url: `${baseUrl}/document/public/image`,
            insertImageAsBase64URI: false,
            imagesExtensions: ['jpg', 'png', 'jpeg', 'gif'],
            headers: {
              'x-access-token': Cookies.get(ACCESS_TOKEN_COOKIE_NAME),
              'x-project-id': 2
            },
            withCredentials: false,
            format: 'json',
            method: 'POST',
            prepareData: function(uploader, data) {
              uploader.append('document', uploader.getAll('files[0]')[0])
              uploader.delete('files[0]')
              uploader.delete('path')
              uploader.delete('source')

              return uploader
            },
            buildData: function(uploader, data) {
              return uploader
            },
            contentType: function (p, requestData) {
              return false;
            },
            dataURItoBlob: (uploader) =>{
              return 'blob'
            },
            process: function(resp){
              const imageUrl = resp.imageUrl;
              return imageUrl ;
            },
            isSuccess: function(e) {
              return e.success
            },
            getMessage: function (x, y) {
              // DEV NOTE: insertImage to show the image in editor
              this.jodit.selection.insertImage(x.public_link, null, 300)
            },
            defaultHandlerSuccess: function (data, resp){
              console.log('Hello')
            }
          },
          // resizer: {
          //   showSize: true,
          //   hideSizeTimeout: 2000,
          //   useAspectRatio: false,
          //   forImageChangeAttributes: true          
          // },
          // allowResizeTags: new Set(['img']),
          image: {
            dialogWidth: 800,
            openOnDblClick: true,
            editSrc: true,
            useImageEditor: false,
            editTitle: true,
            editAlt: true,
            editLink: true,
            editSize: true,
            editBorderRadius: true,
            editMargins: true,
            editClass: false,
            availableClasses: [

            ],
            editStyle: false,
            editId: true,
            editAlign: true,
            showPreview: true,
            selectImageAfterClose: false
          },
        },
      }
    },
JKRomero commented 4 months ago

Resolved it by using the Jodit build in jodit-vue web pac