tinymce编辑器之placeholder插件的实现

最新推荐文章于 2025-03-05 16:19:17 发布

原创

最新推荐文章于 2025-03-05 16:19:17 发布

· 2.2k 阅读

5 ·

版权

文章标签：

#编辑器 #vue.js #javascript

本文介绍了如何在TinyMCE编辑器中实现placeholder功能，通过编写插件`placeholder.js`并进行编辑器初始化来达成。在Vue.js项目中，封装公共组件，并在编辑器的初始化配置中调用该插件，以达到类似input框的placeholder提示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

由于业务需要，产品希望编辑器的输入框也和input框一样有placeholder的提示，但是编辑器本身是没有这个功能的，所以我们要实现该业务，需要写个插件来实现。

tinymce版本

"tinymce": "^5.7.1"

封装公共组件

在这里插入图片描述
plugins文件夹下面就是我们业务中需要开发的插件，目前有三个，其中有两个之前文章有说过。

index.vue文件里面便是组件的根文件，首先我们要局部引入编辑器

<template>
  <editor v-model="value" :init="init" :disabled="disabled"></editor>
</template>

// 引入基本文件
import tinymce from "tinymce/tinymce";
import Editor from "@tinymce/tinymce-vue";
import "tinymce/themes/silver";

然后根据业务需要可以引入编辑器提供的常用功能

// 引入需要的插件
import "tinymce/plugins/preview";
import "tinymce/plugins/code";
import "tinymce/plugins/codesample";
import "tinymce/plugins/image";
import "tinymce/icons/default/icons.min.js";

编辑器初始化

init: {
   
        visual: false,
        resize: "both",
        language_url: "/tinymce/langs/zh_CN.js", // 语言包的路径
        language: "zh_CN", // 语言
        convert_urls: false,
        skin_url: "/tinymce/skins/ui/oxide", // skin路径
        height: 390, // 编辑器高度
        branding: false, // 是否禁用“Powered by TinyMCE”
        menubar: false, // 顶部菜单栏显示,
        keep_styles: true,
        custom_elements: "style,html,head,body,title,meta,script", //自定义允许标签存在，这个如果不设置的话  编辑器会自动过滤掉这些标签
        toolbar: this.toolbar,
        plugins: [