zoukankan      html  css  js  c++  java
  • vue使用UEditor富文本编辑器

    1:下载富文本编辑器
    放到static目录下

    全局main.js引入

    // 引入 UEditor,注意顺序
    import '../static/UEditor/ueditor.config.js'
    import '../static/UEditor/ueditor.all.min.js'
    import '../static/UEditor/lang/zh-cn/zh-cn.js'
    import '../static/UEditor/ueditor.parse.min.js'
     
    2:封装组件(由于不是经常用,注册局部组件)
    <template>
        <div id="vueUEditor" class="ueditor-box">
          <script id="editor" type="text/plain">

          </script>
        </div>
    </template>

    <script>
        export default {
            name: 'vueUEditor',
            data () {
                return {
                   editor: null 
                }
            },
            props: {
                defaultMsg: {
                    type: String
                },
                config: {
                    type: Object
                }
            },
            mounted () {
                var that = this;
                that.editor = UE.getEditor('editor', that.config);

            },
            destroyed () {
                this.editor.destroy();
            },
            methods: {
                getUEContent () {
                    return this.editor.getContent();
                }
            },
        }
    </script>

    <style lang='less' type='text/less'>
        #editor {
            > div{
                 100% !important;
                > div {
                     100% !important;
                }
            }
        }
    </style>
     
    3:这个要后台配置图片上传路径
     
    static目录UEditor,php,config.json可配置文件上传路径
     
    4:引入调用
    import vueUEditor from '../../../components/vueUEditor/vueUEditor'
    components: { vueUEditor },
    <vueUEditor :config="config" ref="ue"></vueUEditor>
     
    data里面配置
    config: {
              // initialframeWidth: 800,
              // initialframeHeight: 500
            },
     
    获取编辑器的内容(html模板)
    this.$refs.ue.getUEContent();
     
    设置编辑器的内容(html模板)
    var ue = UE.getEditor('editor');
    ue.ready(function() { // 准备好再调用setContent
         ue.setContent(detail)
    });
    editor为ID,detail为变量
  • 相关阅读:
    python中 __new__和__init__
    生成器
    边缘与轮廓
    霍夫变换
    高级滤波
    基本形态学滤波
    基本图形的绘制(基于skimage)
    图像的自动阈值分割
    图像的简单滤波
    直方图与均衡化
  • 原文地址:https://www.cnblogs.com/youaremysunshine19961002/p/11810716.html
Copyright © 2011-2022 走看看