@ajaxjs/ui 1.4.2 → 1.4.3
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.
package/dist/ajaxjs-ui.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("vue"),u={},a=(e,r)=>{const o=e.__vccOpts||e;for(const[n,t]of r)o[n]=t;return o};function i(e,r,o,n,t,c){return s.openBlock(),s.createElementBlock("button",null,"hihi")}const l=a(u,[["render",i]]);function p(e,r){const n=(r?parent.location:window.location).search.substring(1).split("&");for(let t=0;t<n.length;t++){const c=n[t].split("=");if(c[0]==e)return c[1]}return null}exports.MyButton=l;exports.getQueryParam=p;
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("vue"),C={},c=(e,t)=>{const l=e.__vccOpts||e;for(const[r,n]of t)l[r]=n;return l};function y(e,t,l,r,n,s){return o.openBlock(),o.createElementBlock("button",null,"hihi")}const p=c(C,[["render",y]]);function g(e,t){const r=(t?parent.location:window.location).search.substring(1).split("&");for(let n=0;n<r.length;n++){const s=r[n].split("=");if(s[0]==e)return s[1]}return null}const k=o.defineComponent({name:"HtmlEditor",props:{modelValue:String,uploadImageActionUrl:String,isIonicons:Boolean},emits:["update:modelValue","onchange"],data(){return{isShowCode:!1,iframeEl:null,sourceEditor:null}},mounted(){this.iframeEl=this.$el.querySelector("iframe"),this.sourceEditor=this.$el.querySelector("textarea"),this.iframeEl.contentWindow.onload=e=>{this.iframeDoc=this.iframeEl.contentWindow.document,this.iframeDoc.designMode="on",this.iframeDoc.addEventListener("paste",E.bind(this)),new MutationObserver((t,l)=>{this.isShowCode||(this.sourceEditor.value=this.iframeDoc.body.innerHTML,this.$emit("onchange",this.sourceEditor.value)),this.$emit("update:modelValue",this.iframeDoc.body.innerHTML)}).observe(this.iframeDoc.body,{attributes:!0,childList:!0,subtree:!0,characterData:!0})},this.sourceEditor.oninput=e=>{this.isShowCode&&this.sourceEditor.value&&(this.setIframeBody(this.sourceEditor.value),this.$emit("onchange",this.sourceEditor.value))}},methods:{setIframeBody(e){this.iframeDoc&&this.iframeDoc.body&&(this.iframeDoc.body.innerHTML=e)},getValue(e,t){let l=this.iframeDoc.body.innerHTML;return e&&(l=h(l)),t&&(l=encodeURIComponent(l)),l},createLink(){const e=prompt("请输入 URL 地址");e&&this.format("createLink",e)},insertImage(){window.isCreate?alert("请保存记录后再上传图片。"):this.uploadImgMgr.show(e=>{e&&e.isOk&&this.format("insertImage",e.fullUrl)})},cleanHTML(){this.setIframeBody(HtmlSanitizer.SanitizeHtml(this.iframeDoc.body.innerHTML))},saveRemoteImage2Local(){const e=this.iframeDoc.querySelectorAll("img"),t=new Array,l=[];for(let r=0,n=e.length;r<n;r++){const s=e[r],i=s.getAttribute("src");i!=null&&/^http/.test(i)&&(t.push(s),l.push(i))}l.length||console.log("未发现有远程图片")},onCmdClk(e){const t=e.target,l=t.className.split(" ").shift();this.format(l)},format(e,t){t?this.iframeDoc.execCommand(e,!1,t):this.iframeDoc.execCommand(e,!1)},onFontsizeChoserClk(e){const t=e.target,l=e.currentTarget.children;let r,n;for(r=0,n=l.length;r<n&&t!=l[r];r++);this.format("fontsize",r+"")},onFontfamilyChoserClk(e){const t=e.target;this.format("fontname",t.innerHTML);const l=t.parentNode;l.style.display="none",setTimeout(()=>l.style.display="",300)},createColorPickerHTML(){const e=["00","33","66","99","CC","FF"];let t,l,r,n;const s=['<div class="colorhead"><span class="colortitle">颜色选择</span></div><div class="colorbody"><table cellspaci="0" cellpadding="0"><tr>'];for(let i=0;i<6;++i){s.push('<td><table class="colorpanel" cellspacing="0" cellpadding="0">');for(let a=0,f=e[i];a<6;++a){s.push("<tr>");for(let d=0,u=e[a];d<6;++d)t=e[d],r=d==5&&i!=2&&i!=5?";border-right:none;":"",n=a==5&&i<3?";border-bottom:none":"",l="#"+f+t+u,s.push('<td unselectable="on" style="background-color: '+l+r+n+'" title="'+l+'"></td>');s.push("</tr>")}s.push("</table></td>"),e[i]=="66"&&s.push("</tr><tr>")}return s.push("</tr></table></div>"),s.join("")}},watch:{modelValue(e,t){t||this.setIframeBody(e)},isShowCode(e){e?(this.iframeEl.classList.add("hide"),this.sourceEditor.classList.add("show"),m.call(this,!0)):(this.iframeEl.classList.remove("hide"),this.sourceEditor.classList.remove("show"),m.call(this,!1))}}});function E(e){if(!this.uploadImageActionUrl){alert("未提供图片上传地址");return}const t=e.clipboardData&&e.clipboardData.items;if(!t||!t.length)return;let l=null;for(let s=0;s<t.length;s++){const i=t[s];if(i.type.indexOf("image")!==-1){l=i.getAsFile();break}}if(!l)return;e.preventDefault();const r=new FormData;r.append("file",l,l.name);const n=new XMLHttpRequest;n.addEventListener("load",s=>{if(n.status>=200&&n.status<300){const i=JSON.parse(n.responseText);console.log("Success:",i),this.format("insertImage",i.data.url)}else console.error("Upload failed with status:",n.status),alert("Upload failed!")}),n.addEventListener("error",function(s){console.error("Network error during upload:",s),alert("Upload failed due to a network error!")}),n.open("POST",this.uploadImageActionUrl),n.send(r)}function m(e){this.$el.querySelectorAll(".toolbar i").forEach(t=>{t.className.indexOf("switchMode")==-1&&(t.style.color=e?"lightgray":"")})}function h(e){return e=e.replace(/<(\/)*(\\?xml:|meta|link|span|font|del|ins|st1:|[ovwxp]:)((.|\s)*?)>/gi,""),e=e.replace(/(class|style|type|start)=("(.*?)"|(\w*))/gi,""),e=e.replace(/<style(.*?)style>/gi,""),e=e.replace(/<script(.*?)script>/gi,""),e=e.replace(/<!--(.*?)-->/gi,""),e}const v={class:"aj-form-html-editor"},N={class:"toolbar"},V={class:"dorpdown"},w={class:"dorpdown"},b={class:"dorpdown"},I=["innerHTML"],L={class:"dorpdown"},A=["innerHTML"];function M(e,t,l,r,n,s){return o.openBlock(),o.createElementBlock("div",v,[o.createElementVNode("ul",N,[o.createElementVNode("li",V,[t[20]||(t[20]=o.createElementVNode("i",{title:"字体",class:"text-icon"},"A",-1)),o.createElementVNode("div",{class:"fontfamilyChoser",onClick:t[0]||(t[0]=(...i)=>e.onFontfamilyChoserClk&&e.onFontfamilyChoserClk(...i))},[...t[19]||(t[19]=[o.createStaticVNode('<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>',14)])])]),o.createElementVNode("li",w,[t[22]||(t[22]=o.createElementVNode("i",{title:"字号",class:"text-icon"},"H",-1)),o.createElementVNode("div",{class:"fontsizeChoser",onClick:t[1]||(t[1]=(...i)=>e.onFontsizeChoserClk&&e.onFontsizeChoserClk(...i))},[...t[21]||(t[21]=[o.createStaticVNode('<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>',7)])])]),o.createElementVNode("li",{onClick:t[2]||(t[2]=(...i)=>e.onCmdClk&&e.onCmdClk(...i))},[...t[23]||(t[23]=[o.createElementVNode("i",{title:"加粗",class:"bold text-icon"},"B",-1)])]),o.createElementVNode("li",{onClick:t[3]||(t[3]=(...i)=>e.onCmdClk&&e.onCmdClk(...i))},[...t[24]||(t[24]=[o.createElementVNode("i",{title:"斜体",class:"italic text-icon",style:{"font-style":"italic"}},"I",-1)])]),o.createElementVNode("li",{onClick:t[4]||(t[4]=(...i)=>e.onCmdClk&&e.onCmdClk(...i))},[...t[25]||(t[25]=[o.createElementVNode("i",{title:"下划线",class:"underline text-icon",style:{"text-decoration":"underline"}},"U",-1)])]),o.createElementVNode("li",{onClick:t[5]||(t[5]=(...i)=>e.onCmdClk&&e.onCmdClk(...i))},[o.createElementVNode("i",{title:"左对齐",class:o.normalizeClass("justifyleft "+(e.isIonicons?"ivu-icon ivu-icon-bingo-menu-fold":"fontAwesome fa-align-left"))},null,2)]),o.createElementVNode("li",{onClick:t[6]||(t[6]=(...i)=>e.onCmdClk&&e.onCmdClk(...i))},[o.createElementVNode("i",{title:"中间对齐",class:o.normalizeClass("justifycenter "+(e.isIonicons?"ivu-icon ivu-icon-md-menu":"fontAwesome fa-align-center"))},null,2)]),o.createElementVNode("li",{onClick:t[7]||(t[7]=(...i)=>e.onCmdClk&&e.onCmdClk(...i))},[o.createElementVNode("i",{title:"右对齐",class:o.normalizeClass("justifyright "+(e.isIonicons?"ivu-icon ivu-icon-bingo-menu-unfold":"fontAwesome fa-align-right"))},null,2)]),o.createElementVNode("li",{onClick:t[8]||(t[8]=(...i)=>e.onCmdClk&&e.onCmdClk(...i))},[o.createElementVNode("i",{title:"数字编号",class:o.normalizeClass("insertorderedlist "+(e.isIonicons?"ivu-icon ivu-icon-md-list":"fontAwesome fa-list-ol"))},null,2)]),o.createElementVNode("li",{onClick:t[9]||(t[9]=(...i)=>e.onCmdClk&&e.onCmdClk(...i))},[o.createElementVNode("i",{title:"项目编号",class:o.normalizeClass("insertunorderedlist "+(e.isIonicons?"ivu-icon ivu-icon-ios-list":"fontAwesome fa-list-ul"))},null,2)]),o.createElementVNode("li",{onClick:t[10]||(t[10]=(...i)=>e.onCmdClk&&e.onCmdClk(...i))},[o.createElementVNode("i",{title:"增加缩进",class:o.normalizeClass("outdent "+(e.isIonicons?"ivu-icon ivu-icon-ios-return-left":"fontAwesome fa-outdent"))},null,2)]),o.createElementVNode("li",{onClick:t[11]||(t[11]=(...i)=>e.onCmdClk&&e.onCmdClk(...i))},[o.createElementVNode("i",{title:"减少缩进",class:o.normalizeClass("indent "+(e.isIonicons?"ivu-icon ivu-icon-ios-return-right":"fontAwesome fa-indent"))},null,2)]),o.createElementVNode("li",b,[o.createElementVNode("i",{title:"字体颜色",class:o.normalizeClass(e.isIonicons?"ivu-icon ivu-icon-md-brush":"fontAwesome fa-paint-brush")},null,2),o.createElementVNode("div",{class:"colorPicker",innerHTML:e.createColorPickerHTML(),onClick:t[12]||(t[12]=i=>e.format("foreColor",i.target.title))},null,8,I)]),o.createElementVNode("li",L,[o.createElementVNode("i",{title:"背景颜色",class:o.normalizeClass(e.isIonicons?"ivu-icon ivu-icon-ios-brush-outline":"fontAwesome fa-pencil")},null,2),o.createElementVNode("div",{class:"colorPicker",innerHTML:e.createColorPickerHTML(),onClick:t[13]||(t[13]=i=>e.format("backColor",i.target.title))},null,8,A)]),o.createElementVNode("li",{onClick:t[14]||(t[14]=(...i)=>e.createLink&&e.createLink(...i))},[o.createElementVNode("i",{title:"增加链接",class:o.normalizeClass(e.isIonicons?"ivu-icon ivu-icon-ios-link":"fontAwesome fa-link")},null,2)]),o.createElementVNode("li",{onClick:t[15]||(t[15]=(...i)=>e.insertImage&&e.insertImage(...i))},[o.createElementVNode("i",{title:"增加图片",class:o.normalizeClass(e.isIonicons?"ivu-icon ivu-icon-md-images":"fontAwesome fa-regular fa-image")},null,2)]),o.createElementVNode("li",{onClick:t[16]||(t[16]=(...i)=>e.saveRemoteImage2Local&&e.saveRemoteImage2Local(...i))},[o.createElementVNode("i",{title:"一键存图",class:o.normalizeClass(e.isIonicons?"ivu-icon ivu-icon-md-photos":"fontAwesome fa-camera")},null,2)]),o.createElementVNode("li",{onClick:t[17]||(t[17]=(...i)=>e.cleanHTML&&e.cleanHTML(...i))},[o.createElementVNode("i",{title:"清理 HTML",class:o.normalizeClass(e.isIonicons?"ivu-icon ivu-icon-md-done-all":"fontAwesome fa-eraser")},null,2)]),o.createElementVNode("li",{onClick:t[18]||(t[18]=i=>e.isShowCode=!e.isShowCode)},[o.createElementVNode("i",{title:"切换到代码",class:o.normalizeClass((e.isIonicons?"ivu-icon ivu-icon-md-code":"fontAwesome fa-code")+" switchMode")},null,2)])]),t[26]||(t[26]=o.createElementVNode("div",{class:"editorBody"},[o.createElementVNode("iframe",{srcdoc:"<html><body></body></html>"}),o.createElementVNode("textarea")],-1))])}const z=c(k,[["render",M]]);exports.HtmlEditor=z;exports.MyButton=p;exports.getQueryParam=g;
|
package/dist/ajaxjs-ui.es.js
CHANGED
|
@@ -1,24 +1,398 @@
|
|
|
1
|
-
import { openBlock as
|
|
2
|
-
const
|
|
3
|
-
const
|
|
4
|
-
for (const [
|
|
5
|
-
|
|
6
|
-
return
|
|
1
|
+
import { openBlock as c, createElementBlock as C, defineComponent as k, createElementVNode as t, createStaticVNode as m, normalizeClass as a } from "vue";
|
|
2
|
+
const h = {}, y = (i, e) => {
|
|
3
|
+
const s = i.__vccOpts || i;
|
|
4
|
+
for (const [r, l] of e)
|
|
5
|
+
s[r] = l;
|
|
6
|
+
return s;
|
|
7
7
|
};
|
|
8
|
-
function
|
|
9
|
-
return
|
|
8
|
+
function v(i, e, s, r, l, n) {
|
|
9
|
+
return c(), C("button", null, "hihi");
|
|
10
10
|
}
|
|
11
|
-
const
|
|
12
|
-
function
|
|
13
|
-
const
|
|
14
|
-
for (let
|
|
15
|
-
const
|
|
16
|
-
if (
|
|
17
|
-
return
|
|
11
|
+
const B = /* @__PURE__ */ y(h, [["render", v]]);
|
|
12
|
+
function N(i, e) {
|
|
13
|
+
const r = (e ? parent.location : window.location).search.substring(1).split("&");
|
|
14
|
+
for (let l = 0; l < r.length; l++) {
|
|
15
|
+
const n = r[l].split("=");
|
|
16
|
+
if (n[0] == i)
|
|
17
|
+
return n[1];
|
|
18
18
|
}
|
|
19
19
|
return null;
|
|
20
20
|
}
|
|
21
|
+
const w = k({
|
|
22
|
+
name: "HtmlEditor",
|
|
23
|
+
props: {
|
|
24
|
+
modelValue: String,
|
|
25
|
+
// 双向绑定
|
|
26
|
+
uploadImageActionUrl: String,
|
|
27
|
+
// 图片上传路径
|
|
28
|
+
isIonicons: Boolean
|
|
29
|
+
// 是否使用 ionicons 图标
|
|
30
|
+
},
|
|
31
|
+
emits: ["update:modelValue", "onchange"],
|
|
32
|
+
data() {
|
|
33
|
+
return {
|
|
34
|
+
isShowCode: !1,
|
|
35
|
+
// 是否显示 HTML 源码
|
|
36
|
+
iframeEl: null,
|
|
37
|
+
sourceEditor: null
|
|
38
|
+
};
|
|
39
|
+
},
|
|
40
|
+
mounted() {
|
|
41
|
+
this.iframeEl = this.$el.querySelector("iframe"), this.sourceEditor = this.$el.querySelector("textarea"), this.iframeEl.contentWindow.onload = (i) => {
|
|
42
|
+
this.iframeDoc = this.iframeEl.contentWindow.document, this.iframeDoc.designMode = "on", this.iframeDoc.addEventListener("paste", b.bind(this)), new MutationObserver((e, s) => {
|
|
43
|
+
this.isShowCode || (this.sourceEditor.value = this.iframeDoc.body.innerHTML, this.$emit("onchange", this.sourceEditor.value)), this.$emit("update:modelValue", this.iframeDoc.body.innerHTML);
|
|
44
|
+
}).observe(this.iframeDoc.body, { attributes: !0, childList: !0, subtree: !0, characterData: !0 });
|
|
45
|
+
}, this.sourceEditor.oninput = (i) => {
|
|
46
|
+
this.isShowCode && this.sourceEditor.value && (this.setIframeBody(this.sourceEditor.value), this.$emit("onchange", this.sourceEditor.value));
|
|
47
|
+
};
|
|
48
|
+
},
|
|
49
|
+
methods: {
|
|
50
|
+
/**
|
|
51
|
+
* 输入 HTML 内容
|
|
52
|
+
*
|
|
53
|
+
* @param html
|
|
54
|
+
*/
|
|
55
|
+
setIframeBody(i) {
|
|
56
|
+
this.iframeDoc && this.iframeDoc.body && (this.iframeDoc.body.innerHTML = i);
|
|
57
|
+
},
|
|
58
|
+
/**
|
|
59
|
+
* 获取内容的 HTML
|
|
60
|
+
*
|
|
61
|
+
* @param cleanWord 是否清理冗余标签
|
|
62
|
+
* @param encode 是否 URL 编码
|
|
63
|
+
*/
|
|
64
|
+
getValue(i, e) {
|
|
65
|
+
let s = this.iframeDoc.body.innerHTML;
|
|
66
|
+
return i && (s = I(s)), e && (s = encodeURIComponent(s)), s;
|
|
67
|
+
},
|
|
68
|
+
createLink() {
|
|
69
|
+
const i = prompt("请输入 URL 地址");
|
|
70
|
+
i && this.format("createLink", i);
|
|
71
|
+
},
|
|
72
|
+
insertImage() {
|
|
73
|
+
window.isCreate ? alert("请保存记录后再上传图片。") : this.uploadImgMgr.show((i) => {
|
|
74
|
+
i && i.isOk && this.format("insertImage", i.fullUrl);
|
|
75
|
+
});
|
|
76
|
+
},
|
|
77
|
+
/**
|
|
78
|
+
* 清理冗余 HTML
|
|
79
|
+
*/
|
|
80
|
+
cleanHTML() {
|
|
81
|
+
this.setIframeBody(HtmlSanitizer.SanitizeHtml(this.iframeDoc.body.innerHTML));
|
|
82
|
+
},
|
|
83
|
+
/**
|
|
84
|
+
* 一键存图
|
|
85
|
+
*/
|
|
86
|
+
saveRemoteImage2Local() {
|
|
87
|
+
const i = this.iframeDoc.querySelectorAll("img"), e = new Array(), s = [];
|
|
88
|
+
for (let r = 0, l = i.length; r < l; r++) {
|
|
89
|
+
const n = i[r], o = n.getAttribute("src");
|
|
90
|
+
o != null && /^http/.test(o) && (e.push(n), s.push(o));
|
|
91
|
+
}
|
|
92
|
+
s.length || console.log("未发现有远程图片");
|
|
93
|
+
},
|
|
94
|
+
/**
|
|
95
|
+
* 当工具条点击的时候触发
|
|
96
|
+
*
|
|
97
|
+
* @param ev
|
|
98
|
+
*/
|
|
99
|
+
onCmdClk(i) {
|
|
100
|
+
const e = i.target, s = e.className.split(" ").shift();
|
|
101
|
+
this.format(s);
|
|
102
|
+
},
|
|
103
|
+
/**
|
|
104
|
+
* 通过 document.execCommand() 来操纵可编辑内容区域的元素
|
|
105
|
+
*
|
|
106
|
+
* @param type 命令的名称
|
|
107
|
+
* @param para 一些命令(例如 insertImage)需要额外的参数(insertImage 需要提供插入 image 的 url),默认为 null
|
|
108
|
+
*/
|
|
109
|
+
format(i, e) {
|
|
110
|
+
e ? this.iframeDoc.execCommand(i, !1, e) : this.iframeDoc.execCommand(i, !1);
|
|
111
|
+
},
|
|
112
|
+
/**
|
|
113
|
+
* 选择字号大小
|
|
114
|
+
*
|
|
115
|
+
* @param ev
|
|
116
|
+
*/
|
|
117
|
+
onFontsizeChoserClk(i) {
|
|
118
|
+
const e = i.target, s = i.currentTarget.children;
|
|
119
|
+
let r, l;
|
|
120
|
+
for (r = 0, l = s.length; r < l && e != s[r]; r++)
|
|
121
|
+
;
|
|
122
|
+
this.format("fontsize", r + "");
|
|
123
|
+
},
|
|
124
|
+
/**
|
|
125
|
+
* 选择字体
|
|
126
|
+
*
|
|
127
|
+
* @param ev
|
|
128
|
+
*/
|
|
129
|
+
onFontfamilyChoserClk(i) {
|
|
130
|
+
const e = i.target;
|
|
131
|
+
this.format("fontname", e.innerHTML);
|
|
132
|
+
const s = e.parentNode;
|
|
133
|
+
s.style.display = "none", setTimeout(() => s.style.display = "", 300);
|
|
134
|
+
},
|
|
135
|
+
/**
|
|
136
|
+
* 创建颜色选择器
|
|
137
|
+
*/
|
|
138
|
+
createColorPickerHTML() {
|
|
139
|
+
const i = ["00", "33", "66", "99", "CC", "FF"];
|
|
140
|
+
let e, s, r, l;
|
|
141
|
+
const n = ['<div class="colorhead"><span class="colortitle">颜色选择</span></div><div class="colorbody"><table cellspaci="0" cellpadding="0"><tr>'];
|
|
142
|
+
for (let o = 0; o < 6; ++o) {
|
|
143
|
+
n.push('<td><table class="colorpanel" cellspacing="0" cellpadding="0">');
|
|
144
|
+
for (let d = 0, p = i[o]; d < 6; ++d) {
|
|
145
|
+
n.push("<tr>");
|
|
146
|
+
for (let f = 0, g = i[d]; f < 6; ++f)
|
|
147
|
+
e = i[f], r = f == 5 && o != 2 && o != 5 ? ";border-right:none;" : "", l = d == 5 && o < 3 ? ";border-bottom:none" : "", s = "#" + p + e + g, n.push('<td unselectable="on" style="background-color: ' + s + r + l + '" title="' + s + '"></td>');
|
|
148
|
+
n.push("</tr>");
|
|
149
|
+
}
|
|
150
|
+
n.push("</table></td>"), i[o] == "66" && n.push("</tr><tr>");
|
|
151
|
+
}
|
|
152
|
+
return n.push("</tr></table></div>"), n.join("");
|
|
153
|
+
}
|
|
154
|
+
},
|
|
155
|
+
watch: {
|
|
156
|
+
// v(newHtml: string, oldHtml: string): void {
|
|
157
|
+
// console.log(newHtml)
|
|
158
|
+
// if (!oldHtml) // 当没有值的时候输入,就是在初始化的时候(第一次)
|
|
159
|
+
// this.setIframeBody(newHtml);
|
|
160
|
+
// },
|
|
161
|
+
modelValue(i, e) {
|
|
162
|
+
e || this.setIframeBody(i);
|
|
163
|
+
},
|
|
164
|
+
/**
|
|
165
|
+
* 切換 HTML 編輯 or 可視化編輯
|
|
166
|
+
*
|
|
167
|
+
* @param n
|
|
168
|
+
*/
|
|
169
|
+
isShowCode(i) {
|
|
170
|
+
i ? (this.iframeEl.classList.add("hide"), this.sourceEditor.classList.add("show"), u.call(this, !0)) : (this.iframeEl.classList.remove("hide"), this.sourceEditor.classList.remove("show"), u.call(this, !1));
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
});
|
|
174
|
+
function b(i) {
|
|
175
|
+
if (!this.uploadImageActionUrl) {
|
|
176
|
+
alert("未提供图片上传地址");
|
|
177
|
+
return;
|
|
178
|
+
}
|
|
179
|
+
const e = i.clipboardData && i.clipboardData.items;
|
|
180
|
+
if (!e || !e.length)
|
|
181
|
+
return;
|
|
182
|
+
let s = null;
|
|
183
|
+
for (let n = 0; n < e.length; n++) {
|
|
184
|
+
const o = e[n];
|
|
185
|
+
if (o.type.indexOf("image") !== -1) {
|
|
186
|
+
s = o.getAsFile();
|
|
187
|
+
break;
|
|
188
|
+
}
|
|
189
|
+
}
|
|
190
|
+
if (!s)
|
|
191
|
+
return;
|
|
192
|
+
i.preventDefault();
|
|
193
|
+
const r = new FormData();
|
|
194
|
+
r.append("file", s, s.name);
|
|
195
|
+
const l = new XMLHttpRequest();
|
|
196
|
+
l.addEventListener("load", (n) => {
|
|
197
|
+
if (l.status >= 200 && l.status < 300) {
|
|
198
|
+
const o = JSON.parse(l.responseText);
|
|
199
|
+
console.log("Success:", o), this.format("insertImage", o.data.url);
|
|
200
|
+
} else
|
|
201
|
+
console.error("Upload failed with status:", l.status), alert("Upload failed!");
|
|
202
|
+
}), l.addEventListener("error", function(n) {
|
|
203
|
+
console.error("Network error during upload:", n), alert("Upload failed due to a network error!");
|
|
204
|
+
}), l.open("POST", this.uploadImageActionUrl), l.send(r);
|
|
205
|
+
}
|
|
206
|
+
function u(i) {
|
|
207
|
+
this.$el.querySelectorAll(".toolbar i").forEach((e) => {
|
|
208
|
+
e.className.indexOf("switchMode") == -1 && (e.style.color = i ? "lightgray" : "");
|
|
209
|
+
});
|
|
210
|
+
}
|
|
211
|
+
function I(i) {
|
|
212
|
+
return i = i.replace(/<(\/)*(\\?xml:|meta|link|span|font|del|ins|st1:|[ovwxp]:)((.|\s)*?)>/gi, ""), i = i.replace(/(class|style|type|start)=("(.*?)"|(\w*))/gi, ""), i = i.replace(/<style(.*?)style>/gi, ""), i = i.replace(/<script(.*?)script>/gi, ""), i = i.replace(/<!--(.*?)-->/gi, ""), i;
|
|
213
|
+
}
|
|
214
|
+
const L = { class: "aj-form-html-editor" }, A = { class: "toolbar" }, M = { class: "dorpdown" }, E = { class: "dorpdown" }, H = { class: "dorpdown" }, S = ["innerHTML"], T = { class: "dorpdown" }, D = ["innerHTML"];
|
|
215
|
+
function $(i, e, s, r, l, n) {
|
|
216
|
+
return c(), C("div", L, [
|
|
217
|
+
t("ul", A, [
|
|
218
|
+
t("li", M, [
|
|
219
|
+
e[20] || (e[20] = t("i", {
|
|
220
|
+
title: "字体",
|
|
221
|
+
class: "text-icon"
|
|
222
|
+
}, "A", -1)),
|
|
223
|
+
t("div", {
|
|
224
|
+
class: "fontfamilyChoser",
|
|
225
|
+
onClick: e[0] || (e[0] = (...o) => i.onFontfamilyChoserClk && i.onFontfamilyChoserClk(...o))
|
|
226
|
+
}, [...e[19] || (e[19] = [
|
|
227
|
+
m('<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>', 14)
|
|
228
|
+
])])
|
|
229
|
+
]),
|
|
230
|
+
t("li", E, [
|
|
231
|
+
e[22] || (e[22] = t("i", {
|
|
232
|
+
title: "字号",
|
|
233
|
+
class: "text-icon"
|
|
234
|
+
}, "H", -1)),
|
|
235
|
+
t("div", {
|
|
236
|
+
class: "fontsizeChoser",
|
|
237
|
+
onClick: e[1] || (e[1] = (...o) => i.onFontsizeChoserClk && i.onFontsizeChoserClk(...o))
|
|
238
|
+
}, [...e[21] || (e[21] = [
|
|
239
|
+
m('<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>', 7)
|
|
240
|
+
])])
|
|
241
|
+
]),
|
|
242
|
+
t("li", {
|
|
243
|
+
onClick: e[2] || (e[2] = (...o) => i.onCmdClk && i.onCmdClk(...o))
|
|
244
|
+
}, [...e[23] || (e[23] = [
|
|
245
|
+
t("i", {
|
|
246
|
+
title: "加粗",
|
|
247
|
+
class: "bold text-icon"
|
|
248
|
+
}, "B", -1)
|
|
249
|
+
])]),
|
|
250
|
+
t("li", {
|
|
251
|
+
onClick: e[3] || (e[3] = (...o) => i.onCmdClk && i.onCmdClk(...o))
|
|
252
|
+
}, [...e[24] || (e[24] = [
|
|
253
|
+
t("i", {
|
|
254
|
+
title: "斜体",
|
|
255
|
+
class: "italic text-icon",
|
|
256
|
+
style: { "font-style": "italic" }
|
|
257
|
+
}, "I", -1)
|
|
258
|
+
])]),
|
|
259
|
+
t("li", {
|
|
260
|
+
onClick: e[4] || (e[4] = (...o) => i.onCmdClk && i.onCmdClk(...o))
|
|
261
|
+
}, [...e[25] || (e[25] = [
|
|
262
|
+
t("i", {
|
|
263
|
+
title: "下划线",
|
|
264
|
+
class: "underline text-icon",
|
|
265
|
+
style: { "text-decoration": "underline" }
|
|
266
|
+
}, "U", -1)
|
|
267
|
+
])]),
|
|
268
|
+
t("li", {
|
|
269
|
+
onClick: e[5] || (e[5] = (...o) => i.onCmdClk && i.onCmdClk(...o))
|
|
270
|
+
}, [
|
|
271
|
+
t("i", {
|
|
272
|
+
title: "左对齐",
|
|
273
|
+
class: a("justifyleft " + (i.isIonicons ? "ivu-icon ivu-icon-bingo-menu-fold" : "fontAwesome fa-align-left"))
|
|
274
|
+
}, null, 2)
|
|
275
|
+
]),
|
|
276
|
+
t("li", {
|
|
277
|
+
onClick: e[6] || (e[6] = (...o) => i.onCmdClk && i.onCmdClk(...o))
|
|
278
|
+
}, [
|
|
279
|
+
t("i", {
|
|
280
|
+
title: "中间对齐",
|
|
281
|
+
class: a("justifycenter " + (i.isIonicons ? "ivu-icon ivu-icon-md-menu" : "fontAwesome fa-align-center"))
|
|
282
|
+
}, null, 2)
|
|
283
|
+
]),
|
|
284
|
+
t("li", {
|
|
285
|
+
onClick: e[7] || (e[7] = (...o) => i.onCmdClk && i.onCmdClk(...o))
|
|
286
|
+
}, [
|
|
287
|
+
t("i", {
|
|
288
|
+
title: "右对齐",
|
|
289
|
+
class: a("justifyright " + (i.isIonicons ? "ivu-icon ivu-icon-bingo-menu-unfold" : "fontAwesome fa-align-right"))
|
|
290
|
+
}, null, 2)
|
|
291
|
+
]),
|
|
292
|
+
t("li", {
|
|
293
|
+
onClick: e[8] || (e[8] = (...o) => i.onCmdClk && i.onCmdClk(...o))
|
|
294
|
+
}, [
|
|
295
|
+
t("i", {
|
|
296
|
+
title: "数字编号",
|
|
297
|
+
class: a("insertorderedlist " + (i.isIonicons ? "ivu-icon ivu-icon-md-list" : "fontAwesome fa-list-ol"))
|
|
298
|
+
}, null, 2)
|
|
299
|
+
]),
|
|
300
|
+
t("li", {
|
|
301
|
+
onClick: e[9] || (e[9] = (...o) => i.onCmdClk && i.onCmdClk(...o))
|
|
302
|
+
}, [
|
|
303
|
+
t("i", {
|
|
304
|
+
title: "项目编号",
|
|
305
|
+
class: a("insertunorderedlist " + (i.isIonicons ? "ivu-icon ivu-icon-ios-list" : "fontAwesome fa-list-ul"))
|
|
306
|
+
}, null, 2)
|
|
307
|
+
]),
|
|
308
|
+
t("li", {
|
|
309
|
+
onClick: e[10] || (e[10] = (...o) => i.onCmdClk && i.onCmdClk(...o))
|
|
310
|
+
}, [
|
|
311
|
+
t("i", {
|
|
312
|
+
title: "增加缩进",
|
|
313
|
+
class: a("outdent " + (i.isIonicons ? "ivu-icon ivu-icon-ios-return-left" : "fontAwesome fa-outdent"))
|
|
314
|
+
}, null, 2)
|
|
315
|
+
]),
|
|
316
|
+
t("li", {
|
|
317
|
+
onClick: e[11] || (e[11] = (...o) => i.onCmdClk && i.onCmdClk(...o))
|
|
318
|
+
}, [
|
|
319
|
+
t("i", {
|
|
320
|
+
title: "减少缩进",
|
|
321
|
+
class: a("indent " + (i.isIonicons ? "ivu-icon ivu-icon-ios-return-right" : "fontAwesome fa-indent"))
|
|
322
|
+
}, null, 2)
|
|
323
|
+
]),
|
|
324
|
+
t("li", H, [
|
|
325
|
+
t("i", {
|
|
326
|
+
title: "字体颜色",
|
|
327
|
+
class: a(i.isIonicons ? "ivu-icon ivu-icon-md-brush" : "fontAwesome fa-paint-brush")
|
|
328
|
+
}, null, 2),
|
|
329
|
+
t("div", {
|
|
330
|
+
class: "colorPicker",
|
|
331
|
+
innerHTML: i.createColorPickerHTML(),
|
|
332
|
+
onClick: e[12] || (e[12] = (o) => i.format("foreColor", o.target.title))
|
|
333
|
+
}, null, 8, S)
|
|
334
|
+
]),
|
|
335
|
+
t("li", T, [
|
|
336
|
+
t("i", {
|
|
337
|
+
title: "背景颜色",
|
|
338
|
+
class: a(i.isIonicons ? "ivu-icon ivu-icon-ios-brush-outline" : "fontAwesome fa-pencil")
|
|
339
|
+
}, null, 2),
|
|
340
|
+
t("div", {
|
|
341
|
+
class: "colorPicker",
|
|
342
|
+
innerHTML: i.createColorPickerHTML(),
|
|
343
|
+
onClick: e[13] || (e[13] = (o) => i.format("backColor", o.target.title))
|
|
344
|
+
}, null, 8, D)
|
|
345
|
+
]),
|
|
346
|
+
t("li", {
|
|
347
|
+
onClick: e[14] || (e[14] = (...o) => i.createLink && i.createLink(...o))
|
|
348
|
+
}, [
|
|
349
|
+
t("i", {
|
|
350
|
+
title: "增加链接",
|
|
351
|
+
class: a(i.isIonicons ? "ivu-icon ivu-icon-ios-link" : "fontAwesome fa-link")
|
|
352
|
+
}, null, 2)
|
|
353
|
+
]),
|
|
354
|
+
t("li", {
|
|
355
|
+
onClick: e[15] || (e[15] = (...o) => i.insertImage && i.insertImage(...o))
|
|
356
|
+
}, [
|
|
357
|
+
t("i", {
|
|
358
|
+
title: "增加图片",
|
|
359
|
+
class: a(i.isIonicons ? "ivu-icon ivu-icon-md-images" : "fontAwesome fa-regular fa-image")
|
|
360
|
+
}, null, 2)
|
|
361
|
+
]),
|
|
362
|
+
t("li", {
|
|
363
|
+
onClick: e[16] || (e[16] = (...o) => i.saveRemoteImage2Local && i.saveRemoteImage2Local(...o))
|
|
364
|
+
}, [
|
|
365
|
+
t("i", {
|
|
366
|
+
title: "一键存图",
|
|
367
|
+
class: a(i.isIonicons ? "ivu-icon ivu-icon-md-photos" : "fontAwesome fa-camera")
|
|
368
|
+
}, null, 2)
|
|
369
|
+
]),
|
|
370
|
+
t("li", {
|
|
371
|
+
onClick: e[17] || (e[17] = (...o) => i.cleanHTML && i.cleanHTML(...o))
|
|
372
|
+
}, [
|
|
373
|
+
t("i", {
|
|
374
|
+
title: "清理 HTML",
|
|
375
|
+
class: a(i.isIonicons ? "ivu-icon ivu-icon-md-done-all" : "fontAwesome fa-eraser")
|
|
376
|
+
}, null, 2)
|
|
377
|
+
]),
|
|
378
|
+
t("li", {
|
|
379
|
+
onClick: e[18] || (e[18] = (o) => i.isShowCode = !i.isShowCode)
|
|
380
|
+
}, [
|
|
381
|
+
t("i", {
|
|
382
|
+
title: "切换到代码",
|
|
383
|
+
class: a((i.isIonicons ? "ivu-icon ivu-icon-md-code" : "fontAwesome fa-code") + " switchMode")
|
|
384
|
+
}, null, 2)
|
|
385
|
+
])
|
|
386
|
+
]),
|
|
387
|
+
e[26] || (e[26] = t("div", { class: "editorBody" }, [
|
|
388
|
+
t("iframe", { srcdoc: "<html><body></body></html>" }),
|
|
389
|
+
t("textarea")
|
|
390
|
+
], -1))
|
|
391
|
+
]);
|
|
392
|
+
}
|
|
393
|
+
const P = /* @__PURE__ */ y(w, [["render", $]]);
|
|
21
394
|
export {
|
|
22
|
-
|
|
23
|
-
|
|
395
|
+
P as HtmlEditor,
|
|
396
|
+
B as MyButton,
|
|
397
|
+
N as getQueryParam
|
|
24
398
|
};
|
package/dist/ajaxjs-ui.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(e,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(e=typeof globalThis<"u"?globalThis:e||self,t(e.ajaxjs_ui={},e.Vue))})(this,(function(e,t){"use strict";const c={},f=(o,i)=>{const u=o.__vccOpts||o;for(const[r,n]of i)u[r]=n;return u};function a(o,i,u,r,n,s){return t.openBlock(),t.createElementBlock("button",null,"hihi")}const l=f(c,[["render",a]]);function p(o,i){const r=(i?parent.location:window.location).search.substring(1).split("&");for(let n=0;n<r.length;n++){const s=r[n].split("=");if(s[0]==o)return s[1]}return null}e.MyButton=l,e.getQueryParam=p,Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})}));
|
|
1
|
+
(function(a,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],o):(a=typeof globalThis<"u"?globalThis:a||self,o(a.ajaxjs_ui={},a.Vue))})(this,(function(a,o){"use strict";const u={},f=(e,t)=>{const l=e.__vccOpts||e;for(const[r,n]of t)l[r]=n;return l};function C(e,t,l,r,n,s){return o.openBlock(),o.createElementBlock("button",null,"hihi")}const y=f(u,[["render",C]]);function p(e,t){const r=(t?parent.location:window.location).search.substring(1).split("&");for(let n=0;n<r.length;n++){const s=r[n].split("=");if(s[0]==e)return s[1]}return null}const g=o.defineComponent({name:"HtmlEditor",props:{modelValue:String,uploadImageActionUrl:String,isIonicons:Boolean},emits:["update:modelValue","onchange"],data(){return{isShowCode:!1,iframeEl:null,sourceEditor:null}},mounted(){this.iframeEl=this.$el.querySelector("iframe"),this.sourceEditor=this.$el.querySelector("textarea"),this.iframeEl.contentWindow.onload=e=>{this.iframeDoc=this.iframeEl.contentWindow.document,this.iframeDoc.designMode="on",this.iframeDoc.addEventListener("paste",k.bind(this)),new MutationObserver((t,l)=>{this.isShowCode||(this.sourceEditor.value=this.iframeDoc.body.innerHTML,this.$emit("onchange",this.sourceEditor.value)),this.$emit("update:modelValue",this.iframeDoc.body.innerHTML)}).observe(this.iframeDoc.body,{attributes:!0,childList:!0,subtree:!0,characterData:!0})},this.sourceEditor.oninput=e=>{this.isShowCode&&this.sourceEditor.value&&(this.setIframeBody(this.sourceEditor.value),this.$emit("onchange",this.sourceEditor.value))}},methods:{setIframeBody(e){this.iframeDoc&&this.iframeDoc.body&&(this.iframeDoc.body.innerHTML=e)},getValue(e,t){let l=this.iframeDoc.body.innerHTML;return e&&(l=E(l)),t&&(l=encodeURIComponent(l)),l},createLink(){const e=prompt("请输入 URL 地址");e&&this.format("createLink",e)},insertImage(){window.isCreate?alert("请保存记录后再上传图片。"):this.uploadImgMgr.show(e=>{e&&e.isOk&&this.format("insertImage",e.fullUrl)})},cleanHTML(){this.setIframeBody(HtmlSanitizer.SanitizeHtml(this.iframeDoc.body.innerHTML))},saveRemoteImage2Local(){const e=this.iframeDoc.querySelectorAll("img"),t=new Array,l=[];for(let r=0,n=e.length;r<n;r++){const s=e[r],i=s.getAttribute("src");i!=null&&/^http/.test(i)&&(t.push(s),l.push(i))}l.length||console.log("未发现有远程图片")},onCmdClk(e){const t=e.target,l=t.className.split(" ").shift();this.format(l)},format(e,t){t?this.iframeDoc.execCommand(e,!1,t):this.iframeDoc.execCommand(e,!1)},onFontsizeChoserClk(e){const t=e.target,l=e.currentTarget.children;let r,n;for(r=0,n=l.length;r<n&&t!=l[r];r++);this.format("fontsize",r+"")},onFontfamilyChoserClk(e){const t=e.target;this.format("fontname",t.innerHTML);const l=t.parentNode;l.style.display="none",setTimeout(()=>l.style.display="",300)},createColorPickerHTML(){const e=["00","33","66","99","CC","FF"];let t,l,r,n;const s=['<div class="colorhead"><span class="colortitle">颜色选择</span></div><div class="colorbody"><table cellspaci="0" cellpadding="0"><tr>'];for(let i=0;i<6;++i){s.push('<td><table class="colorpanel" cellspacing="0" cellpadding="0">');for(let d=0,S=e[i];d<6;++d){s.push("<tr>");for(let m=0,H=e[d];m<6;++m)t=e[m],r=m==5&&i!=2&&i!=5?";border-right:none;":"",n=d==5&&i<3?";border-bottom:none":"",l="#"+S+t+H,s.push('<td unselectable="on" style="background-color: '+l+r+n+'" title="'+l+'"></td>');s.push("</tr>")}s.push("</table></td>"),e[i]=="66"&&s.push("</tr><tr>")}return s.push("</tr></table></div>"),s.join("")}},watch:{modelValue(e,t){t||this.setIframeBody(e)},isShowCode(e){e?(this.iframeEl.classList.add("hide"),this.sourceEditor.classList.add("show"),c.call(this,!0)):(this.iframeEl.classList.remove("hide"),this.sourceEditor.classList.remove("show"),c.call(this,!1))}}});function k(e){if(!this.uploadImageActionUrl){alert("未提供图片上传地址");return}const t=e.clipboardData&&e.clipboardData.items;if(!t||!t.length)return;let l=null;for(let s=0;s<t.length;s++){const i=t[s];if(i.type.indexOf("image")!==-1){l=i.getAsFile();break}}if(!l)return;e.preventDefault();const r=new FormData;r.append("file",l,l.name);const n=new XMLHttpRequest;n.addEventListener("load",s=>{if(n.status>=200&&n.status<300){const i=JSON.parse(n.responseText);console.log("Success:",i),this.format("insertImage",i.data.url)}else console.error("Upload failed with status:",n.status),alert("Upload failed!")}),n.addEventListener("error",function(s){console.error("Network error during upload:",s),alert("Upload failed due to a network error!")}),n.open("POST",this.uploadImageActionUrl),n.send(r)}function c(e){this.$el.querySelectorAll(".toolbar i").forEach(t=>{t.className.indexOf("switchMode")==-1&&(t.style.color=e?"lightgray":"")})}function E(e){return e=e.replace(/<(\/)*(\\?xml:|meta|link|span|font|del|ins|st1:|[ovwxp]:)((.|\s)*?)>/gi,""),e=e.replace(/(class|style|type|start)=("(.*?)"|(\w*))/gi,""),e=e.replace(/<style(.*?)style>/gi,""),e=e.replace(/<script(.*?)script>/gi,""),e=e.replace(/<!--(.*?)-->/gi,""),e}const h={class:"aj-form-html-editor"},N={class:"toolbar"},V={class:"dorpdown"},w={class:"dorpdown"},b={class:"dorpdown"},I=["innerHTML"],L={class:"dorpdown"},A=["innerHTML"];function M(e,t,l,r,n,s){return o.openBlock(),o.createElementBlock("div",h,[o.createElementVNode("ul",N,[o.createElementVNode("li",V,[t[20]||(t[20]=o.createElementVNode("i",{title:"字体",class:"text-icon"},"A",-1)),o.createElementVNode("div",{class:"fontfamilyChoser",onClick:t[0]||(t[0]=(...i)=>e.onFontfamilyChoserClk&&e.onFontfamilyChoserClk(...i))},[...t[19]||(t[19]=[o.createStaticVNode('<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>',14)])])]),o.createElementVNode("li",w,[t[22]||(t[22]=o.createElementVNode("i",{title:"字号",class:"text-icon"},"H",-1)),o.createElementVNode("div",{class:"fontsizeChoser",onClick:t[1]||(t[1]=(...i)=>e.onFontsizeChoserClk&&e.onFontsizeChoserClk(...i))},[...t[21]||(t[21]=[o.createStaticVNode('<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>',7)])])]),o.createElementVNode("li",{onClick:t[2]||(t[2]=(...i)=>e.onCmdClk&&e.onCmdClk(...i))},[...t[23]||(t[23]=[o.createElementVNode("i",{title:"加粗",class:"bold text-icon"},"B",-1)])]),o.createElementVNode("li",{onClick:t[3]||(t[3]=(...i)=>e.onCmdClk&&e.onCmdClk(...i))},[...t[24]||(t[24]=[o.createElementVNode("i",{title:"斜体",class:"italic text-icon",style:{"font-style":"italic"}},"I",-1)])]),o.createElementVNode("li",{onClick:t[4]||(t[4]=(...i)=>e.onCmdClk&&e.onCmdClk(...i))},[...t[25]||(t[25]=[o.createElementVNode("i",{title:"下划线",class:"underline text-icon",style:{"text-decoration":"underline"}},"U",-1)])]),o.createElementVNode("li",{onClick:t[5]||(t[5]=(...i)=>e.onCmdClk&&e.onCmdClk(...i))},[o.createElementVNode("i",{title:"左对齐",class:o.normalizeClass("justifyleft "+(e.isIonicons?"ivu-icon ivu-icon-bingo-menu-fold":"fontAwesome fa-align-left"))},null,2)]),o.createElementVNode("li",{onClick:t[6]||(t[6]=(...i)=>e.onCmdClk&&e.onCmdClk(...i))},[o.createElementVNode("i",{title:"中间对齐",class:o.normalizeClass("justifycenter "+(e.isIonicons?"ivu-icon ivu-icon-md-menu":"fontAwesome fa-align-center"))},null,2)]),o.createElementVNode("li",{onClick:t[7]||(t[7]=(...i)=>e.onCmdClk&&e.onCmdClk(...i))},[o.createElementVNode("i",{title:"右对齐",class:o.normalizeClass("justifyright "+(e.isIonicons?"ivu-icon ivu-icon-bingo-menu-unfold":"fontAwesome fa-align-right"))},null,2)]),o.createElementVNode("li",{onClick:t[8]||(t[8]=(...i)=>e.onCmdClk&&e.onCmdClk(...i))},[o.createElementVNode("i",{title:"数字编号",class:o.normalizeClass("insertorderedlist "+(e.isIonicons?"ivu-icon ivu-icon-md-list":"fontAwesome fa-list-ol"))},null,2)]),o.createElementVNode("li",{onClick:t[9]||(t[9]=(...i)=>e.onCmdClk&&e.onCmdClk(...i))},[o.createElementVNode("i",{title:"项目编号",class:o.normalizeClass("insertunorderedlist "+(e.isIonicons?"ivu-icon ivu-icon-ios-list":"fontAwesome fa-list-ul"))},null,2)]),o.createElementVNode("li",{onClick:t[10]||(t[10]=(...i)=>e.onCmdClk&&e.onCmdClk(...i))},[o.createElementVNode("i",{title:"增加缩进",class:o.normalizeClass("outdent "+(e.isIonicons?"ivu-icon ivu-icon-ios-return-left":"fontAwesome fa-outdent"))},null,2)]),o.createElementVNode("li",{onClick:t[11]||(t[11]=(...i)=>e.onCmdClk&&e.onCmdClk(...i))},[o.createElementVNode("i",{title:"减少缩进",class:o.normalizeClass("indent "+(e.isIonicons?"ivu-icon ivu-icon-ios-return-right":"fontAwesome fa-indent"))},null,2)]),o.createElementVNode("li",b,[o.createElementVNode("i",{title:"字体颜色",class:o.normalizeClass(e.isIonicons?"ivu-icon ivu-icon-md-brush":"fontAwesome fa-paint-brush")},null,2),o.createElementVNode("div",{class:"colorPicker",innerHTML:e.createColorPickerHTML(),onClick:t[12]||(t[12]=i=>e.format("foreColor",i.target.title))},null,8,I)]),o.createElementVNode("li",L,[o.createElementVNode("i",{title:"背景颜色",class:o.normalizeClass(e.isIonicons?"ivu-icon ivu-icon-ios-brush-outline":"fontAwesome fa-pencil")},null,2),o.createElementVNode("div",{class:"colorPicker",innerHTML:e.createColorPickerHTML(),onClick:t[13]||(t[13]=i=>e.format("backColor",i.target.title))},null,8,A)]),o.createElementVNode("li",{onClick:t[14]||(t[14]=(...i)=>e.createLink&&e.createLink(...i))},[o.createElementVNode("i",{title:"增加链接",class:o.normalizeClass(e.isIonicons?"ivu-icon ivu-icon-ios-link":"fontAwesome fa-link")},null,2)]),o.createElementVNode("li",{onClick:t[15]||(t[15]=(...i)=>e.insertImage&&e.insertImage(...i))},[o.createElementVNode("i",{title:"增加图片",class:o.normalizeClass(e.isIonicons?"ivu-icon ivu-icon-md-images":"fontAwesome fa-regular fa-image")},null,2)]),o.createElementVNode("li",{onClick:t[16]||(t[16]=(...i)=>e.saveRemoteImage2Local&&e.saveRemoteImage2Local(...i))},[o.createElementVNode("i",{title:"一键存图",class:o.normalizeClass(e.isIonicons?"ivu-icon ivu-icon-md-photos":"fontAwesome fa-camera")},null,2)]),o.createElementVNode("li",{onClick:t[17]||(t[17]=(...i)=>e.cleanHTML&&e.cleanHTML(...i))},[o.createElementVNode("i",{title:"清理 HTML",class:o.normalizeClass(e.isIonicons?"ivu-icon ivu-icon-md-done-all":"fontAwesome fa-eraser")},null,2)]),o.createElementVNode("li",{onClick:t[18]||(t[18]=i=>e.isShowCode=!e.isShowCode)},[o.createElementVNode("i",{title:"切换到代码",class:o.normalizeClass((e.isIonicons?"ivu-icon ivu-icon-md-code":"fontAwesome fa-code")+" switchMode")},null,2)])]),t[26]||(t[26]=o.createElementVNode("div",{class:"editorBody"},[o.createElementVNode("iframe",{srcdoc:"<html><body></body></html>"}),o.createElementVNode("textarea")],-1))])}const z=f(g,[["render",M]]);a.HtmlEditor=z,a.MyButton=y,a.getQueryParam=p,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})}));
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
|
|
2
|
+
modelValue: StringConstructor;
|
|
3
|
+
uploadImageActionUrl: StringConstructor;
|
|
4
|
+
isIonicons: BooleanConstructor;
|
|
5
|
+
}>, {}, any, {}, {
|
|
6
|
+
/**
|
|
7
|
+
* 输入 HTML 内容
|
|
8
|
+
*
|
|
9
|
+
* @param html
|
|
10
|
+
*/
|
|
11
|
+
setIframeBody(html: string): void;
|
|
12
|
+
/**
|
|
13
|
+
* 获取内容的 HTML
|
|
14
|
+
*
|
|
15
|
+
* @param cleanWord 是否清理冗余标签
|
|
16
|
+
* @param encode 是否 URL 编码
|
|
17
|
+
*/
|
|
18
|
+
getValue(cleanWord: boolean, encode: boolean): string;
|
|
19
|
+
createLink(): void;
|
|
20
|
+
insertImage(): void;
|
|
21
|
+
/**
|
|
22
|
+
* 清理冗余 HTML
|
|
23
|
+
*/
|
|
24
|
+
cleanHTML(): void;
|
|
25
|
+
/**
|
|
26
|
+
* 一键存图
|
|
27
|
+
*/
|
|
28
|
+
saveRemoteImage2Local(): void;
|
|
29
|
+
/**
|
|
30
|
+
* 当工具条点击的时候触发
|
|
31
|
+
*
|
|
32
|
+
* @param ev
|
|
33
|
+
*/
|
|
34
|
+
onCmdClk(ev: Event): void;
|
|
35
|
+
/**
|
|
36
|
+
* 通过 document.execCommand() 来操纵可编辑内容区域的元素
|
|
37
|
+
*
|
|
38
|
+
* @param type 命令的名称
|
|
39
|
+
* @param para 一些命令(例如 insertImage)需要额外的参数(insertImage 需要提供插入 image 的 url),默认为 null
|
|
40
|
+
*/
|
|
41
|
+
format(type: string, para?: string): void;
|
|
42
|
+
/**
|
|
43
|
+
* 选择字号大小
|
|
44
|
+
*
|
|
45
|
+
* @param ev
|
|
46
|
+
*/
|
|
47
|
+
onFontsizeChoserClk(ev: Event): void;
|
|
48
|
+
/**
|
|
49
|
+
* 选择字体
|
|
50
|
+
*
|
|
51
|
+
* @param ev
|
|
52
|
+
*/
|
|
53
|
+
onFontfamilyChoserClk(ev: Event): void;
|
|
54
|
+
/**
|
|
55
|
+
* 创建颜色选择器
|
|
56
|
+
*/
|
|
57
|
+
createColorPickerHTML(): string;
|
|
58
|
+
}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("update:modelValue" | "onchange")[], "update:modelValue" | "onchange", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
|
|
59
|
+
modelValue: StringConstructor;
|
|
60
|
+
uploadImageActionUrl: StringConstructor;
|
|
61
|
+
isIonicons: BooleanConstructor;
|
|
62
|
+
}>> & Readonly<{
|
|
63
|
+
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
|
|
64
|
+
onOnchange?: ((...args: any[]) => any) | undefined;
|
|
65
|
+
}>, {
|
|
66
|
+
isIonicons: boolean;
|
|
67
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
|
|
68
|
+
export default _default;
|
package/dist/ui.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.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}.aj-form-html-editor ul.toolbar>li{list-style:none;float:left;cursor:pointer}.aj-form-html-editor ul.toolbar>li>i{border:1px solid transparent;min-width:25px;height:20px;line-height:20px;text-align:center;display:block}.aj-form-html-editor ul.toolbar>li>i.text-icon{font-family:Times New Roman;font-weight:700;font-style:normal}.aj-form-html-editor ul.toolbar>li>i.fontAwesome{padding-top:2px;font: 18px/1 FontAwesome}.aj-form-html-editor ul.toolbar>li>i:hover{border-right-color:#aaa;border-bottom-color:#aaa;border-top-color:#fff;border-left-color:#fff}.aj-form-html-editor ul.toolbar>li>i:active{border-right-color:#f3f8fc;border-bottom-color:#f3f8fc;border-top-color:#ccc;border-left-color:#ccc}.aj-form-html-editor ul.toolbar>li ul li{padding:3px;cursor:pointer}.aj-form-html-editor ul.toolbar>li ul li:hover{background-color:#d3d3d3}.aj-form-html-editor ul.toolbar>li .cleanHTML{background-size:16px 16px}.aj-form-html-editor ul.toolbar>li .noBg{background-image:none}.aj-form-html-editor .editorBody iframe,.aj-form-html-editor .editorBody textarea{border:1px solid #C5C5C5;border-radius:0 0 4px 4px;border-top-width:0;box-sizing:border-box;background-color:#fff;min-height:300px;width:100%}.aj-form-html-editor .editorBody iframe.hide{display:none}.aj-form-html-editor .editorBody textarea{resize:none;display:none}.aj-form-html-editor .editorBody textarea.show{display:block}.aj-form-html-editor .colorPicker{width:210px;border:1px solid #D3D3D3;position:absolute}.aj-form-html-editor .colorPicker table{border-collapse:collapse}.aj-form-html-editor .colorPicker .colorhead{height:23px;line-height:23px;font-weight:700;width:100%}.aj-form-html-editor .colorPicker .colortitle{margin-left:6px;font-size:12px}.aj-form-html-editor .colorPicker .colorpanel td{border:1px solid #000;height:10px;width:10px;overflow:hidden;font-size:1px;cursor:pointer}.aj-form-html-editor .fontfamilyChoser a,.aj-form-html-editor .fontsizeChoser a{display:block;padding:2px;color:#000;line-height:120%;text-decoration:none}.aj-form-html-editor .fontfamilyChoser a:hover,.aj-form-html-editor .fontsizeChoser a:hover{background:#e5e5e5}.aj-form-html-editor .dorpdown{position:relative}.aj-form-html-editor .dorpdown:hover .fontfamilyChoser,.aj-form-html-editor .dorpdown .fontfamilyChoser:hover,.aj-form-html-editor .dorpdown:hover .fontsizeChoser,.aj-form-html-editor .dorpdown .fontsizeChoser:hover,.aj-form-html-editor .dorpdown:hover .colorPicker,.aj-form-html-editor .dorpdown .colorPicker:hover{display:block}.aj-form-html-editor .dorpdown>div{display:none;position:absolute;top:22px;left:0;background-color:#f5f5f5;border:1px solid lightgray;border-top:0;padding:5px;width:230px}.aj-form-html-editor .dorpdown .fontsizeChoser{top:inherit;right:0}
|
package/package.json
CHANGED
|
File without changes
|