vue使用tinymce_一个简单而强大的软件包，可在Vue.js项目中轻松使用tinymce

最新推荐文章于 2024-08-06 15:16:55 发布

cuk5239

最新推荐文章于 2024-08-06 15:16:55 发布

阅读量2.6k

点赞数

文章标签： vue js javascript nodejs less ViewUI

原文链接：https://vuejsexamples.com/a-simple-and-powerful-package-for-easy-usage-of-tinymce-in-vue-js-project/

版权

vue-easy-tinymce是一个为Vue.js项目提供简单强大tinymce集成的包，支持v-model、多实例编辑器、可配置选项和初始内容绑定。安装可通过npm或CDN，使用时将其作为Vue组件添加到项目中，并可自定义配置。

摘要由CSDN通过智能技术生成

vue使用tinymce

易用性 (vue-easy-tinymce)

A simple and powerful package for easy usage of tinymce in Vue.js project.

一个简单而强大的软件包，用于在Vue.js项目中轻松使用tinymce。

View demo 查看演示 Download Source 下载源

特征 (Features)

[x] v-model Support
[x] v模型支持
[x] Multiple instance editor support
[x]多实例编辑器支持
[x] Configurable options
[x]可配置的选项
[x] Binding initial content (from v-model)
[x]绑定初始内容(来自v模型)

安装 (Installation)

Run the command below to install this package:

运行以下命令以安装此软件包：

npm install vue-easy-tinymce --save

要么

Download or clone this repository and copy dist/vue-easy-tinymce.min.js file to your project.

下载或克隆此存储库，然后将dist/vue-easy-tinymce.min.js文件复制到您的项目中。

要么

Use CDN provider:

使用CDN提供程序：

<script src="https://cdn.jsdelivr.net/npm/vue-easy-tinymce/dist/vue-easy-tinymce.min.js"></script>

用法 (Usage)

In the first step, put vue-easy-tinymce in your project.

第一步，在您的项目中放入vue-easy-tinymce 。

Node.js Bundler(Webpack，汇总，Browserify) (Node.js Bundler (Webpack, Rollup, Browserify))

window.Vue = require('vue'); // npm install vue --save
//... etc data or package(s)
var VueEasyTinyMCE = require('vue-easy-tinymce');

浏览器加载 (Browser loading)

<script src="examples/tinymce/tinymce.min.js"></script> <!-- TinyMCE core -->
<!-- Or CDN <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.7.4/tinymce.min.js"></script> -->

<script src="examples/vue/vue.min.js"></script> <!-- Vue.js core -->
<!-- Or CDN <script src="https://cdn.jsdelivr.net/npm/vue"></script> -->

<script src="dist/vue-easy-tinymce.min.js"></script> <!-- VueEasyTinyMCE module-->
<!-- Or CDN <script src="https://cdn.jsdelivr.net/npm/vue-easy-tinymce/dist/vue-easy-tinymce.min.js"></script> -->

<script src="examples/index.js"></script> <!-- Your project js code -->

In the next step, use the VueEasyTinyMCE in vue instance as a component

下一步，将vue实例中的VueEasyTinyMCE用作组件

new Vue({
    // ,...
    components: {
        // <tinymce> tag available in parent's template
        'tinymce': VueEasyTinyMCE
    },
    data: {
        /* Your data and models here */
        myModel: '<p>initial value</p>',

        /* Config can be declare here */
        myPlugins : [],
        myToolbar1: '',
        myToolbar2 : '',
        myOtherOptions : {}
    }
    // ,...
});

要么

Vue.component('tinymce', VueEasyTinyMCE);
new Vue({
    // ...
});

设定档 (Config)

The VueEasyTinyMCE configuration can be defined in:

VueEasyTinyMCE配置可以在以下位置定义：

Inside Vue instance in data section.
数据部分中的Vue实例内部。

Example:
例：

Explained in above.
在上面解释。
Inside <script></script> tag in above of component.
在组件上方的<script></script>标记内。

Example:
例：

<script>var configToolbar1 = 'undo redo | bold';</script>
<tinymce :toolbar1="configToolbar1"></tinymce>

Inside <tinymce></tinymce> By binding value directly.
在<tinymce></tinymce>通过直接绑定值。

Example:
例：

<tinymce :toolbar1="'undo redo | bold'"></tinymce>

道具 (props)

Prop	Type	Default	Required
`:plugins`	Array	[ ]	No
`:toolbar1`	String	' '	No
`:toolbar2`	String	' '	No
`:other`	Object	{ }	No

Struts	类型	默认	需要
`:plugins`	数组	[]	没有
`:toolbar1`	串	''	没有
`:toolbar2`	串	''	没有
`:other`	目的	{}	没有

Config value example:

配置值示例：

var myPlugins = [
    'advlist autolink lists link image charmap print preview anchor textcolor',
    'searchreplace visualblocks code fullscreen',
    'insertdatetime media table contextmenu paste code directionality template colorpicker textpattern'
];

var myToolbar1 = 'undo redo | bold italic strikethrough | forecolor backcolor | template link | bullist numlist | ltr rtl | removeformat';

var myToolbar2 = '';

var myOtherOptions = {
    height: 200,
    templates: [
        {title: 'Test template 1', content: 'Test 1'},
        {title: 'Test template 2', content: 'Test 2'}
    ]
    //,content_css: 'css/tinymce-content.css'
    //,width:600,
    //directionality: 'rtl',
    //theme: 'modern',
    //menubar: false
    //, etc...
};

Finally, you can easily use the <tinymce></tinymce> in your own view.

最后，您可以在自己的视图中轻松使用<tinymce></tinymce> 。

<tinymce v-model="myModel"
    :plugins="myPlugins" :toolbar1="myToolbar1" :toolbar2="myToolbar2"
    :other="myOtherOptions">
</tinymce>

例 (Example)

At first read the Usage section and then follow below code:

首先，请阅读“ 用法”部分，然后遵循以下代码：

index.js (index.js)

new Vue({
    el: '#app',
    data: {
        /* Your data and models here */
        myModel: '<p><span style="color: #ff0000;">Initial Value</span></p>',

        /* Config can be declare here */
        myPlugins : [
            'advlist autolink lists link image charmap print preview anchor textcolor',
            'searchreplace visualblocks code fullscreen',
            'insertdatetime media table contextmenu paste code directionality template colorpicker textpattern'
        ],
        myToolbar1: 'undo redo | bold italic strikethrough | forecolor backcolor | template link | bullist numlist | ltr rtl | removeformat',
        myToolbar2 : '',
        myOtherOptions : {
            height: 200,
            templates: [
                {title: 'Test template 1', content: 'Test 1'},
                {title: 'Test template 2', content: 'Test 2'}
            ],
            content_css: 'css/tinymce-content.css'
            //,width:600,
            //directionality: 'rtl',
            //theme: 'modern',
            //menubar: false
            //, etc...
        }
    },
    components: {
        'tinymce': VueEasyTinyMCE
    },
    methods: {
        getModelValue: function () {
            alert(this.myModel);
        },
        changeModelValue: function () {
            this.myModel = '<p>Change value programmability</p>';
        },
        clearModelValue: function () {
            this.myModel = '';
        }
    }
});

index.html (index.html)

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue-easy-tinymce</title>

    <link rel="stylesheet" href="css/style.css">

</head>
<body>


<div id="app">
    <img src="logo.png">

    <tinymce v-model="myModel"
             :plugins="myPlugins" :toolbar1="myToolbar1" :toolbar2="myToolbar2"
             :other="myOtherOptions">
    </tinymce>

    <br>
    <button @click="getModelValue()">Get current model value</button>
    <button @click="changeModelValue()">Change model value programmability</button>
    <button @click="clearModelValue()">Clear model value</button>

    <br><br>
    <a target="_blank" href="https://github.com/m3esma/vue-easy-tinymce">vue-easy-tinymce</a>

</div>


<script src="tinymce/tinymce.min.js"></script> <!-- TinyMCE core -->
<!-- Or CDN <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.7.4/tinymce.min.js"></script> -->

<script src="vue/vue.min.js"></script> <!-- Vue.js core -->
<!-- Or CDN <script src="https://cdn.jsdelivr.net/npm/vue"></script> -->

<script src="../dist/vue-easy-tinymce.min.js"></script> <!-- VueEasyTinyMCE module-->
<!-- Or CDN <script src="https://cdn.jsdelivr.net/npm/vue-easy-tinymce/dist/vue-easy-tinymce.min.js"></script> -->

<script src="index.js"></script> <!-- Your project js code -->


</body>
</html>

In the above example, you can use node package manager (npm) instead of scripts. it explained in the Usage section.

在上面的示例中，可以使用节点包管理器(npm)代替脚本。在用法部分进行了说明。