@ajaxjs/util 1.0.9 → 1.1.1

package/dist/widget/HtmlEditor/HtmlEditor.js

@@ -0,0 +1,287 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    props: {
+        vModel: String,
+        uploadImageActionUrl: String,
+        isIonicons: Boolean // 是否使用 ionicons 图标
+    },
+    data() {
+        return {
+            isShowCode: false,
+            iframeEl: null,
+            sourceEditor: null,
+        };
+    },
+    mounted() {
+        this.iframeEl = this.$el.querySelector('iframe');
+        this.sourceEditor = this.$el.querySelector('textarea');
+        this.iframeEl.contentWindow.onload = (ev) => {
+            this.iframeDoc = this.iframeEl.contentWindow.document;
+            this.iframeDoc.designMode = 'on';
+            this.iframeDoc.addEventListener('paste', onImagePaste.bind(this)); // 直接剪切板粘贴上传图片
+            new MutationObserver((mutationsList, observer) => {
+                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.vModel && this.setIframeBody(this.vModel);
+            // this.sourceEditor.value && this.setIframeBody(this.sourceEditor.value);// 有内容
+        };
+        this.sourceEditor.oninput = (ev) => {
+            if (this.isShowCode && this.sourceEditor.value) {
+                this.setIframeBody(this.sourceEditor.value);
+                this.$emit('on-change', this.sourceEditor.value);
+            }
+        };
+        // this.uploadImgMgr = this.$refs.uploadLayer;
+    },
+    methods: {
+        /**
+         * 输入 HTML 内容
+         *
+         * @param html
+         */
+        setIframeBody(html) {
+            if (this.iframeDoc && this.iframeDoc.body)
+                this.iframeDoc.body.innerHTML = html;
+        },
+        /**
+        * 获取内容的 HTML
+        *
+        * @param cleanWord  是否清理冗余标签
+        * @param encode     是否 URL 编码
+        */
+        getValue(cleanWord, encode) {
+            let result = this.iframeDoc.body.innerHTML;
+            if (cleanWord)
+                result = cleanPaste(result);
+            if (encode)
+                result = encodeURIComponent(result);
+            return result;
+        },
+        createLink() {
+            let result = prompt("请输入 URL 地址");
+            if (result)
+                this.format("createLink", result);
+        },
+        insertImage() {
+            // @ts-ignore
+            if (window.isCreate)
+                alert('请保存记录后再上传图片。');
+            else {
+                this.uploadImgMgr.show((json) => {
+                    if (json && json.isOk)
+                        this.format("insertImage", json.fullUrl);
+                });
+            }
+        },
+        /**
+         * 清理冗余 HTML
+         */
+        cleanHTML() {
+            // @ts-ignore
+            this.setIframeBody(HtmlSanitizer.SanitizeHtml(this.iframeDoc.body.innerHTML));
+        },
+        saveRemoteImage2Local() {
+            saveRemoteImage2Local.call(this);
+        },
+        /**
+         * 当工具条点击的时候触发
+         *
+         * @param ev
+         */
+        onCmdClk(ev) {
+            let el = ev.target, clsName = el.className.split(' ').shift();
+            this.format(clsName);
+        },
+        /**
+         * 通过 document.execCommand() 来操纵可编辑内容区域的元素
+         *
+         * @param type 命令的名称
+         * @param para 一些命令（例如 insertImage）需要额外的参数（insertImage 需要提供插入 image 的 url），默认为 null
+         */
+        format(type, para) {
+            if (para)
+                this.iframeDoc.execCommand(type, false, para);
+            else
+                this.iframeDoc.execCommand(type, false);
+            // (<Window>this.iframeEl.contentWindow).focus();
+        },
+        /**
+         * 选择字号大小
+         *
+         * @param ev
+         */
+        onFontsizeChoserClk(ev) {
+            let el = ev.target, els = ev.currentTarget.children;
+            let i, j;
+            for (i = 0, j = els.length; i < j; i++)
+                if (el == els[i])
+                    break;
+            this.format('fontsize', i + "");
+        },
+        /**
+         * 选择字体
+         *
+         * @param ev
+         */
+        onFontfamilyChoserClk(ev) {
+            let el = ev.target;
+            this.format('fontname', el.innerHTML);
+            /* 如何解决点击之后马上隐藏面板？由于 js（单击事件） 没有控制 CSS 的 :hover 伪类的方法，故所以必须使用以下技巧：*/
+            let menuPanel = el.parentNode;
+            menuPanel.style.display = 'none';
+            setTimeout(() => menuPanel.style.display = '', 300);
+        },
+        /**
+         * 创建颜色选择器
+         */
+        createColorPickerHTML() {
+            let cl = ['00', '33', '66', '99', 'CC', 'FF'], b, d, e, f, h = ['<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: {
+        vModel(newHtml, oldHtml) {
+            // if (!html)
+            //     html = '';
+            if (!oldHtml) // 当没有值的时候输入，就是在初始化的时候（第一次）
+                this.setIframeBody(newHtml);
+        },
+        /**
+         * 切換 HTML 編輯 or 可視化編輯
+         *
+         * @param n
+         */
+        isShowCode(n) {
+            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) {
+    if (!this.uploadImageActionUrl) {
+        alert('未提供图片上传地址');
+        return;
+    }
+    let items = ev.clipboardData && ev.clipboardData.items, file = null; // file 就是剪切板中的图片文件
+    if (items && items.length) { // 检索剪切板 items
+        for (let i = 0; i < items.length; i++) {
+            const item = 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() {
+    const arr = this.iframeDoc.querySelectorAll('img'), remotePicArr = new Array(), srcs = [];
+    for (let i = 0, j = arr.length; i < j; i++) {
+        const imgEl = arr[i], src = 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) {
+    this.$el.querySelectorAll('.toolbar i').forEach((item) => {
+        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) {
+    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;
+}
+//# sourceMappingURL=HtmlEditor.js.map

package/dist/widget/HtmlEditor/HtmlEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HtmlEditor.js","sourceRoot":"","sources":["../../../src/widget/HtmlEditor/HtmlEditor.ts"],"names":[],"mappings":"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"}

package/dist/widget/HtmlEditor/HtmlEditor.less

@@ -0,0 +1,345 @@
+.aj-form-html-editor {
+    ul.toolbar {
+        border          : 1px solid #C5C5C5;
+        border-radius   : 4px 4px 0 0;
+        border-bottom   : 0;
+        background-color: #E8E7E4;
+        width           : 100%;
+        min-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;
+
+                &.text-icon{
+                    font-family:Times New Roman;font-weight: bold;font-style: normal;
+                }
+                
+                &.fontAwesome{
+                    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;
+            min-height          : 300px;
+            width           : 100%;
+        }
+
+        iframe.hide{
+            display: none;
+        }
+        textarea {
+            resize: none;
+            display: none;
+            &.show{
+                display: block;
+            }
+        }
+    }
+
+    .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;
+        }
+    }
+}.aj-form-html-editor {
+    ul.toolbar {
+        border          : 1px solid #C5C5C5;
+        border-radius   : 4px 4px 0 0;
+        border-bottom   : 0;
+        background-color: #E8E7E4;
+        width           : 100%;
+        min-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;
+
+                &.text-icon{
+                    font-family:Times New Roman;font-weight: bold;font-style: normal;
+                }
+                
+                &.fontAwesome{
+                    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;
+            min-height          : 300px;
+            width           : 100%;
+        }
+
+        iframe.hide{
+            display: none;
+        }
+        textarea {
+            resize: none;
+            display: none;
+            &.show{
+                display: block;
+            }
+        }
+    }
+
+    .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;
+        }
+    }
+}