lizhenqiu blog

        handleAvatarSuccess(res, file) {
            //console.log(213);
            // this.myData= file;
            this.$refs.upimg.clearFiles(); //上传成功之后清除历史记录
            //this.handleInitTableData();  //初始化表格数据
        },

        /*uploadVideoProcess(event, file, fileList){
            console.log(file.percentage.toFixed(0));
        },*/

        // 图片上传
        httpRequestLogo(file) {
            if('' === this.categoryprice) {
                return this.$message.error('请选择图片分类')
            }
            let formdata = new FormData()
            formdata.append('file',file.file)
            formdata.append('name',file.file.name)
            formdata.append('categoryId', this.categoryprice)

            this.loading=true;

            const config = {
                onUploadProgress: progressEvent => {
                    // progressEvent.loaded:已上传文件大小
                    // progressEvent.total:被上传文件的总大小
                    let progressPercent = Number((progressEvent.loaded / progressEvent.total * 100).toFixed(2))

                    if(progressPercent>99) this.loading=false;
                    this.progressPercent=progressPercent;
                    //console.log(progressPercent);
                }
            }

            this.$http.post('/image/upload', formdata,config).then(({ data: res }) => {
                console.log(res)
                if(1 !== res.code) {
                    return this.$message.error(res.msg)
                }
                this.$message.success('上传成功')
                this.handleAvatarSuccess()
                this.getDataList()
            })
            
        },

<!--配置文件
value: //编辑器内容
config:{
    eddc:{
        //其他
    },
    toolbars:[ //工具栏]
}
editorNum: 1 //编辑器编号
width: 75%
width1: 380px
-->

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

        <div :id="'editor'+editorNum"></div>

        <JxtPicture
            :exhibition="exhibition"
            @close="onClose"
            :title="'图片管理'"
            @getImg="getImg"
            :width="'75%'"
            :width1="'380px'"
            :priceLength="10000"
            v-if="exhibition"
        ></JxtPicture>

    </div>

</template>

<script>

import JxtPicture from '../components/jxt-picture.vue'

export default {
    name: 'ue1',
    components: { 
        JxtPicture
    },
    props: {
        editorNum:{
            type: Number,
            default:1 //编辑器编号
        },
        value: {
            type: String,
            default: '',
            required: false
        },
        config: {
            type: Object,
            default: {
                eddc:{},
                toolbars:[]
            },
            required: false
        },
    },
    data() {
        return {
            exhibition:false,
            editor: null,
            instance: null,
            //texta: 333,
            configd:this.config,
            eddc:{
                initialFrameWidth:null ,//宽度随浏览器自适应
                wordCount: false, //关闭字数统计
                elementPathEnabled : false,//隐藏元素路径
                autoHeightEnabled: true,//是否自动长高
                autoFloatEnabled: true,//是否保持toolbar的位置不动
                initialFrameHeight: 360,
            },
            toolbars: [[
                'source', //源代码
                //'anchor', //锚点
                'undo', //撤销
                'redo', //重做
                '|',
                'forecolor', //字体颜色
                'backcolor', //背景色
                'bold', //加粗
                //'indent', //首行缩进
                //'snapscreen', //截图
                'italic', //斜体
                'underline', //下划线
                'strikethrough', //删除线
                'subscript', //下标
                'fontborder', //字符边框
                'superscript', //上标
                '|',
                'formatmatch', //格式刷
                //'blockquote', //引用
                'pasteplain', //纯文本粘贴模式
                'selectall', //全选
                //'print', //打印
                //'preview', //预览
                'horizontal', //分隔线
                'removeformat', //清除格式
                '|',
                //'time', //时间
                //'date', //日期
                //'unlink', //取消链接
                'insertrow', //前插入行
                'insertcol', //前插入列
                'mergeright', //右合并单元格
                'mergedown', //下合并单元格
                'deleterow', //删除行
                'deletecol', //删除列
                'splittorows', //拆分成行
                'splittocols', //拆分成列
                'splittocells', //完全拆分单元格
                'deletecaption', //删除表格标题
                'inserttitle', //插入标题
                'mergecells', //合并多个单元格
                'deletetable', //删除表格
                'cleardoc', //清空文档
                //'insertparagraphbeforetable', //"表格前插入行"
                //'insertcode', //代码语言
                //'fontfamily', //字体
                '|',
                'fontsize', //字号
                'paragraph', //段落格式
                //'simpleupload', //单图上传
                //'insertimage', //多图上传
                //'edittable', //表格属性
                //'edittd', //单元格属性
                //'link', //超链接
                //'emotion', //表情
                //'spechars', //特殊字符
                //'searchreplace', //查询替换
                //'map', //Baidu地图
                //'gmap', //Google地图
                //'insertvideo', //视频
                //'help', //帮助
                '|',
                'justifyleft', //居左对齐
                'justifyright', //居右对齐
                'justifycenter', //居中对齐
                'justifyjustify', //两端对齐
                '|',
                'insertorderedlist', //有序列表
                'insertunorderedlist', //无序列表
                //'directionalityltr', //从左向右输入
                //'directionalityrtl', //从右向左输入
                //'rowspacingtop', //段前距
                //'rowspacingbottom', //段后距
                'pagebreak', //分页
                'insertframe', //插入Iframe
                '|',
                'imagenone', //默认
                'imageleft', //左浮动
                'imageright', //右浮动
                //'attachment', //附件
                'imagecenter', //居中
                //'wordimage', //图片转存
                'lineheight', //行间距
                //'edittip ', //编辑提示
                //'customstyle', //自定义标题
                //'autotypeset', //自动排版
                //'webapp', //百度应用
                //'touppercase', //字母大写
                //'tolowercase', //字母小写
                //'background', //背景
                //'template', //模板
                //'scrawl', //涂鸦
                //'music', //音乐
                'inserttable', //插入表格
                //'drafts', // 从草稿箱加载
                'charts', // 图表
                '|',
                'fullscreen', //全屏
                'macros', // 自定义上传
            ]]
        }
    },
    watch: {
        value: {
            handler: function(val, oldVal) {
                this.editor = window.UE.getEditor('editor'+this.editorNum, this.configd);
                this.editor.setContent(val);
            }
        }
    },
    mounted () {

        let config=this.config;
        //console.log(config.eddc);return false;

        let eddc=config.eddc && Object.keys(config.eddc).length!=0?config.eddc:this.eddc

        let toolbars=config.toolbars 
        && config.toolbars.length 
        && config.toolbars[0] 
        && config.toolbars[0].length
        ?config.toolbars:this.toolbars

        //console.log(eddc);
        eddc.toolbars=toolbars;
        console.log(eddc)
        this.configd=eddc;
        

        this.$nextTick(() => {
            const _this = this
            
            this.editor = window.UE.getEditor('editor'+this.editorNum, this.configd);

            this.editor.addListener('ready', function () {
                _this.editor.setContent(_this.value)
            })
            this.editor.commands['macros'] = { 
                execCommand : () => {
                    this.beforeInsertImage()
                },
                queryCommandState: function(){
		
		}
            }
        })
    },
    methods: {

        onClose() {
            this.exhibition = false
        },

        getUEContent () {
            return this.editor.getContent()
        },
        beforeInsertImage() {
            //this.$emit('showModal', { editor: 'editor' })

            //console.log(e)
            this.exhibition = true
            //this.priceLength = 10000

        },

        getImg(e) {

            let UE = this.editor
            e.forEach(item => {
                UE.execCommand('insertHtml', `<img src=${item.org_img}>`) 
            })

        },


    },
    destroyed () {
        this.editor.destroy()
    }
}
</script>

<style lang="scss" scoped>
    /*#editor {
        width: 90vh;    
    }*/
</style>

<script type="text/javascript" src="ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="ueditor/ueditor.all.min.js"> </script>
<script type="text/javascript" src="ueditor/lang/zh-cn/zh-cn.js"></script>
<script>
$(function() {
//本来是这样的:UE.getEditor('editor'); 传入参数后就是下面那样子了，toolbars里的就是工具的图标
UE.getEditor('editor', {
toolbar: [
['fullscreen', 'source', 'undo', 'redo', 'bold', 'italic',
'underline','fontborder', 'backcolor', 'fontsize', 'fontfamily',
'justifyleft', 'justifyright','justifycenter', 'justifyjustify',
'strikethrough','superscript', 'subscript', 'removeformat',
'formatmatch','autotypeset', 'blockquote', 'pasteplain', '|',
'forecolor', 'backcolor','insertorderedlist', 'insertunorderedlist',
'selectall', 'cleardoc', 'link', 'unlink','emotion', 'help']
]
});
})
</script>

toolbars: [
[
'anchor', //锚点
'undo', //撤销
'redo', //重做
'bold', //加粗
'indent', //首行缩进
'snapscreen', //截图
'italic', //斜体
'underline', //下划线
'strikethrough', //删除线
'subscript', //下标
'fontborder', //字符边框
'superscript', //上标
'formatmatch', //格式刷
'source', //源代码
'blockquote', //引用
'pasteplain', //纯文本粘贴模式
'selectall', //全选
'print', //打印
'preview', //预览
'horizontal', //分隔线
'removeformat', //清除格式
'time', //时间
'date', //日期
'unlink', //取消链接
'insertrow', //前插入行
'insertcol', //前插入列
'mergeright', //右合并单元格
'mergedown', //下合并单元格
'deleterow', //删除行
'deletecol', //删除列
'splittorows', //拆分成行
'splittocols', //拆分成列
'splittocells', //完全拆分单元格
'deletecaption', //删除表格标题
'inserttitle', //插入标题
'mergecells', //合并多个单元格
'deletetable', //删除表格
'cleardoc', //清空文档
'insertparagraphbeforetable', //"表格前插入行"
'insertcode', //代码语言
'fontfamily', //字体
'fontsize', //字号
'paragraph', //段落格式
'simpleupload', //单图上传
'insertimage', //多图上传
'edittable', //表格属性
'edittd', //单元格属性
'link', //超链接
'emotion', //表情
'spechars', //特殊字符
'searchreplace', //查询替换
'map', //Baidu地图
'gmap', //Google地图
'insertvideo', //视频
'help', //帮助
'justifyleft', //居左对齐
'justifyright', //居右对齐
'justifycenter', //居中对齐
'justifyjustify', //两端对齐
'forecolor', //字体颜色
'backcolor', //背景色
'insertorderedlist', //有序列表
'insertunorderedlist', //无序列表
'fullscreen', //全屏
'directionalityltr', //从左向右输入
'directionalityrtl', //从右向左输入
'rowspacingtop', //段前距
'rowspacingbottom', //段后距
'pagebreak', //分页
'insertframe', //插入Iframe
'imagenone', //默认
'imageleft', //左浮动
'imageright', //右浮动
'attachment', //附件
'imagecenter', //居中
'wordimage', //图片转存
'lineheight', //行间距
'edittip ', //编辑提示
'customstyle', //自定义标题
'autotypeset', //自动排版
'webapp', //百度应用
'touppercase', //字母大写
'tolowercase', //字母小写
'background', //背景
'template', //模板
'scrawl', //涂鸦
'music', //音乐
'inserttable', //插入表格
'drafts', // 从草稿箱加载
'charts', // 图表
]
]

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<p onclick="ky();">跨域</p>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<script>
function ky(){
	$.ajax({
	type: "POST",
	url:'http://group.jxttest.com/v1/articles/catsLists',
	error: function(request) {
		console.log('失败：'+request);
	},
	success: function(data) {
		console.log('成功：'+data);
		
	}
});
}
</script>

<?php
return [
    // 数据库类型
    'type' => 'mysql',
    // 服务器地址
    'hostname' => 'mysql',
    // 数据库名
    'database' => 'jxt',
    // 用户名
    'username' => 'root',
    // 密码
    'password' => '123456',
    // 端口
    'hostport' => '3306',