Big News: Socket raises $60M Series C at a $1B valuation to secure software supply chains for AI-driven development.Announcement →
Sign In

vue2-tinymcy-editor

Package Overview
Dependencies
Maintainers
1
Versions
3
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue2-tinymcy-editor

Vue2-tinymcy-editor is a rich text editor for vue development based on tinymce.

latest
Source
npmnpm
Version
1.0.2
Version published
Weekly downloads
4
-60%
Maintainers
1
Weekly downloads
 
Created
Source

vue2-tinymcy-editor

npm version tinymce

vue2-tinymcy-editor 是基于 TinyMCE 开发的 Vue 富文本编辑器组件。可以直接使用这个组件到你的项目中。如发现问题可以提到 issue。

预览图

如何使用

安装组件

yarn add vue2-tinymcy-editor
# or
npm install vue2-tinymcy-editor --save

全局引入

复制node_modules/tinymce目录下所有文件至public目录下

cp node_modules/tinymce/ public/

然后在 public/index.html页面全局引入tinymce

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
     <script src="./tinymce/tinymce.min.js"></script><!-- tinymce -->
  </body>
</html>

全局引入的本地化处理

将zh_CN.js文件直接放到public/tinymce/langs/目录下就可以了，配置时加上{language: 'zh_CN'}的设置就能实现。

在vue组件中使用

<template>
  <div id="app"> 
    <VueTinymce
      v-model="content" 
      :setting="setting" />
  </div>
</template>

<script>
import VueTinymce from 'vue2-tinymcy-editor'
export default {
  name: 'app',
  components: { VueTinymce },
  data(){
    return {
      content: '',
      setting: {
        menubar: false,
        toolbar: "undo redo | fullscreen | formatselect alignleft aligncenter alignright alignjustify | link unlink | numlist bullist | image media table | fontselect fontsizeselect forecolor backcolor | bold italic underline strikethrough | indent outdent | superscript subscript | removeformat |",
        toolbar_drawer: "sliding",
        quickbars_selection_toolbar: "removeformat | bold italic underline strikethrough | fontsizeselect forecolor backcolor",
        plugins: "link image media table lists fullscreen quickbars",
        language: 'zh_CN', //本地化设置
        height: 350
      }
    }
  }
}
</script>

按需引入

在 vue 组件中使用

<template>
  <div id="app">
    <VueTinymce
      v-model="content" 
      :setting="setting" />
  </div>
</template>

<script>
import VueTinymce from 'vue2-tinymcy-editor'

//样式
import 'tinymce/skins/content/default/content.min.css'
import 'tinymce/skins/ui/oxide/skin.min.css'
import 'tinymce/skins/ui/oxide/content.min.css'

//主题
import 'tinymce/themes/silver'

//插件
import 'tinymce/plugins/link' //链接插件
import 'tinymce/plugins/image' //图片插件
import 'tinymce/plugins/media' //媒体插件
import 'tinymce/plugins/table' //表格插件
import 'tinymce/plugins/lists' //列表插件
import 'tinymce/plugins/quickbars' //快速栏插件
import 'tinymce/plugins/fullscreen' //全屏插件

// 注：5.3.x版本需要额外引进图标，没有所有按钮就会显示not found
import 'tinymce/icons/default/icons'

// 本地化
import './utils/tinymce/langs/zh_CN.js'
export default {
  name: 'app',
  components: { VueTinymce },
  data(){
    return {
      content: '',
      setting: {
        menubar: false,
        toolbar: "undo redo | fullscreen | formatselect alignleft aligncenter alignright alignjustify | link unlink | numlist bullist | image media table | fontselect fontsizeselect forecolor backcolor | bold italic underline strikethrough | indent outdent | superscript subscript | removeformat |",
        toolbar_drawer: "sliding",
        quickbars_selection_toolbar: "removeformat | bold italic underline strikethrough | fontsizeselect forecolor backcolor",
        plugins: "link image media table lists fullscreen quickbars",
        language: 'zh_CN',
        height: 350
      }
    }
  }
}
</script>

属性说明

名称描述
:content类型String，作为文本内容传入编辑器，可以使用v-model实现双向绑定
@change类型Function，编辑器中Input Change Undo Redo ExecCommand KeyUp NodeChange事件响应后触发的事件返回文本内容
:setting类型Object，编辑器的设置，setup不建议在这设置
:setup类型Function, 常用与自定义编辑器处理，组件内部做了些处理，建议在这里添加自定义的代码

相关资料

Keywords

editor
vue
vuejs
tinymcy
code

FAQs

Package last updated on 03 Jun 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

US Government Forces Anthropic to Pull Claude Fable Days After Launch

Security News

US Government Forces Anthropic to Pull Claude Fable Days After Launch

Anthropic says the directive cited national security concerns over a narrow jailbreak, but offered no specific technical details.

By Sarah Gooding  -  Jun 13, 2026