关于在vue 中使用百度ueEditor编辑器的方法实例代码

下面是在Vue中使用百度UEditor编辑器的方法实例代码：

安装UEditor

首先，在你的Vue项目中安装UEditor。你可以按照以下步骤安装：

1. 进入你的项目目录，在终端或命令行中输入以下命令：

npm install vue-ueditor-wrap --save

1. 在main.js中引入UEditor：

// 引入UEditor
import '../static/UE/ueditor.config.js'
import '../static/UE/ueditor.all.min.js'
import '../static/UE/lang/zh-cn/zh-cn.js'

1. 在你的页面中加入UEditor：

<template>
  <div>
    <vue-ueditor-wrap id="ueditor"></vue-ueditor-wrap>
  </div>
</template>

配置UEditor

在你的Vue项目中配置UEditor，你需要遵循以下步骤：

1.创建文件UEditorConfig.js：

let UEditorConfig = {
    // 设置语言种类
    lang: 'zh-cn',
    // 开启自动保存功能
    autoHeightEnabled: true,
    // 自定义工具栏
    toolbars: [
        [
            "undo", 
            "redo", 
            "|", 
            "bold",
            "underline", 
            "italic", 
            'forecolor', 
            'backcolor',
            'insertorderedlist',
            'insertunorderedlist',
            "removeformat",
            "|",
            "justifyleft",
            "justifycenter",
            "justifyright",
            "justifyjustify",
            'paragraph',
            "|",
            "insertimage",
            "insertvideo",
            "attachment",
            "|",
            "fullscreen"
        ]
    ],
    // 设置编辑器的宽度
    initialFrameWidth: '100%'
}
export default UEditorConfig;

1. 引入UEditorConfig.js：

import UE from 'vue-ueditor-wrap'
import UEditorConfig from "./UEditorConfig";

Vue.component('vue-ueditor-wrap', UE)
// 使用UEditorConfig配置UEditor
Vue.prototype.UEditorConfig = UEditorConfig

在Vue中使用UEditor

现在，你已经安装和配置好了UEditor，可以在你的Vue组件中使用了。可以按照以下步骤使用：

<template>
  <div>
    <vue-ueditor-wrap id="ueditor" :config="UEditorConfig"></vue-ueditor-wrap>
  </div>
</template>

其中，:config为vue-ueditor-wrap的属性，用于渲染UEditor编辑器。config的值为UEditorConfig，已在全局注入。

接下来，您可以在您的Vue组件中使用UEditor编辑器了！

示例

以下是两个基于Vue.js和UEditor的示例：

// 示例1：简单的一个带有UEditor的组件
<template>
    <div class="container">
        <vue-ueditor-wrap id="ueditor" :config="UEditorConfig"></vue-ueditor-wrap>
    </div>
</template>

<script>
    import UE from 'vue-ueditor-wrap';
    import UEditorConfig from './UEditorConfig';

    export default {
        name: 'UEditor',
        components: {
            'vue-ueditor-wrap': UE
        },
        data() {
            return {
                UEditorConfig
            }
        }
    }

</script>

<style scoped>
    .container {
        width: 80%;
        margin: 0 auto;
        min-height: 500px;
        margin-top: 20px;
    }
</style>

// 示例2：一个带有UEditor的表单组件
<template>
    <div class="form-box">
        <form action="" method="get">
            <div>
                <label for="" class="label-input">文章标题：</label>
                <input type="text" v-model="title">
            </div>
            <div>
                <label for="" class="label-input">文章正文：</label>
                <vue-ueditor-wrap id="ueditor" :config="UEditorConfig" :value="content"></vue-ueditor-wrap>
            </div>
            <div>
                <input type="submit" value="发布文章">
            </div>
        </form>
    </div>
</template>

<script>
    import UE from 'vue-ueditor-wrap';
    import UEditorConfig from './UEditorConfig';

    export default {
        name: 'FormWithUEditor',
        components: {
            'vue-ueditor-wrap': UE
        },
        data() {
            return {
                UEditorConfig,
                title: '',
                content: ''
            }
        },
        methods: {
            submitForm() {
                console.log({
                    title: this.title,
                    content: this.content
                });
            }
        }
    }
</script>

<style scoped>
    .form-box {
        width: 80%;
        margin: 0 auto;
        margin-top: 20px;
    }

    .label-input {
        display: inline-block;
        width: 160px;
    }
</style>