Search code examples
javascriptcssreactjsckeditor5ckeditor5-react

Link without edit balloon in ckeditor5


I used CKEditor5 with Reactjs, I want to add the link without editing, I actually want to see the creation balloon once and it is at the time of creation Then on clicking the link, without the 'editi balloon', to be directed to a specific target. is that possible or I have to handle it with css and js code?


Solution

  • After a few days I was able to find a solution, I hope it is useful for someone else I added contenteditable:'false' in attributes of the Link and my problem has solved When the link is not editable, it is displayed without balloons

     <CKEditor
                disabled={!this.state.isOrganizer}
                  editor={ClassicEditor}
                  data={this.state.Message}
                  config={{
                    toolbar: ['heading', '|', 'bold', 'italic', 'blockQuote', 'link', 'numberedList', 'bulletedList', 'imageUpload', 'insertTable',
                      'tableColumn', 'tableRow', 'mergeTableCells', 'mediaEmbed', '|', 'undo', 'redo'],
                    language: 'de',
                    link: {
                      decorators: {
                          addTargetToExternalLinks: {
                              mode: 'automatic',
                              callback: url => /^(https?:)?\/\//.test( url ),
                              attributes: {
                                  target: '_blank',
                                  rel: 'noopener noreferrer',
                                  contenteditable:'false' //<=========== solution***
                              }
                          }
                      }
                    }
                  }}
                  onChange={(event, editor) => {
                    const data = editor.getData();
                    this.setState({
                      Message: data
                    }, () => {
                       
                    })
                  }}
                />