How to custom target property for link feature on demand

[INKGROUP]

Summary

I want to set target property for link feature on demand. The editor supply a method to set, like this

  linkAttribute: {
       target: '_blank'
   }

but it's a global setup. How to set different target value for every link element.

Screenshots

If applicable, add screenshots to help explain your question.

Version

"@toast-ui/vue-editor": "^2.2.0",

Additional context

I added a checkbox for link feature

mounted() {
    const options = {
      el: this.$refs.toastUIEditor,
      previewStyle: "vertical",
      hideModeSwitch: true,
      initialEditType: "wysiwyg",
      height: "500px",
      language: "zh-CN",
      // linkAttribute: {
      //   target: '_blank'
      // }
    };

    this.editor = new Editor(options); 
    this.addNewTarget();

let _this = this;

    //blob: AddLink, callback:{linkText: "2", url: "1"}
    this.editor.eventManager.listen('command', function(blob, callback) {    

        if( 'AddLink' === blob ){
          let checkboxValue = document.querySelector(".te-link-target-input").checked;

          if(!checkboxValue) return false;

           let editor = _this.editor.getCodeMirror();

           let editorHtml = _this.editor.getCurrentModeEditor();
          let isMarkdownMode = _this.editor.isMarkdownMode();

          if (isMarkdownMode) {
             editor.replaceSelection(`![${callback.linkText}](${callback.url})`);
           } else {
             _this.editor.getCurrentModeEditor().getRange()
             let range = editorHtml.getRange();
             let a = document.createElement("a");
             a.innerText = `${callback.linkText}`;
             a.href = `${callback.url}`;           
             a.target = "_blank";   
             range.insertNode(a);
///////////////////////////////////////////////////////////////
//here, I can see target property from console in browser
             console.log(range) 
           }
///////////////////////////////////////////////////////////////
// I can't  find the target property which I have set, why?
           console.log("test===" + _this.editor.getHtml());  
        }
},
methods: {
addNewTarget(){
      let targetHtml = `<label for="linkTarget">new window</label>
            <input type="checkbox" class="te-link-target-input">`;
      let container = document.querySelector('.te-popup-add-link').querySelector('.tui-popup-body');
      let button = container.querySelector('.te-button-section');
      let linkDOM = document.createRange().createContextualFragment(targetHtml);      
      container.insertBefore(linkDOM, button)
    },
}

[seonim-ryu]

@INKGROUP When calling getHtml of the editor in WYSIWYG mode, html is converted to markdown and then only valid markdown syntax is returned. Currently, you control DOM directly in the WYSIWYG editor, and it comes out as removed because it is a value that cannot be included in the markdown syntax. If you want to get the html set in the WYSIWYG editor as it is, you can call editor.getCurrentModeEditor().getValue().

const editor = new Editor({
  el: document.querySelector('#editor'),
  height: '500px',
  initialEditType: 'wysiwyg'
});

let range = editor.getCurrentModeEditor().getRange();
let a = document.createElement('a');

a.innerText = 'foo';
a.href = 'url';
a.target = '_blank';

range.insertNode(a);

console.log(editor.getHtml()); // <a href="url" target="_blank">foo</a><br>
console.log(editor.getCurrentModeEditor().getValue()); // <a href="url" target="_blank">foo</a><br>

[seonim-ryu]

@INKGROUP But why do you manipulate DOM directly in WYSIWYG without using linkAttribute? I hope you don't use the method and I recommend using linkAttribute.

[stale[bot]]

This issue has been automatically marked as inactive because there hasn’t been much going on it lately. It is going to be closed after 7 days. Thanks!

[stale[bot]]

This issue will be closed due to inactivity. Thanks for your contribution!

[albertpak]

Any thoughts on how to add an option, i.e. a dropdown for _blank or _self? Right now all I see is URL text and URL link.

We are using Toast UI in React