0

我已经成功地将 Wiris 插件添加到 tinymce-react 组件，cdn 链接如下：

external_plugins: { tiny_mce_wiris: 'https://www.wiris.net/demo/plugins/tiny_mce/plugin.js' },

但是，当我尝试使用图像编辑器重新打开笔记时，不会显示内容并引发错误：

Uncaught (in promise) TypeError: Cannot read property 'id' of undefined
at Object.editorObject.settings.images_dataimg_filter (plugin.js:1)

它仅适用于带有某些图像的笔记，带有文本的笔记工作正常。

<Editor
    apiKey={process.env.TINYMCE_API_KEY}
    initialValue={data}
    onKeyPress={e => this.props.disabled && false}
    ref={node => (this.editorRef = node)}
    init={{
      branding: false,
      height: '75vh',
      maxWidth: 1000,
      min_height: 200,
      skin: 'fabric',
      content_style: 'body { max-width: 100%; overflow: auto; } html { overflow-x: hidden; }',
      content_css: ['fabric'],
      menubar: this.props.disabled ? '' : 'file edit insert view format settings table tools help',
      menu: {
        settings: { title: 'Permanent pen settings', items: 'configurepermanentpen' },
      },
      // images_dataimg_filter: function(img) {
      //   return img;
      // },
      plugins: [
        'advlist autolink lists link image charmap print preview anchor',
        'searchreplace visualblocks advcode fullscreen',
        'insertdatetime media table powerpaste tinymcespellchecker a11ychecker linkchecker mediaembed',
        'wordcount formatpainter permanentpen pageembed checklist casechange advtable tinydrive',
        // '-youtube',
      ],
      external_plugins: { tiny_mce_wiris: 'https://www.wiris.net/demo/plugins/tiny_mce/plugin.js' },
      // external_plugins: { tiny_mce_wiris: this.state.wirisMin },
      toolbar: this.props.disabled
        ? ''
        : [
            'undo redo | insert | styleselect | fontselect | bold italic | removeformat formatpainter | permanentpen pageembed | \
         alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | \
          link image | advcode spellchecker a11ycheck | code | checklist | ',
            'casechange tiny_mce_wiris_formulaEditor tiny_mce_wiris_formulaEditorChemistry insertfile',
            // 'youtube',
          ],
      tinydrive_token_provider: function(success, failure) {
        success({
          token: ``,
        });
        // failure('Could not create a jwt token')
      },
      // TODO replace keys below in env
      tinydrive_google_drive_key: process.env.TINYMCE_GOOGLE_DRIVE_KEY,
      tinydrive_google_drive_client_id: process.env.TINYMCE_GOOGLE_DRIVE_CLIENT_ID,
      toolbar_drawer: 'sliding',
      permanentpen_properties: {
        fontname: 'arial,helvetica,sans-serif',
        forecolor: '#FF0000',
        fontsize: '18pt',
        hilitecolor: '',
        bold: true,
        italic: false,
        strikethrough: false,
        underline: false,
      },
      table_toolbar:
        'tableprops cellprops tabledelete | tableinsertrowbefore tableinsertrowafter tabledeleterow | tableinsertcolbefore tableinsertcolafter tabledeletecol',
      powerpaste_allow_local_images: true,
      powerpaste_word_import: 'prompt',
      powerpaste_html_import: 'prompt',
      spellchecker_language: 'en',
      spellchecker_dialog: true,
      formats: {
        borderstyle: {
          selector: 'td,th',
          styles: {
            borderTopStyle: 'solid',
            borderRightStyle: 'solid',
            borderBottomStyle: 'solid',
            borderLeftStyle: 'solid',
          },
          remove_similar: true,
        },
        bordercolor: {
          selector: 'td,th',
          styles: {
            borderTopColor: '#32CD32',
            borderRightColor: '#32CD32',
            borderBottomColor: '#32CD32',
            borderLeftColor: '#32CD32',
          },
          remove_similar: true,
        },
        backgroundcolor: { selector: 'td,th', styles: { backgroundColor: '#006400' }, remove_similar: true },
        formatpainter_removeformat: [
          {
            selector: 'b,strong,em,i,font,u,strike,sub,sup,dfn,code,samp,kbd,var,cite,mark,q,del,ins',
            remove: 'all',
            split: true,
            expand: false,
            block_expand: true,
            deep: true,
          },
          {
            selector: 'span',
            attributes: ['style', 'class'],
            remove: 'empty',
            split: true,
            expand: false,
            deep: true,
          },
          {
            selector: '*:not(tr,td,th,table)',
            attributes: ['style', 'class'],
            split: false,
            expand: false,
            deep: true,
          },
        ],
      },
    }}
    onEditorChange={this.handleEditorChange}
  />
4

0 回答 0