npm - @ajaxjs/ui - Versions diffs - 1.0.5 → 1.1.0 - Mend

@ajaxjs/ui 1.0.5 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (53) hide show

package/dist/components/form/HtmlEditor/HtmlEditor.js +69 -76
package/dist/components/form/HtmlEditor/HtmlEditor.js.map +1 -1
package/dist/components/form/HtmlEditor/HtmlEditor.less +5 -1
package/dist/components/form/HtmlEditor/HtmlEditor.ts +78 -84
package/dist/components/form/HtmlEditor/HtmlEditor.vue +19 -19
package/package.json +7 -3
package/.browserslistrc +0 -3
package/.eslintrc.js +0 -25
package/babel.config.js +0 -5
package/public/favicon.ico +0 -0
package/public/index.html +0 -24
package/src/App.vue +0 -32
package/src/assets/logo.png +0 -0
package/src/components/form/AjSelect.vue +0 -33
package/src/components/form/HtmlEditor/HtmlEditor.less +0 -161
package/src/components/form/HtmlEditor/HtmlEditor.ts +0 -339
package/src/components/form/HtmlEditor/HtmlEditor.vue +0 -70
package/src/components/form/HtmlEditor/html-editor-HtmlSanitizer.js +0 -103
package/src/components/form/TreeLikeSelect.vue +0 -125
package/src/components/list/attachment-picture-list.ts +0 -57
package/src/components/list/list.js +0 -227
package/src/components/list/list.ts +0 -261
package/src/components/widgets/AccordionMenu.vue +0 -138
package/src/components/widgets/AdjustFontSize.vue +0 -66
package/src/components/widgets/AjAvatar.vue +0 -42
package/src/components/widgets/Article.vue +0 -49
package/src/components/widgets/BaiduSearch.vue +0 -50
package/src/components/widgets/Expander.vue +0 -65
package/src/components/widgets/ImageEnlarger.vue +0 -42
package/src/components/widgets/OpacityBanner.vue +0 -124
package/src/components/widgets/ProcessLine.vue +0 -133
package/src/globalDeclare/shims.d.ts +0 -4
package/src/index.ts +0 -8
package/src/main.ts +0 -12
package/src/pages/Nav.vue +0 -23
package/src/pages/common.less +0 -10
package/src/pages/demo/Article.vue +0 -30
package/src/pages/demo/Form.vue +0 -35
package/src/pages/demo/Wdigets.vue +0 -168
package/src/router/index.js +0 -39
package/src/router/index.js.map +0 -1
package/src/router/index.ts +0 -39
package/src/shims-tsx.d.ts +0 -13
package/src/shims-vue.d.ts +0 -4
package/src/style/common-functions.less +0 -171
package/src/style/reset.less +0 -18
package/src/views/About.vue +0 -5
package/src/views/Home.vue +0 -49
package/src/views/desktop/Desktop.vue +0 -251
package/src/views/desktop/Window.vue +0 -62
package/src/views/desktop/desktop.md +0 -14
package/tsconfig.json +0 -31
package/vue.config.js +0 -17

package/public/index.html DELETED Viewed

@@ -1,24 +0,0 @@
-<!DOCTYPE html>
-<html lang="">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-<!--     <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
-    <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script> -->
-<!--     <link href="https://cdn.bootcdn.net/ajax/libs/ionicons/3.0.0/css/ionicons-core.min.css" rel="stylesheet">
-    <link href="https://cdn.bootcdn.net/ajax/libs/ionicons/3.0.0/css/ionicons.min.css" rel="stylesheet"> -->
- <!--    <link href="//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" /> -->
-    <title><%= htmlWebpackPlugin.options.title %></title>
-  </head>
-  <body>
-    <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
-  </body>
-</html>

package/src/App.vue DELETED Viewed

@@ -1,32 +0,0 @@
-<template>
-  <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div>
-    <router-view />
-  </div>
-</template>
-<style lang="less">
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
-#nav {
-  padding: 30px;
-  a {
-    font-weight: bold;
-    color: #2c3e50;
-    &.router-link-exact-active {
-      color: #42b983;
-    }
-  }
-}
-</style>

package/src/assets/logo.png DELETED Viewed

Binary file

package/src/components/form/AjSelect.vue DELETED Viewed

@@ -1,33 +0,0 @@
-<template>
-  <select :name="name" class="aj-form-select">
-    <template v-for="value, key, index in options">
-      <option v-if="index === selectedIndex" selected :value="value" :key="index">{{key}}</option>
-      <option v-else :value="value" :key="index">{{key}}</option>
-    </template>
-  </select>
-</template>
-<script>
-/**
- * 最简单的下拉列表
- */
-export default {
-  props: {
-    name: { type: String, required: true }, // name for form
-    options: { type: Object, required: true }, // JSON input data
-    selectedIndex: { type: Number }, // starts form 0
-  },
-};
-</script>
-<style lang="less" scoped>
-.aj-form-select {
-  padding: 1px 4px;
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  border-color: #abadb3;
-  background: white
-    url("data:image/gif;base64,R0lGODlhCwAGAIABAGBgYP///yH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjAgNjEuMTM0MzQyLCAyMDEwLzAxLzEwLTE4OjA2OjQzICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjc1MEE0M0UzRTU5RDExRTVBNjNDRDVBNzRBRkUxMjYxIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjc1MEE0M0U0RTU5RDExRTVBNjNDRDVBNzRBRkUxMjYxIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NzUwQTQzRTFFNTlEMTFFNUE2M0NENUE3NEFGRTEyNjEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NzUwQTQzRTJFNTlEMTFFNUE2M0NENUE3NEFGRTEyNjEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4B//79/Pv6+fj39vX08/Lx8O/u7ezr6uno5+bl5OPi4eDf3t3c29rZ2NfW1dTT0tHQz87NzMvKycjHxsXEw8LBwL++vby7urm4t7a1tLOysbCvrq2sq6qpqKempaSjoqGgn56dnJuamZiXlpWUk5KRkI+OjYyLiomIh4aFhIOCgYB/fn18e3p5eHd2dXRzcnFwb25tbGtqaWhnZmVkY2JhYF9eXVxbWllYV1ZVVFNSUVBPTk1MS0pJSEdGRURDQkFAPz49PDs6OTg3NjU0MzIxMC8uLSwrKikoJyYlJCMiISAfHh0cGxoZGBcWFRQTEhEQDw4NDAsKCQgHBgUEAwIBAAAh+QQBAAABACwAAAAACwAGAAACD0R+hqDB6B5radL1ILynAAA7")
-    no-repeat right;
-}
-</style>

package/src/components/form/HtmlEditor/HtmlEditor.less DELETED Viewed

@@ -1,161 +0,0 @@
-@import 'https://netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css';
-.aj-form-html-editor {
-    ul.toolbar {
-        border          : 1px solid #C5C5C5;
-        border-radius   : 4px 4px 0 0;
-        border-bottom   : 0;
-        background-color: #E8E7E4;
-        width           : 100%;
-        height          : 30px;
-        margin          : 0;
-        box-sizing      : border-box;
-        padding         : 3px 4px;
-        &>li {
-            list-style: none;
-            float     : left;
-            cursor    : pointer;
-            &>i {
-                border     : 1px solid transparent;
-                min-width  : 25px;
-                height     : 20px;
-                line-height: 20px;
-                text-align : center;
-                display    : block;
-                padding-top: 2px;
-                font       : normal normal normal 18px/1 FontAwesome;
-                &:hover {
-                    border-right-color : #aaa;
-                    border-bottom-color: #aaa;
-                    border-top-color   : #fff;
-                    border-left-color  : #fff;
-                }
-                &:active {
-                    border-right-color : #f3f8fc;
-                    border-bottom-color: #f3f8fc;
-                    border-top-color   : #ccc;
-                    border-left-color  : #ccc;
-                }
-            }
-            ul li {
-                padding: 3px;
-                cursor : pointer;
-                &:hover {
-                    background-color: lightgray;
-                }
-            }
-            .cleanHTML {
-                background-size: 16px 16px;
-            }
-            .noBg {
-                background-image: none;
-            }
-        }
-    }
-    .editorBody {
-        iframe,
-        textarea {
-            border          : 1px solid #C5C5C5;
-            border-radius   : 0 0 4px 4px;
-            border-top-width: 0;
-            box-sizing      : border-box;
-            background-color: white;
-            height          : 600px;
-            width           : 100%;
-        }
-        textarea {
-            resize: none;
-        }
-    }
-    .colorPicker {
-        width   : 210px;
-        border  : 1px solid #D3D3D3;
-        position: absolute;
-        table {
-            border-collapse: collapse;
-        }
-        .colorhead {
-            height     : 23px;
-            line-height: 23px;
-            font-weight: bold;
-            width      : 100%;
-        }
-        .colortitle {
-            margin-left: 6px;
-            font-size  : 12px;
-        }
-        .colorpanel td {
-            border   : 1px solid #000;
-            height   : 10px;
-            width    : 10px;
-            overflow : hidden;
-            font-size: 1px;
-            cursor   : pointer;
-        }
-    }
-    // 字体演示
-    .fontfamilyChoser,
-    .fontsizeChoser {
-        a {
-            padding-right  : 2px;
-            display        : block;
-            padding-left   : 2px;
-            padding-bottom : 2px;
-            color          : #000;
-            line-height    : 120%;
-            padding-top    : 2px;
-            text-decoration: none;
-            &:hover {
-                background: #e5e5e5
-            }
-        }
-    }
-    // 登录面板 和忘记密码
-    .dorpdown {
-        position: relative;
-        &:hover .fontfamilyChoser,
-        .fontfamilyChoser:hover,
-        &:hover .fontsizeChoser,
-        .fontsizeChoser:hover,
-        &:hover .colorPicker,
-        .colorPicker:hover {
-            display: block;
-        }
-        &>div {
-            display         : none;
-            position        : absolute;
-            top             : 22px;
-            left            : 0;
-            background-color: #f5f5f5;
-            border          : 1px solid lightgray;
-            border-top      : 0;
-            padding         : 5px;
-            width           : 230px;
-        }
-        .fontsizeChoser {
-            top  : inherit;
-            right: 0;
-        }
-    }
-}

package/src/components/form/HtmlEditor/HtmlEditor.ts DELETED Viewed

@@ -1,339 +0,0 @@
-export default {
-    props: {
-        fieldName: { type: String, required: true },    // 表单 name，字段名
-        uploadImageActionUrl: String                    // 图片上传路径
-    },
-    data() {
-        return {
-            mode: 'iframe',
-            toolbarEl: null,
-            sourceEditor: null,
-            iframeEl: null,
-        };
-    },
-    mounted(): void {
-        const el = this.$el;
-        this.toolbarEl = <HTMLElement>el.querySelector('.toolbar');
-        this.iframeEl = <HTMLIFrameElement>el.querySelector('iframe');
-        // 这个方法只能写在 onload 事件里面， 不写 onload 里还不执行
-        (<Window>this.iframeEl.contentWindow).onload = (ev: Event) => {
-            const iframeDoc = (<Window>this.iframeEl.contentWindow).document;
-            iframeDoc.designMode = 'on';
-            iframeDoc.addEventListener('paste', onImagePaste.bind(this));// 直接剪切板粘贴上传图片
-            this.iframeDoc = iframeDoc;
-            new MutationObserver((mutationsList: MutationRecord[], observer: MutationObserver) => {
-                if (this.mode === 'iframe')
-                    this.sourceEditor.value = this.iframeDoc.body.innerHTML;
-            }).observe(iframeDoc.body, { attributes: true, childList: true, subtree: true, characterData: true });
-            this.sourceEditor.value && this.setIframeBody(this.sourceEditor.value);// 有内容
-        }
-        this.sourceEditor = <HTMLTextAreaElement>el.querySelector('textarea');
-        this.sourceEditor.classList.add("hide");
-        this.sourceEditor.name = this.fieldName;
-        this.sourceEditor.oninput = (ev: Event) => {
-            if (this.mode === 'textarea')
-                this.setIframeBody(this.sourceEditor.value);
-        }
-        this.uploadImgMgr = this.$refs.uploadLayer;
-    },
-    methods: {
-        /**
-         * 输入 HTML 内容
-         *
-         * @param html
-         */
-        setIframeBody(html: string): void {
-            this.iframeDoc.body.innerHTML = html;
-        },
-        /**
-        * 获取内容的 HTML
-        *
-        * @param cleanWord
-        * @param encode
-        */
-        getValue(cleanWord: boolean, encode: boolean): string {
-            let result: string = this.iframeDoc.body.innerHTML;
-            if (cleanWord)
-                result = cleanPaste(result);
-            if (encode)
-                result = encodeURIComponent(result);
-            return result;
-        },
-        /**
-         * 切換 HTML 編輯 or 可視化編輯
-         *
-         */
-        setMode(): void {
-            if (this.mode == 'iframe') {
-                this.iframeEl.classList.add('hide');
-                this.sourceEditor.classList.remove('hide');
-                this.mode = 'textarea';
-                grayImg.call(this, true);
-            } else {
-                this.iframeEl.classList.remove('hide');
-                this.sourceEditor.classList.add('hide');
-                this.mode = 'iframe';
-                grayImg.call(this, false);
-            }
-        },
-        /**
-         * 当工具条点击的时候触发
-         *
-         * @param ev
-         */
-        onToolBarClk(ev: Event): void {
-            let el: HTMLElement = <HTMLElement>ev.target,
-                clsName = <string>el.className.split(' ').shift();
-            switch (clsName) {
-                case 'createLink':
-                    // let result: string = prompt("请输入 URL 地址");
-                    // if (result)
-                    //     this.format("createLink", result);
-                    break;
-                case 'insertImage':
-                    // @ts-ignore
-                    if (window.isCreate)
-                        alert('请保存记录后再上传图片。');
-                    else {
-                        this.uploadImgMgr.show((json: any) => {
-                            if (json && json.isOk)
-                                this.format("insertImage", json.fullUrl);
-                        });
-                    }
-                    break;
-                case 'switchMode':
-                    this.setMode();
-                    break;
-                case 'cleanHTML':
-                    // @ts-ignore
-                    this.setIframeBody(HtmlSanitizer.SanitizeHtml(this.iframeDoc.body.innerHTML)); // 清理冗余 HTML
-                    break;
-                case 'saveRemoteImage2Local':
-                    saveRemoteImage2Local.call(this);
-                    break;
-                default:
-                    this.format(clsName);
-            }
-        },
-        /**
-         * 通过 document.execCommand() 来操纵可编辑内容区域的元素
-         *
-         * @param type 命令的名称
-         * @param para 一些命令（例如 insertImage）需要额外的参数（insertImage 需要提供插入 image 的 url），默认为 null
-         */
-        format(type: string, para?: string): void {
-            if (para)
-                this.iframeDoc.execCommand(type, false, para);
-            else
-                this.iframeDoc.execCommand(type, false);
-            (<Window>this.iframeEl.contentWindow).focus();
-        },
-        /**
-         * 选择字号大小
-         *
-         * @param ev
-         */
-        onFontsizeChoserClk(ev: Event): void {
-            let el: HTMLElement = <HTMLElement>ev.target,
-                els = (<HTMLElement>ev.currentTarget).children;
-            let i, j;
-            for (i = 0, j = els.length; i < j; i++)
-                if (el == els[i])
-                    break;
-            this.format('fontsize', i + "");
-        },
-        onFontColorPicker(ev: Event): void {
-            this.format('foreColor', (<HTMLElement>ev.target).title);
-        },
-        onFontBgColorPicker(ev: Event): void {
-            this.format('backColor', (<HTMLElement>ev.target).title);
-        },
-        /**
-         * 选择字体
-         *
-         * @param ev
-         */
-        onFontfamilyChoserClk(ev: Event): void {
-            let el: HTMLElement = <HTMLElement>ev.target;
-            this.format('fontname', el.innerHTML);
-            /* 如何解决点击之后马上隐藏面板？由于 js（单击事件） 没有控制 CSS 的 :hover 伪类的方法，故所以必须使用以下技巧：*/
-            let menuPanel: HTMLElement = <HTMLElement>el.parentNode;
-            menuPanel.style.display = 'none';
-            setTimeout(() => menuPanel.style.display = '', 300);
-        },
-        /**
-         * 创建颜色选择器
-         */
-        createColorPickerHTML(): string {
-            let cl: string[] = ['00', '33', '66', '99', 'CC', 'FF'],
-                b: string, d: string, e: string, f: string,
-                h: string[] = ['<div class="colorhead"><span class="colortitle">颜色选择</span></div><div class="colorbody"><table cellspaci="0" cellpadding="0"><tr>'];
-            // 创建 body  [6 x 6的色盘]
-            for (let i = 0; i < 6; ++i) {
-                h.push('<td><table class="colorpanel" cellspacing="0" cellpadding="0">');
-                for (let j = 0, a = cl[i]; j < 6; ++j) {
-                    h.push('<tr>');
-                    for (let k = 0, c = cl[j]; k < 6; ++k) {
-                        b = cl[k];
-                        e = (k == 5 && i != 2 && i != 5) ? ';border-right:none;' : '';
-                        f = (j == 5 && i < 3) ? ';border-bottom:none' : '';
-                        d = '#' + a + b + c;
-                        // T = document.all ? '&nbsp;' : '';
-                        h.push('<td unselectable="on" style="background-color: ' + d + e + f + '" title="' + d + '"></td>');
-                    }
-                    h.push('</tr>');
-                }
-                h.push('</table></td>');
-                if (cl[i] == '66')
-                    h.push('</tr><tr>');
-            }
-            h.push('</tr></table></div>');
-            return h.join('');
-        }
-    }
-};
-/**
- * 粘贴图片
- *
- * @param this
- * @param ev
- */
-function onImagePaste(ev: ClipboardEvent): void {
-    if (!this.uploadImageActionUrl) {
-        alert('未提供图片上传地址');
-        return;
-    }
-    let items: DataTransferItemList | null = ev.clipboardData && ev.clipboardData.items,
-        file: File | null = null; // file 就是剪切板中的图片文件
-    if (items && items.length) {// 检索剪切板 items
-        for (let i = 0; i < items.length; i++) {
-            const item: DataTransferItem = items[i];
-            if (item.type.indexOf('image') !== -1) {
-                // @ts-ignore
-                if (window.isCreate) { // 有图片
-                    alert('请保存记录后再上传图片。');
-                    return;
-                }
-                file = item.getAsFile();
-                break;
-            }
-        }
-    }
-    if (file) {
-        // ev.preventDefault();
-        // img.changeBlobImageQuality(file, (newBlob: Blob): void => {
-        //     // 复用上传的方法
-        //     Vue.options.components["aj-xhr-upload"].extendOptions.methods.doUpload.call({
-        //         action: this.uploadImageActionUrl,
-        //         progress: 0,
-        //         uploadOk_callback(j: ImgUploadRepsonseResult) {
-        //             if (j.isOk)
-        //                 this.format("insertImage", this.ajResources.imgPerfix + j.imgUrl);
-        //         },
-        //         $blob: newBlob,
-        //         $fileName: 'foo.jpg' // 文件名不重要，反正上传到云空间会重命名
-        //     });
-        // });
-    }
-}
-/**
-   * 一键存图
-   *
-   * @param this
-   */
-function saveRemoteImage2Local(): void {
-    const arr: NodeListOf<HTMLImageElement> = this.iframeDoc.querySelectorAll('img'),
-        remotePicArr: HTMLImageElement[] = new Array<HTMLImageElement>(),
-        srcs: string[] = [];
-    for (let i = 0, j = arr.length; i < j; i++) {
-        const imgEl: HTMLImageElement = arr[i],
-            src: string = <string>imgEl.getAttribute('src');
-        if (/^http/.test(src)) {
-            remotePicArr.push(imgEl);
-            srcs.push(src);
-        }
-    }
-    if (srcs.length) {
-        // xhr.post('../downAllPics/', (json: any) => {
-        //     const _arr: string[] = json.pics;
-        //     for (let i = 0, j = _arr.length; i < j; i++)
-        //         remotePicArr[i].src = "images/" + _arr[i]; // 改变 DOM 的旧图片地址为新的
-        //     alert('所有图片下载完成。');
-        // }, { pics: srcs.join('|') });
-    } else
-        alert('未发现有远程图片');
-}
-/**
- * 使图标变灰色
- *
- * @param this
- * @param isGray
- */
-function grayImg(isGray: boolean): void {
-    this.toolbarEl.querySelectorAll('i').forEach((item: HTMLElement) => {
-        if (item.className.indexOf('switchMode') != -1)
-            return;
-        item.style.color = isGray ? 'lightgray' : '';
-    });
-}
-/**
-  * Remove additional MS Word content
-  * MSWordHtmlCleaners.js https://gist.github.com/ronanguilloux/2915995
-  *
-  * @param html
-  */
-function cleanPaste(html: string): string {
-    html = html.replace(/<(\/)*(\\?xml:|meta|link|span|font|del|ins|st1:|[ovwxp]:)((.|\s)*?)>/gi, ''); // Unwanted tags
-    html = html.replace(/(class|style|type|start)=("(.*?)"|(\w*))/gi, ''); // Unwanted sttributes
-    html = html.replace(/<style(.*?)style>/gi, '');   // Style tags
-    html = html.replace(/<script(.*?)script>/gi, ''); // Script tags
-    html = html.replace(/<!--(.*?)-->/gi, '');        // HTML comments
-    return html;
-}

package/src/components/form/HtmlEditor/HtmlEditor.vue DELETED Viewed

@@ -1,70 +0,0 @@
-<template>
-  <div class="aj-form-html-editor">
-    <ul class="toolbar" @click="onToolBarClk">
-      <li class="dorpdown">
-        <i title="字体" class="fa-font"></i>
-        <div class="fontfamilyChoser" @click="onFontfamilyChoserClk">
-          <a style="font-family: '宋体'">宋体</a>
-          <a style="font-family: '黑体'">黑体</a>
-          <a style="font-family: '楷体'">楷体</a>
-          <a style="font-family: '隶书'">隶书</a>
-          <a style="font-family: '幼圆'">幼圆</a>
-          <a style="font-family: 'Microsoft YaHei'">Microsoft YaHei</a>
-          <a style="font-family: Arial">Arial</a>
-          <a style="font-family: 'Arial Narrow'">Arial Narrow</a>
-          <a style="font-family: 'Arial Black'">Arial Black</a>
-          <a style="font-family: 'Comic Sans MS'">Comic Sans MS</a>
-          <a style="font-family: Courier">Courier</a>
-          <a style="font-family: System">System</a>
-          <a style="font-family: 'Times New Roman'">Times New Roman</a>
-          <a style="font-family: Verdana">Verdana</a>
-        </div>
-      </li>
-      <li class="dorpdown">
-        <i title="字号" class="fa-header"></i>
-        <div class="fontsizeChoser" @click="onFontsizeChoserClk">
-          <a style="font-size: xx-small; ">极小</a>
-          <a style="font-size: x-small;  ">特小</a>
-          <a style="font-size: small;    ">小</a>
-          <a style="font-size: medium;   ">中</a>
-          <a style="font-size: large;    ">大</a>
-          <a style="font-size: x-large;  ">特大</a>
-          <a style="font-size: xx-large; line-height: 140%">极大</a>
-        </div>
-      </li>
-      <li><i title="加粗" class="bold fa-bold"></i></li>
-      <li><i title="斜体" class="italic fa-italic"></i></li>
-      <li><i title="下划线" class="underline fa-underline"></i></li>
-      <li><i title="左对齐" class="justifyleft fa-align-left"></i></li>
-      <li><i title="中间对齐" class="justifycenter fa-align-center"></i></li>
-      <li><i title="右对齐" class="justifyright fa-align-right"></i></li>
-      <li><i title="数字编号" class="insertorderedlist fa-list-ol"></i></li>
-      <li><i title="项目编号" class="insertunorderedlist fa-list-ul"></i></li>
-      <li><i title="增加缩进" class="outdent fa-outdent"></i></li>
-      <li><i title="减少缩进" class="indent fa-indent"></i></li>
-      <li class="dorpdown">
-        <i title="字体颜色" class="fa-paint-brush"></i>
-        <div class="fontColor colorPicker" v-html="createColorPickerHTML()" @click="onFontColorPicker"></div>
-      </li>
-      <li class="dorpdown">
-        <i title="背景颜色" class="fa-pencil"></i>
-        <div class="bgColor colorPicker" v-html="createColorPickerHTML()" @click="onFontBgColorPicker"></div>
-      </li>
-      <li><i title="增加链接" class="createLink fa-link"></i></li>
-      <li><i title="增加图片" class="insertImage fa-file-image-o"></i></li>
-      <li><i title="一键存图" class="saveRemoteImage2Local fa-hdd-o"></i></li>
-      <li><i title="清理 HTML" class="cleanHTML fa-eraser"></i></li>
-      <li><i title="切换到代码" class="switchMode fa-code"></i></li>
-    </ul>
-    <div class="editorBody">
-      <iframe srcdoc="<html><body></body></html>"></iframe>
-      <slot></slot>
-    </div>
-    <!-- <aj-form-popup-upload ref="uploadLayer" :upload-url="uploadImageActionUrl"></aj-form-popup-upload> -->
-  </div>
-</template>
-<script lang="ts" src="./HtmlEditor.ts"></script>
-<style lang="less" src="./HtmlEditor.less"></style>