时间戳

首页 > 解决方案 > 在 Vue.js 中使用 Tiny mce，寻找安装链接插件的文档

vue.js - 在 Vue.js 中使用 Tiny mce，寻找安装链接插件的文档

问题描述

我将 Tiny mce 与 Vue.js 和 Laravel 一起使用。我有基本的 Tiny 编辑器工作。我找到了这个 [Link Pluin]：https ://www.tiny.cloud/docs-4x/plugins/link/ 。

我似乎找不到有关如何安装插件的说明。

通过运行安装

npm install @tinymce/tinymce-vue

用这一行导入到 vue 组件中

import Editor from "@tinymce/tinymce-vue";

在我拥有的组件中：

 <editor
      api-key="mykey"
      cloud-channel="5"
      :disabled="false"
      id="uuid"
      :init="{  }"
      initial-value
      model-events
      plugins
      tag-name="div"
      toolbar
      value
      v-model="post.body"
    ></editor>

谢谢

更新：我将插件行更改为：

 :init="{plugins: 'link', menubar: 'insert', toolbar: 'link', default_link_target: '_blank'}"

现在菜单中有一个链接按钮，链接功能有效。没有其他菜单选项，现在只有一个链接按钮。链接文本是白色的，看不到。任何建议都会有所帮助。谢谢你。

更新：我解决了这个问题。我还添加了两个插件：wordcount和image

这是最终的初始化：

 :init="{plugins: 'link, wordcount, image', default_link_target: '_blank'}"

这也有效：

 :init="{plugins: 'link wordcount image', default_link_target: '_blank'}"

注意：插件列表应该用单引号括起来，并用逗号或空格分隔。

我写了一个简短的博客 [post]：https ://david.dukesnuz.com/blog/6/how-to-add-the-link-word-count-and-image-plugins-to-tinymce-editor-when -using-vuejs关于这个主题。

标签： vue.jstinymce

解决方案

推荐阅读