@ajaxjs/ui 1.0.7 → 1.1.2

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

@@ -1,329 +0,0 @@
-export default {
-    props: {
-        vModel: String,
-        uploadImageActionUrl: String                 // 图片上传路径
-    },
-    data(): any {
-        return {
-            isShowCode: false,   // 是否显示 HTML 源码
-            iframeEl: null,
-            sourceEditor: null,
-        };
-    },
-    mounted(): void {
-        this.iframeEl = <HTMLIFrameElement>this.$el.querySelector('iframe');
-        this.sourceEditor = <HTMLTextAreaElement>this.$el.querySelector('textarea');
-
-        (<Window>this.iframeEl.contentWindow).onload = (ev: Event) => { // 这个方法只能写在 onload 事件里面， 不写 onload 里还不执行
-            this.iframeDoc = (<Window>this.iframeEl.contentWindow).document;
-            this.iframeDoc.designMode = 'on';
-            this.iframeDoc.addEventListener('paste', onImagePaste.bind(this));// 直接剪切板粘贴上传图片
-
-            new MutationObserver((mutationsList: MutationRecord[], observer: MutationObserver) => {// 监听DOM树变化
-                if (!this.isShowCode) {
-                    this.sourceEditor.value = this.iframeDoc.body.innerHTML;
-                    this.$emit('on-change', this.sourceEditor.value)
-                }
-
-            }).observe(this.iframeDoc.body, { attributes: true, childList: true, subtree: true, characterData: true });
-
-            this.setIframeBody(this.vModel);
-            // this.sourceEditor.value && this.setIframeBody(this.sourceEditor.value);// 有内容
-        }
-
-        this.sourceEditor.oninput = (ev: Event) => {
-            if (this.isShowCode) {
-                this.setIframeBody(this.sourceEditor.value);
-                this.$emit('on-change', 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     是否 URL 编码
-        */
-        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;
-        },
-
-        createLink(): void {
-            let result: string = prompt("请输入 URL 地址");
-            if (result)
-                this.format("createLink", result);
-        },
-
-        insertImage(): void {
-            // @ts-ignore
-            if (window.isCreate)
-                alert('请保存记录后再上传图片。');
-            else {
-                this.uploadImgMgr.show((json: any) => {
-                    if (json && json.isOk)
-                        this.format("insertImage", json.fullUrl);
-                });
-            }
-        },
-
-        /**
-         * 清理冗余 HTML
-         */
-        cleanHTML(): void {
-            // @ts-ignore
-            this.setIframeBody(HtmlSanitizer.SanitizeHtml(this.iframeDoc.body.innerHTML));
-        },
-
-        saveRemoteImage2Local(): void {
-            saveRemoteImage2Local.call(this);
-        },
-
-        /**
-         * 当工具条点击的时候触发
-         * 
-         * @param ev 
-         */
-        onCmdClk(ev: Event): void {
-            let el: HTMLElement = <HTMLElement>ev.target,
-                clsName = <string>el.className.split(' ').shift();
-
-            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: number, j: number;
-            for (i = 0, j = els.length; i < j; i++)
-                if (el == els[i])
-                    break;
-
-            this.format('fontsize', i + "");
-        },
-
-        /**
-         * 选择字体
-         * 
-         * @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('');
-        }
-    },
-    watch: {
-        /**
-         * 切換 HTML 編輯 or 可視化編輯
-         * 
-         * @param n 
-         */
-        isShowCode(n: boolean): void {
-            if (n) {
-                this.iframeEl.classList.add('hide');
-                this.sourceEditor.classList.add('show');
-                grayImg.call(this, true);
-            } else {
-                this.iframeEl.classList.remove('hide');
-                this.sourceEditor.classList.remove('show');
-                grayImg.call(this, false);
-            }
-        },
-    }
-};
-
-/**
- * 粘贴图片
- * 
- * @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.$el.querySelectorAll('.toolbar 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

@@ -1,70 +0,0 @@
-<template>
-  <div class="aj-form-html-editor">
-    <ul class="toolbar">
-      <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 @click="onCmdClk"><i title="加粗" class="bold fa-bold"></i></li>
-      <li @click="onCmdClk"><i title="斜体" class="italic fa-italic"></i></li>
-      <li @click="onCmdClk"><i title="下划线" class="underline fa-underline"></i></li>
-      <li @click="onCmdClk"><i title="左对齐" class="justifyleft fa-align-left"></i></li>
-      <li @click="onCmdClk"><i title="中间对齐" class="justifycenter fa-align-center"></i></li>
-      <li @click="onCmdClk"><i title="右对齐" class="justifyright fa-align-right"></i></li>
-      <li @click="onCmdClk"><i title="数字编号" class="insertorderedlist fa-list-ol"></i></li>
-      <li @click="onCmdClk"><i title="项目编号" class="insertunorderedlist fa-list-ul"></i></li>
-      <li @click="onCmdClk"><i title="增加缩进" class="outdent fa-outdent"></i></li>
-      <li @click="onCmdClk"><i title="减少缩进" class="indent fa-indent"></i></li>
-      <li class="dorpdown">
-        <i title="字体颜色" class="fa-paint-brush"></i>
-        <div class="colorPicker" v-html="createColorPickerHTML()" @click="format('foreColor', $event.target.title)"></div>
-      </li>
-      <li class="dorpdown">
-        <i title="背景颜色" class="fa-pencil"></i>
-        <div class="colorPicker" v-html="createColorPickerHTML()" @click="format('backColor', $event.target.title)"></div>
-      </li>
-      <li @click="createLink"><i title="增加链接" class="fa-link"></i></li>
-      <li @click="insertImage"><i title="增加图片" class="fa-file-image-o"></i></li>
-      <li @click="saveRemoteImage2Local"><i title="一键存图" class="saveRemoteImage2Local fa-hdd-o"></i></li>
-      <li @click="cleanHTML"><i title="清理 HTML" class="fa-eraser"></i></li>
-      <li @click="isShowCode = !isShowCode"><i title="切换到代码" class="switchMode fa-code"></i></li>
-    </ul>
-
-    <div class="editorBody">
-      <iframe srcdoc="<html><body></body></html>"></iframe>
-      <textarea></textarea>
-    </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>

package/src/components/form/HtmlEditor/html-editor-HtmlSanitizer.js

@@ -1,103 +0,0 @@
-// https://github.com/jitbit/HtmlSanitizer/blob/master/HtmlSanitizer.js
-// @ts-ignore
-HtmlSanitizer = new (function foo() {
-    var tagWhitelist_ = {
-        'A': true, 'ABBR': true, 'B': true, 'BLOCKQUOTE': true, 'BODY': true, 'BR': true, 'CENTER': true, 'CODE': true, 'DIV': true, 'EM': true, 'FONT': true,
-        'H1': true, 'H2': true, 'H3': true, 'H4': true, 'H5': true, 'H6': true, 'HR': true, 'I': true, 'IMG': true, 'LABEL': true, 'LI': true, 'OL': true, 'P': true, 'PRE': true,
-        'SMALL': true, 'SOURCE': true, 'SPAN': true, 'STRONG': true, 'TABLE': true, 'TBODY': true, 'TR': true, 'TD': true, 'TH': true, 'THEAD': true, 'UL': true, 'U': true, 'VIDEO': true
-    };
-
-    var contentTagWhiteList_ = { 'FORM': true }; //tags that will be converted to DIVs
-    var attributeWhitelist_ = { 'align': true, 'color': true, 'controls': true, 'height': true, 'href': true, 'src': true, 'style': false, 'target': true, 'title': true, 'type': true, 'width': true };
-    var cssWhitelist_ = { 'color': true, 'background-color': true, 'font-size': true, 'text-align': true, 'text-decoration': true, 'font-weight': true };
-    var schemaWhiteList_ = ['http:', 'https:', 'data:', 'm-files:', 'file:', 'ftp:']; //which "protocols" are allowed in "href", "src" etc
-    var uriAttributes_ = { 'href': true, 'action': true };
-    // @ts-ignore
-    this.SanitizeHtml = function (input) {
-        input = input.trim();
-        if (input == "") return ""; //to save performance and not create iframe
-
-        //firefox "bogus node" workaround
-        if (input == "<br>") return "";
-
-        var iframe = document.createElement('iframe');
-        if (iframe['sandbox'] === undefined) {
-            alert('Your browser does not support sandboxed iframes. Please upgrade to a modern browser.');
-            return '';
-        }
-
-        iframe['sandbox'] = 'allow-same-origin';
-        iframe.style.display = 'none';
-        document.body.appendChild(iframe); // necessary so the iframe contains a document
-
-        var iframedoc = iframe.contentDocument || iframe.contentWindow.document;
-        if (iframedoc.body == null) iframedoc.write("<body></body>"); // null in IE
-        iframedoc.body.innerHTML = input;
-
-        function makeSanitizedCopy(node) {
-            if (node.nodeType == Node.TEXT_NODE) {
-                var newNode = node.cloneNode(true);
-            } else if (node.nodeType == Node.ELEMENT_NODE && (tagWhitelist_[node.tagName] || contentTagWhiteList_[node.tagName])) {
-
-                //remove useless empty spans (lots of those when pasting from MS Outlook)
-                if ((node.tagName == "SPAN" || node.tagName == "B" || node.tagName == "I" || node.tagName == "U")
-                    && node.innerHTML.trim() == "") {
-                    return document.createDocumentFragment();
-                }
-
-                if (contentTagWhiteList_[node.tagName])
-                    newNode = iframedoc.createElement('DIV'); //convert to DIV
-                else
-                    newNode = iframedoc.createElement(node.tagName);
-
-                for (var i = 0; i < node.attributes.length; i++) {
-                    var attr = node.attributes[i];
-                    if (attributeWhitelist_[attr.name]) {
-                        if (attr.name == "style") {
-                            for (s = 0; s < node.style.length; s++) {
-                                var styleName = node.style[s];
-                                if (cssWhitelist_[styleName])
-                                    newNode.style.setProperty(styleName, node.style.getPropertyValue(styleName));
-                            }
-                        }
-                        else {
-                            if (uriAttributes_[attr.name]) { //if this is a "uri" attribute, that can have "javascript:" or something
-                                if (attr.value.indexOf(":") > -1 && !startsWithAny(attr.value, schemaWhiteList_))
-                                    continue;
-                            }
-                            newNode.setAttribute(attr.name, attr.value);
-                        }
-                    }
-                }
-                for (i = 0; i < node.childNodes.length; i++) {
-                    var subCopy = makeSanitizedCopy(node.childNodes[i]);
-                    newNode.appendChild(subCopy, false);
-                }
-            } else {
-                newNode = document.createDocumentFragment();
-            }
-            return newNode;
-        };
-
-        var resultElement = makeSanitizedCopy(iframedoc.body);
-        document.body.removeChild(iframe);
-        return resultElement.innerHTML
-            .replace(/<br[^>]*>(\S)/g, "<br>\n$1")
-            .replace(/div><div/g, "div>\n<div"); //replace is just for cleaner code
-    }
-
-    function startsWithAny(str, substrings) {
-        for (var i = 0; i < substrings.length; i++) {
-            if (str.indexOf(substrings[i]) == 0) {
-                return true;
-            }
-        }
-
-        return false;
-    }
-
-    this.AllowedTags = tagWhitelist_;
-    this.AllowedAttributes = attributeWhitelist_;
-    this.AllowedCssStyles = cssWhitelist_;
-    this.AllowedSchemas = schemaWhiteList_;
-});

package/src/components/form/TreeLikeSelect.vue

@@ -1,125 +0,0 @@
-<template>
-  <select :name="fieldName" class="aj-select" @change="onSelected" style="min-width:180px;"></select>
-</template>
-
-<script lang="ts">
-// interface TreeOption {
-//   /**
-//    * 是否创建全部
-//    */
-//   makeAllOption?: boolean;
-
-//   /**
-//    * 默认为"所有分类", 或者你在这里自定义一个名字
-//    */
-//   allOptionName?: string;
-// }
-
-// /**
-//  * 下拉分类选择器，异步请求远端获取分类数据
-//  */
-// export default {
-//   props: {
-//     fieldName: { type: String, required: false, default: "catalogId" }, // 表单 name，字段名
-//     apiUrl: {
-//       type: String,
-//       default() {
-//         return ctx + "/admin/tree-like/";
-//       },
-//     },
-//     isAutoLoad: { type: Boolean, default: true },
-//     isAutoJump: Boolean,
-//     initFieldValue: String,
-//   },
-
-//   data() {
-//     return {
-//       fieldValue: this.initFieldValue,
-//     };
-//   },
-//   mounted(): void {
-//     this.isAutoLoad && this.getData();
-//   },
-//   methods: {
-//     onSelected(ev: Event): void {
-//       let el: HTMLSelectElement = <HTMLSelectElement>ev.target;
-//       this.fieldValue = el.selectedOptions[0].value;
-
-//       if (this.isAutoJump)
-//         location.assign("?" + this.fieldName + "=" + this.fieldValue);
-//       else
-//         this.BUS && this.BUS.$emit("aj-tree-catelog-select-change", ev, this);
-//     },
-
-//     getData(): void {
-//       let fn = (j: RepsonseResult) => {
-//         let arr = [{ id: 0, name: "请选择分类" }];
-//         rendererOption(
-//           <TreeNode[]>arr.concat(j.result),
-//           <HTMLSelectElement>this.$el,
-//           this.fieldValue,
-//           { makeAllOption: false }
-//         );
-
-//         if (this.fieldValue)
-//           // 有指定的选中值
-//           //@ts-ignore
-//           form.utils.selectOption.call(this, this.fieldValue);
-//       };
-
-//       // aj.xhr.get(this.ajResources.ctx + this.apiUrl + "/admin/tree-like/getListAndSubByParentId/", fn);
-//       xhr.get(this.apiUrl, fn);
-//     },
-//   },
-// };
-
-// /**
-//  * 渲染 Option 标签的 DOM
-//  *
-//  * @param jsonArray
-//  * @param select
-//  * @param selectedId
-//  * @param cfg
-//  */
-// export function rendererOption(
-//   jsonArray: TreeNode[],
-//   select: HTMLSelectElement,
-//   selectedId?: string,
-//   cfg?: TreeOption
-// ): void {
-//   if (cfg && cfg.makeAllOption) {
-//     let option: HTMLOptionElement = document.createElement("option");
-//     option.innerHTML = cfg.allOptionName || "全部分类";
-//     select.appendChild(option);
-//   }
-
-//   let treeNode: TreeNode | null = toTreeMap(jsonArray);
-//   if (treeNode) {
-//     // 生成 option
-//     let temp: DocumentFragment = document.createDocumentFragment();
-//     console.log(treeNode);
-
-//     output(<TreeNode>treeNode, (node: TreeNode, nodeId: string) => {
-//       let option: HTMLOptionElement = document.createElement("option"); // 节点
-//       option.value = nodeId;
-
-//       if (selectedId && selectedId == nodeId)
-//         // 选中的
-//         option.selected = true;
-
-//       option.dataset["pid"] = node.pid + "";
-//       //option.style= "padding-left:" + (node.level - 1) +"rem;";
-//       option.innerHTML =
-//         new Array(node.level * 5).join("&nbsp;") +
-//         (node.level == 1 ? "" : "└─") +
-//         node.name;
-//       temp.appendChild(option);
-//     });
-
-//     select.appendChild(temp);
-//   }
-// }
-</script>
-
-<style lang="less" scoped>
-</style>