• vue中ueditor使用和上传图片和遇到的坑


    最近使用了ueditor富文本做表单提交,其他动能使用正常,上传图片一直都有问题,找了很久最终解决了,分享一下我的经验.

    一.下载ueditor

    Ueditor项目下载地址:http://ueditor.baidu.com/website/ 

    因为我使用的是vue,所以使用了这个插件vue-ueditor-wrap,安装改插件,下载ueditor的php版本(因为后台使用的是php版本)。

    二、把php版本中的如下内容添加到 /static/UEditor/ 

    将php文件夹删除,我这边用不到!!!

    三、在vue项目中单独定义一个的富文本编辑器模块: 

     在父组件中的使用方式,接收父组件传递过来的参数,对编辑器进行初始化赋值。 

    四、在父组件中使用组件

    <div>
        <vue-ueditor-wrap v-model="goods_desc" :config="myConfig" @beforeInit="addCustomButtom" :key="1"></vue-ueditor-wrap>
    </div>
    <script>
            import VueUeditorWrap from './vue-ueditor-wrap.vue'
            export default {
                data() {
                    return {
                        goods_desc: '',
                        myConfig: {
                            autoHeightEnabled: false,
                            initialFrameHeight: 400,
                            initialFrameWidth: '100%',
                            UEDITOR_HOME_URL: '/static/UEditor/',
                            serverUrl: 'http://localhost:8081/controller.php', //图片上传的地址
                        },
                    }
                },
                methods() {
                    addCustomButtom(editorId) {
                        window.UE.registerUI('test-button', function (editor, uiName) {
                            // 注册按钮执行时的 command 命令,使用命令默认就会带有回退操作
                            editor.registerCommand(uiName, {
                                execCommand: function () {
                                    editor.execCommand('inserthtml', `<span>这是一段由自定义按钮添加的文字</span>`);
                                }
                            });
                            // 创建一个 button
                            var btn = new window.UE.ui.Button({
                                // 按钮的名字
                                name: uiName,
                                // 提示
                                title: '鼠标悬停时的提示文字',
                                // 需要添加的额外样式,可指定 icon 图标,图标路径参考常见问题 2
                                cssRules: "",
                                // 点击时执行的命令
                                onclick: function () {
                                    // 这里可以不用执行命令,做你自己的操作也可
                                    editor.execCommand(uiName);
                                }
                            });
                            // 当点到编辑内容上时,按钮要做的状态反射
                            editor.addListener('selectionchange', function () {
                                var state = editor.queryCommandState(uiName);
                                if (state === -1) {
                                    btn.setDisabled(true);
                                    btn.setChecked(false);
                                } else {
                                    btn.setDisabled(false);
                                    btn.setChecked(state);
                                }
                            });
                            // 因为你是添加 button,所以需要返回这个 button
                            return btn;
                        }, 0 /* 指定添加到工具栏上的哪个位置,默认时追加到最后 */, editorId /* 指定这个 UI 是哪个编辑器实例上的,默认是页面上所有的编辑器都会添加这个按钮 */);
                    }
                }
            }
        </script>

    上传图片时需要后台处理、将接口写好,这样就可以看到效果了.

     这个是单张图片上传的要配置后台地址,多张图片上传也是一样

    五.vue中使用ueditor编辑器遇见的坑

    最近在项目中遇到需要提交form表单的,由于数据较多,不想新建页面(主要是页面传值比较麻烦),我这边用到的是elemen-ui中的弹框(el-dialog),将编辑器引入。

    <el-dialog
          :visible.sync="showForm"
          width="80%"
          :close-on-click-modal="false"
          :append-to-body="true"
        >
        <el-form :model="formData" class="as-form-col">
            <el-form-item
                label="具体描述"
                :label-width="formLabelWidth"
            >
            <vue-ueditor-wrap
                v-model="formData.detail" //绑定的字段
                :config="myConfig"
                @beforeInit="addCustomButtom"
                :key="1"
            ></vue-ueditor-wrap>
         </el-form-item>
     </el-dialog>
    
    <script>
    import VueUeditorWrap from "../common/vue-ueditor-wrap";
    export default {
        data() {
            return {
                showForm: false,
                formLabelWidth: '100px',
                formData: {
                    detail:''
                },
                myConfig: {
                    autoHeightEnabled: false,
                    initialFrameHeight: 400,
                    initialFrameWidth: "100%",
                    UEDITOR_HOME_URL: "/static/UEditor/", // 目录
                    serverUrl: "图片上传的地址"
                }
            }
        }
        components: {
            VueUeditorWrap
        },
        methods:{
            addCustomButtom(editorId) { // 直接去网上赋值过来
                 window.UE.registerUI(
                "test-button",
                function(editor, uiName) {
                     // 注册按钮执行时的 command 命令,使用命令默认就会带有回退操作
                    editor.registerCommand(uiName, {
                    execCommand: function() {
                    editor.execCommand(
                        "inserthtml",
                        `<span>这是一段由自定义按钮添加的文字</span>`
                    );
                }
              });
              // 创建一个 button
              var btn = new window.UE.ui.Button({
                // 按钮的名字
                name: uiName,
                // 提示
                title: "鼠标悬停时的提示文字",
                // 需要添加的额外样式,可指定 icon 图标,图标路径参考常见问题 2
                cssRules: "",
                // 点击时执行的命令
                onclick: function() {
                  // 这里可以不用执行命令,做你自己的操作也可
                  editor.execCommand(uiName);
                }
              });
              // 当点到编辑内容上时,按钮要做的状态反射
              editor.addListener("selectionchange", function() {
                var state = editor.queryCommandState(uiName);
                if (state === -1) {
                  btn.setDisabled(true);
                  btn.setChecked(false);
                } else {
                  btn.setDisabled(false);
                  btn.setChecked(state);
                }
              });
              // 因为你是添加 button,所以需要返回这个 button
              return btn;
            },
            0 /* 指定添加到工具栏上的哪个位置,默认时追加到最后 */,
            editorId /* 指定这个 UI 是哪个编辑器实例上的,默认是页面上所有的编辑器都会添加这个按钮 */
          );
        },
        }
    }
    </script>

    打开可以正常显示,但有些功能显示不全

     最后找了很多原因,发现是层级问题,设置了编辑器的层级问题,将编辑器层级设高发现不能点击,最后将弹框的层级设低一点才解决了这个问题

    <style scope>
    
    .el-dialog__wrapper {
      z-index: 203 !important;
    }
    .v-modal {
      z-index: 200 !important;
    }
    </style>

    有待更新......

  • 相关阅读:
    原生js封装二级城市下拉列表
    jsonp帮助你知道你关注的他或她喜欢什么歌曲
    sql 进制转换,支持93内的进制相互转换
    linux下批量删除文件
    Ubuntu环境下golang环境搭建
    centos6.5 修改网络配置
    elasticsearch(二)
    Redis
    Spring Data JPA
    elasticsearch(一)
  • 原文地址:https://www.cnblogs.com/0314dxj/p/12172759.html
走看看 - 开发者的网上家园