All Projects → lpreterite → Vue Tinymce

lpreterite / Vue Tinymce

Licence: mit
提供给 vue 开发者使用的 TinyMCE 组件

Projects that are alternatives of or similar to Vue Tinymce

Vue Quill Editor
🍡@quilljs editor component for @vuejs
Stars: ✭ 6,874 (+5443.55%)
Mutual labels:  editor, vue-component
Vue Tinymce Editor
This a component provides use of tinymce for vue developers
Stars: ✭ 216 (+74.19%)
Mutual labels:  editor, tinymce
Django Tinymce4 Lite
TinyMCE 4 editor widget for Django
Stars: ✭ 121 (-2.42%)
Mutual labels:  editor, tinymce
Tinymce
The world's #1 JavaScript library for rich text editing. Available for React, Vue and Angular
Stars: ✭ 10,179 (+8108.87%)
Mutual labels:  editor, tinymce
Pxt
Microsoft MakeCode (PXT - Programming eXperience Toolkit)
Stars: ✭ 1,649 (+1229.84%)
Mutual labels:  editor
Unityelevatorcompiler
A plugin that plays elevator music while Unity compiles your code.
Stars: ✭ 114 (-8.06%)
Mutual labels:  editor
Ranui
Foolproof HTML editor proto
Stars: ✭ 113 (-8.87%)
Mutual labels:  editor
Homerougheditor
Floorplan editor SVG to create houseplan and homeplan with Javascript for client
Stars: ✭ 112 (-9.68%)
Mutual labels:  editor
Brackets Portable
Windows portable version of adobe brackets web development editor.
Stars: ✭ 124 (+0%)
Mutual labels:  editor
Laravel Filemanager
Media gallery with CKEditor, TinyMCE and Summernote support. Built on Laravel file system.
Stars: ✭ 1,688 (+1261.29%)
Mutual labels:  tinymce
Awesome Wysiwyg
A curated list of awesome WYSIWYG editors.
Stars: ✭ 1,801 (+1352.42%)
Mutual labels:  editor
Vue Spinner Component
Vue Spinner Component
Stars: ✭ 114 (-8.06%)
Mutual labels:  vue-component
Gist Run
🚀 Bring your Gists to life with GistRun
Stars: ✭ 121 (-2.42%)
Mutual labels:  editor
Swiftlatex
SwiftLaTeX, a WYSIWYG Browser-based LaTeX Editor
Stars: ✭ 1,664 (+1241.94%)
Mutual labels:  editor
Go Plus
An Enhanced Go Experience For The Atom Editor
Stars: ✭ 1,519 (+1125%)
Mutual labels:  editor
Wonder Editor
Functional 3D Webgl Editor
Stars: ✭ 113 (-8.87%)
Mutual labels:  editor
Mp Html
小程序富文本组件,支持渲染和编辑 html,支持在微信、QQ、百度、支付宝、头条和 uni-app 平台使用
Stars: ✭ 2,027 (+1534.68%)
Mutual labels:  editor
Mg
Micro (GNU) Emacs-like text editor ❤️ public-domain
Stars: ✭ 117 (-5.65%)
Mutual labels:  editor
Neatvi
A small vi/ex editor for editing bidirectional UTF-8 text
Stars: ✭ 116 (-6.45%)
Mutual labels:  editor
Ycmd
A code-completion & code-comprehension server
Stars: ✭ 1,575 (+1170.16%)
Mutual labels:  editor

vue-tinymce

vue-tinymce

npm version vue tinymce NPM downloads

提供给 vue 开发者使用的 TinyMCE 组件

目的

为开发人员简单使用 TinyMCE 的 Vue 组件。提供非常简单易懂的源代码提供给开发人员作为参考,当然你也可以直接使用这个组件到你的项目。发现问题可以提到 issue,期望你的反馈 👏。

如何使用

安装组件

yarn add @packy-tang/vue-tinymce
# or
npm install @packy-tang/vue-tinymce

引入

<template>
    <!-- 全局引入TinyMCE -->
    <script src="//unpkg.com/[email protected]/tinymce.min.js"></script>
    <!-- App -->
    <div id="app">
        <vue-tinymce
            v-model="content"
            :setup="setup"
            :setting="setting" />
    </div>
</template>
<script>
    import Vue from "vue"
    import VueTinymce from "@packy-tang/vue-tinymce"

    //安装组件
    Vue.use(VueTinymce)

    new Vue({
        el: "#app",
        data: function() {
            return {
                content: "<p>html content</p>",
                setting: {
                    height: 500
                }
            }
        },
        methods: {
            setup(editor) {
                console.log(editor)
            }
        }
    })
</script>

其他使用例子

  • vue-cli使用例子:传送门
  • webpack使用例子:传送门(待补上)

属性

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

更多使用细节

想了解更多内容请移步至使用细节

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].