zoukankan      html  css  js  c++  java
  • vue.js组件化使用百度富文本编辑器(一)

    注意:

    本文采用的编辑器为:idea

    1.下载百度富文本编辑器,地址:https://ueditor.baidu.com/website/download.html#ueditor

    2.加入到static文件夹下,如图:

    3.在main.js中引入js。

    注意:一定要修改ueditor.config.js中的路径

    window.UEDITOR_HOME_URL = "./static/ueditor/"

    
    

    4.编写vue组件:

    <template>
    <div>
    <script id="editor" type="text/plain"></script>
    </div>
    </template>
    <script>
    export default {
    name: 'UE',
    data () {
    return {
    editor: null
    }
    },
    props: {
    defaultMsg: {
    type: String
    },
    config: {
    type: Object
    }
    },
    mounted() {
    const _this = this;
    this.editor = UE.getEditor('editor', this.config); // 初始化UE
    this.editor.addListener("ready", function () {
    _this.editor.setContent(_this.defaultMsg); // 确保UE加载完成后,放入内容。
    });
    },
    methods: {
    getUEContent() { // 获取内容方法
    return this.editor.getContent()
    }
    },
    destroyed() {
    this.editor.destroy();
    }
    }
    </script>

    5.编写测试使用的Vue界面:
    <template>
    <div>
    <navigation></navigation>
    <div style=" 50%;padding-left: 25%;" >
    <!--<el-input type="textarea" v-model="form.desc" placeholder="说点什么吧"></el-input>-->
    <div class="components-container">
    <el-button @click="getUEContent()" type="primary" style="padding: 10px;margin: 10px;">获取内容</el-button>
    <div class="editor-container">
    <ueditor :defaultMsg=defaultMsg :config=config ref="ue"></ueditor>
    </div>
    </div>
    </div>
    </div>
    </template>

    <script>
    //采用局部引用的方式注册组件
    import ueditor from '@/components/Ueditor';
    export default {
    name: "PublishPage",
    data() {
    return {
    defaultMsg: '说点什么吧',
    config: {
    initialFrameWidth: null,
    initialFrameHeight: 350
    }
    }
    },
    components: {
    ueditor
    },
    methods: {
    getUEContent() {
    let content = this.$refs.ue.getUEContent();
    this.$notify({
    title: '获取成功,可在控制台查看!',
    message: content,
    type: 'success'
    });
    console.log(content)
    }
    }
    }
    </script>

    <style scoped>

    </style>

    6.编写路由

    7.运行项目

    npm run dev

    8.效果展示

    注:

    1.编写的文本和媒体文件发送到服务端请看下一篇介绍。

    2.这是笔者学习记录的过程,如果有错误,敬请指正,不喜勿喷,谢谢。

    
    
  • 相关阅读:
    Matlab 绘制三维立体图(以地质异常体为例)
    Azure DevOps的variable group实现array和hashtable参数的传递
    Azure DevOps 利用rest api设置variable group
    Azure AADSTS7000215 其中一种问题的解决
    Power BI 实现实时更新Streaming Dataset
    AAD Service Principal获取azure user list (Microsoft Graph API)
    Matlab 沿三维任意方向切割CT图的仿真计算
    Azure Powershell script检测登陆并部署ARM Template
    Azure KeyVault设置策略和自动化添加secrets键值对
    Azure登陆的两种常见方式(user 和 service principal登陆)
  • 原文地址:https://www.cnblogs.com/sanshao-ghf/p/10286878.html
Copyright © 2011-2022 走看看