vue使用UEditor

最新推荐文章于 2025-06-17 10:45:20 发布

原创最新推荐文章于 2025-06-17 10:45:20 发布 · 661 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #富文本编辑器

vue 专栏收录该内容

3 篇文章

订阅专栏

博客介绍了在Vue中使用UEditor富文本编辑器的方法。包括从官网下载1.4.3.3 PHP版本的UTF - 8版本，将php版本内容添加到/static/UE/，在main.js全局引入所需文件，修改配置文件，单独定义组件，最后在父组件中使用该组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue使用UEditor

官网下载

[1.4.3.3 PHP版本] UTF-8版本

https://ueditor.baidu.com/website/download.html

把php版本中的内容添加到 /static/UE/
(php 文件夹 / index.html不添加)
main.js 全局引入需要的文件

    //引入UEditor需要的文件，顺序很重要
    import '../static/UE/ueditor.config'
    import '../static/UE/ueditor.all.min'
    import '../static/UE/lang/zh-cn/zh-cn'
    import '../static/UE/ueditor.parse.min'

修改 /static/UE/ueditor.config.js

    window.UEDITOR_HOME_URL = "/static/UE/";        //根目录相对路径

components单独定义 UEditor.vue 组件

<template>
  <div id="UEditor">
    <script id="editor" type="text/plain"></script>
  </div>
</template>

<script>
    export default {
        name: "UEditor",
        data(){
          return{
            editor:null
          }
        },
        props:{
          defaultMsg:{type:String},
          config:{type:Object}
        },
        mounted(){
          //初始化UE
          const _this = this;
          _this.editor = UE.getEditor('editor',_this.config);
        },
        methods:{
          getUEContent(){
            //获取内容方法
            return this.editor.getUEContent()
          }
        },
        destoryed(){
          this.editor.destory();
        }
    }
</script>

父组件中使用UEditor组件

<template>
  <div class="docMain">
    <UEditor :config=config ref="ue"></UEditor>
  </div>
</template>

<script>
    import UEditor from '../components/UEditor'
    export default {
        name: "test",
        data(){
          return{
            config:{
              initialFrameWidth:900,
              initialFrameHeight:650
            },
            docTitle:"",
            docDescription:"",
            docMain:"",
          }
        },
        components:{
          UEditor
        }
    }
</script>