Magnolia Richtext inserts wrong internal link

Question

I am using the richtext field in Magnolia and have a custom configuration for my CK editor:

var VAADIN_DIR_URL =
  typeof CKEDITOR.vaadinDirUrl !== "undefined"
    ? CKEDITOR.vaadinDirUrl
    : "../../../";

// Loads magnoliaFileBrowser replacing CKEditor file browser. This is added to the custom config below at config.extraPlugins
CKEDITOR.plugins.addExternal(
  "magnoliaFileBrowser",
  VAADIN_DIR_URL + "js/filebrowser/"
);

CKEDITOR.editorConfig = function (config) {
  // MIRROR info.magnolia.ui.field.RichTextFieldDefinition
  definition = {
    alignment: true,
    images: true,
    lists: true,
    source: false,
    tables: true,

    colors: null,
    fonts: null,
    fontSizes: null,
  };

  // MIRROR info.magnolia.ui.field.RichTextFieldDefinition
  removePlugins = [];

  // CONFIGURATION FROM DEFINITION
  if (!definition.alignment) {
    removePlugins.push("justify");
  }
  if (!definition.images) {
    removePlugins.push("image");
  }
  if (!definition.lists) {
    // In CKEditor 4.1.1 enterkey depends on indent which itself depends on list
    removePlugins.push("enterkey");
    removePlugins.push("indent");
    removePlugins.push("list");
  }
  if (!definition.source) {
    removePlugins.push("sourcearea");
  }
  if (!definition.tables) {
    removePlugins.push("table");
    removePlugins.push("tabletools");
  }

  if (definition.colors != null) {
    config.colorButton_colors = definition.colors;
    config.colorButton_enableMore = false;
    removePlugins.push("colordialog");
  } else {
    removePlugins.push("colorbutton");
    removePlugins.push("colordialog");
  }
  if (definition.fonts != null) {
    config.font_names = definition.fonts;
  } else {
    config.removeButtons = "Font";
  }
  if (definition.fontSizes != null) {
    config.fontSize_sizes = definition.fontSizes;
  } else {
    config.removeButtons = "FontSize";
  }
  if (definition.fonts == null && definition.fontSizes == null) {
    removePlugins.push("font");
    removePlugins.push("fontSize");
  }

  // magnolialink AND REMOVAL OF elementspath FROM DEFAULT RICH TEXT FIELD FACTORY
  removePlugins.push("elementspath");
  removePlugins.push("filebrowser");
  config.removePlugins = removePlugins.join(",");
  config.extraPlugins = "magnolialink,magnoliaexpand,magnoliaFileBrowser";

  config.format_tags = "p;h3;h4;h5;h6";

  config.baseFloatZIndex = 150;
  config.resize_enabled = false;
  config.toolbar = "Magnolia";
  config.toolbar_Magnolia = [
    { name: "clipboard", items: ["Cut", "Copy", "Paste", "-", "Undo", "Redo"] },
    {
      name: "links",
      items: ["Link", "Unlink"],
    },
    { name: "insert", items: ["SpecialChar", "Table"] },
    { name: "view", items: ["Expand"] },
    "/",
    { name: "styles", items: ["Format"] },
    {
      name: "basicstyles",
      items: ["Bold", "Italic", "Strike", "-", "RemoveFormat"],
    },
    {
      name: "paragraph",
      items: ["NumberedList", "BulletedList", "-", "Outdent", "Indent", "-"],
    },
  ];
};

It's the same as from their article. The problem is, when I want to link to a internal page form a richtext, the path is not inserted correctly. Instead this whole template string is inserted:

${link:{uuid:{85022590-ab39-4de7-a7d5-56e48969d85f},repository:{website},path:{/linked-page}}}

Actually I want to link to the page which is in the template string as path /linked-page. But it's inserting the whole template string in the href of the anchor tag. The same happens when I want to insert an image from dam.

Answer 1

What you are seeing is the url pattern stored by magnolia that includes the path under which you retrieved the resource as well as uuid so it can be located even if it gets moved around. This pattern will be then replaced by simple uri when content of the field is rendered or if/when you retrieve it through delivery end points.
Alternatively you can get (in Java) the pattern resolved to url by calling info.magnolia.link.LinkUtil#parseUUIDLink method.

Answer 2

You probably missed the resolving of the link. The following applies to both page and image links.

If you use the headless approach you have to resolve the content of your RichText field. In classic page rendering (.ftl) there is a corresponding templating function.