wysiwyg error and not working as intended

Topic: wysiwyg error and not working as intended

ASOKUMAR IT free asked 2 years ago

*_Expected behavior_*1. Using wysiwyg 13.0.0 . In firefox, clicking on link button shows "Insert URL" and on clicking "ok" I expect "Enter a description for this link:" to be shown but it is not shown and nothing is displayed on the editor.2. In chrome, with text is selected or not, clicking the link shows "insert URL:" but not the "Enter the description for this link:". Result: the url is inserted in the editor for eg., "https://www.google.com".3. Also the new link created need to be set with "contenteditable=false" to be clicked. How to do this?4. when I add

<mdb-wysiwyg [options]="options" #SOLUTION1 ></mdb-wysiwyg>

like this: gives the following error:

"code": "2741", "severity": 8, "message": "Property 'colors' is missing in type '{ tooltips: boolean; translations: { textElements: { paragraph: string; heading: string; preformatted: string; }; textStyle: { bold: string; italic: string; strikethrough: string; underline: string; color: string; }; textAlign: { ...; }; imageAndLink: { ...; }; lists: { ...; }; showHTML: string; }; }' but required in type '{ tooltips: boolean; translations: any[]; colors: any[]; }'.",

Actual behavior

Resources (screenshots, code snippets etc.)

Arkadiusz Idzikowski staff commented 2 years ago

Could you please edit your post and provide full HTML/TS code and reproduction steps so we can recreate this problem on our end? It looks like there may be a problem with types in the options list.

As for the problem with the links, I think it is working as expected. This functionality was always very simple and we did not provide any other features.

ASOKUMAR IT free commented 2 years ago

Options problem solved. I copy pasted your code.. we have to set options:any=[]In your code 'any' is missing.
Link problem still exists.

Here is app code

import { Component, OnInit, ViewChild } from '@angular/core';
import { MdbWysiwygComponent } from 'mdb-wysiwyg';

@Component({
  selector: 'app-a2docu',
  templateUrl: './a2docu.component.html',
  styleUrls: ['./a2docu.component.scss']
})
export class A2docuComponent implements OnInit {
  @ViewChild(MdbWysiwygComponent, { static: true }) SOLUTION1!: MdbWysiwygComponent;  
  constructor() { }
  ngOnInit(): void {
  }
}

html

  <mdb-wysiwyg  #SOLUTION1 ></mdb-wysiwyg>

Please insert min. 15 characters.

Arkadiusz Idzikowski staff commented 2 years ago

You can create link with a custom description by typing custom text, selecting it, and using insert link option. It looks like there is in fact a problem with this behavior because the description is overridden by the href name.

I added a task for that, we will take a closer look at this problem and add a fix.

Add comment

Arkadiusz Idzikowski staff answered 2 years ago