123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367 |
-
- Namespace.register("U.MD.UI.editor");
- U.MD.UI.Editor = U.MD.UI.editor = function (parent, callback) {
- U.UF.DL.asynLoadCss({ "rel": "stylesheet", "type": "text/css", "href": "/css/Controls/Complex/Editor.css" });
-
-
-
-
- U.MD.UI.editor.createEditor(parent);
-
- U.UF.E.initEditor($('.editor', parent)[0], callback);
-
- U.MD.UI.editor.EditorEventBind(parent);
-
- U.MD.UI.editor.operateJson.editor = U.selectEl('.editor', parent)[0];
-
- return U.MD.UI.editor.operateJson;
-
- }
- U.MD.UI.editor.operateJson = {
-
- loadContent: function (text) {
- this.editor.focus();
- U.UF.E.onpaste(null, this.editor, text);
-
-
-
-
-
-
-
-
-
- },
-
- getContent: function () {
- return this.editor.innerHTML;
-
- }
- };
- U.MD.UI.editor.createEditor = function (parent) {
- parent.innerHTML =
- "<div class='toolbar' style=\"width: 788px;background-color: #f5f5f5;border: 1px solid #c7d3e1;line-height: 0;padding: 6px;height: 25px;\">\n" +
- " <button class=\"last\" style=\"float: left;margin: 0 3px;position: relative;outline: none;cursor: pointer;border: 1px solid transparent;height: 25px;width: 25px;background: url('/EditorImage/left.png') no-repeat center;\">\n" +
- " </button>\n" +
- " <button class=\"future\" style=\"float: left;margin: 0 3px;position: relative;outline: none;cursor: pointer;border: 1px solid transparent;height: 25px;width: 25px;background: url('/EditorImage/right.png') no-repeat center;\">\n" +
- " </button>\n" +
- " <i style=\"display: inline-block;width: 1px;height: 22px;background-color: #bcbcbc;float: left;margin: 0 3px;position: relative;\">\n" +
- "\n" +
- " </i>\n" +
- "<div class='setFont' style='float: left;margin: 0 3px;position: relative;padding:0px'></div>" +
- " <i style=\"display: inline-block;width: 1px;height: 22px;background-color: #bcbcbc;float: left;margin: 0 3px;position: relative;\">\n" +
- "\n" +
- " </i>\n" +
- "<div class='setSize' style='float: left;margin: 0 3px;position: relative;padding:0px'></div>" +
- " <i style=\"display: inline-block;width: 1px;height: 22px;background-color: #bcbcbc;float: left;margin: 0 3px;position: relative;\">\n" +
- "\n" +
- " </i>\n" +
- " <label style=\"float: left;margin: 0 3px;position: relative;\">\n" +
- " <button class=\"pic\" style=\"outline: none;cursor: pointer;border: 1px solid transparent;height: 25px;width: 25px;background: url('/EditorImage/pic.png') no-repeat center;\">\n" +
- " </button>\n" +
- " <input multiple accept='image/*' type='file' class='picUpload' style='display: none;' onchange='U.UF.E.picture(this,this.parentNode.parentNode.nextSibling)' />\n" +
- " </label>\n" +
- " <label style=\"float: left;margin: 0 3px;position: relative;\">\n" +
- " <button class=\"attachment\" style=\"outline: none;cursor: pointer;border: 1px solid transparent;width: 25px;height: 25px;background: url(/img/YS2017.png) no-repeat;background-position: -1054px -593.5px;\"></button>\n" +
- " <input multiple=\"\" type=\"file\" class=\"attachmentUpload\" style=\"display: none;\" onchange='U.UF.E.attachment(this,this.parentNode.parentNode.nextSibling)' >\n" +
- " </label>\n" +
- " <i style=\"display: inline-block;width: 1px;height: 22px;background-color: #bcbcbc;float: left;margin: 0 3px;position: relative;\">\n" +
- "\n" +
- " </i>\n" +
- " <div style=\"float: left;margin: 0 3px;position: relative;padding:0px\">\n" +
- " <button class=\"fontColor\" style=\"outline: none;cursor: pointer;border: 1px solid transparent;height: 25px;width: 25px;background: url('/EditorImage/fontColor.png') no-repeat center;\">\n" +
- " </button>\n" +
- " <div class='fontColorBar colorBar' style='display:none;position: absolute;'>\n" +
- " </div>\n" +
- " </div>\n" +
- " <i style=\"display: inline-block;width: 1px;height: 22px;background-color: #bcbcbc;float: left;margin: 0 3px;position: relative;\">\n" +
- "\n" +
- " </i>\n" +
- " <div style=\"float: left;margin: 0 3px;position: relative;padding:0px\">\n" +
- " <button class=\"backgroundColor\" style=\"outline: none;cursor: pointer;border: 1px solid transparent;height: 25px;width: 25px;background: url('/EditorImage/blockColor.png') no-repeat center;\">\n" +
- " </button>\n" +
- " <div class='backgroundColorBar colorBar' style='display:none;position: absolute;'>\n" +
- " </div>\n" +
- " </div>\n" +
- " <i style=\"display: inline-block;width: 1px;height: 22px;background-color: #bcbcbc;float: left;margin: 0 3px;position: relative;\">\n" +
- "\n" +
- " </i>\n" +
- " <button class=\"bIcon\" style=\"float: left;margin: 0 3px;position: relative;outline: none;cursor: pointer;border: 1px solid transparent;height: 25px;width: 25px;background: url('/EditorImage/strong.png') no-repeat center;\">\n" +
- " </button>\n" +
- " <button class=\"iIcon\" style=\"float: left;margin: 0 3px;position: relative;outline: none;cursor: pointer;border: 1px solid transparent;height: 25px;width: 25px;background: url('/EditorImage/i.png') no-repeat center;\">\n" +
- " </button>\n" +
- " <button class=\"UIcon\" style=\"float: left;margin: 0 3px;position: relative;outline: none;cursor: pointer;border: 1px solid transparent;height: 25px;width: 25px;background: url('/EditorImage/x.png') no-repeat center;\">\n" +
- " </button>\n" +
- " <button class=\"SIcon\" style=\"float: left;margin: 0 3px;position: relative;outline: none;cursor: pointer;border: 1px solid transparent;height: 25px;width: 25px;background: url('/EditorImage/-S-.png') no-repeat center;\">\n" +
- " </button>\n" +
- " <i style=\"display: inline-block;width: 1px;height: 22px;background-color: #bcbcbc;float: left;margin: 0 3px;position: relative;\">\n" +
- "\n" +
- " </i>\n" +
- " <button class=\"textLeft\" style=\"float: left;margin: 0 3px;position: relative;outline: none;cursor: pointer;border: 1px solid transparent;height: 25px;width: 25px;background: url('/EditorImage/textLeft.png') no-repeat center;\">\n" +
- " </button>\n" +
- " <button class=\"textCenter\" style=\"float: left;margin: 0 3px;position: relative;outline: none;cursor: pointer;border: 1px solid transparent;height: 25px;width: 25px;background: url('/EditorImage/textCenter.png') no-repeat center;\">\n" +
- " </button>\n" +
- " <button class=\"textRight\" style=\"float: left;margin: 0 3px;position: relative;outline: none;cursor: pointer;border: 1px solid transparent;height: 25px;width: 25px;background: url('/EditorImage/textRight.png') no-repeat center;\">\n" +
- " </button>\n" +
- " <i style=\"display: inline-block;width: 1px;height: 22px;background-color: #bcbcbc;float: left;margin: 0 3px;position: relative;\" >\n" +
- "\n" +
- " </i>\n" +
- " <button class=\"a\" style=\"float: left;margin: 0 3px;position: relative;outline: none;cursor: pointer;border: 1px solid transparent;height: 25px;width: 25px;background: url('/EditorImage/a.png') no-repeat center;\">\n" +
- " </button>\n" +
- " <button class=\"b\" style=\"float: left;margin: 0 3px;position: relative;outline: none;cursor: pointer;border: 1px solid transparent;height: 25px;width: 25px;background: url('/EditorImage/b.png') no-repeat center;\">\n" +
- " </button>\n" +
- " <button class=\"c\" style=\"float: left;margin: 0 3px;position: relative;outline: none;cursor: pointer;border: 1px solid transparent;height: 25px;width: 25px;background: url('/EditorImage/c.png') no-repeat center;\">\n" +
- " </button>\n" +
- " </div>\n" +
- " <div class=\"editor\" contenteditable=\"true\" style=\"width: 800px;min-height: 300px;border: 1px solid #E6E5E5;overflow: auto;\">\n" +
- " </div>";
-
-
-
-
-
-
-
- };
- U.MD.UI.editor.EditorEventBind = function (parent) {
-
-
-
- var _font = U.MD.UI.Font();
-
- _font.style.cssText += "vertical-align: super;";
- var _size = U.MD.UI.WordSize();
-
- _size.style.cssText += "vertical-align: super;";
- U.selectEl('.setFont', parent).append(_font);
- _font.onchange = function () {
- U.UF.E.setRangeStyle({ 'font-family': _font.value });
- };
-
- U.selectEl('.setSize', parent).append(_size);
- _size.onchange = function () {
- U.UF.E.setRangeStyle({ 'font-size': _size.value });
- };
-
- U.selectEl('.pic', parent)[0].onclick = function () {
- U.selectEl('.picUpload', parent)[0].click();
- };
-
- U.selectEl('.attachment', parent)[0].onclick = function () {
- U.selectEl('.attachmentUpload', parent)[0].click();
- };
-
- U.selectEl('.bIcon', parent)[0].onclick = function () {
- U.UF.E.setRangeStyle({ 'font-weight': 'bold' });
- };
-
- U.selectEl('.iIcon', parent)[0].onclick = function () {
- U.UF.E.setRangeStyle({ 'font-style': 'italic' });
- };
-
- U.selectEl('.UIcon', parent)[0].onclick = function () {
- U.UF.E.setRangeStyle({ 'text-decoration': 'underline' });
- };
-
- U.selectEl('.SIcon', parent)[0].onclick = function () {
- U.UF.E.setRangeStyle({ 'text-decoration': 'line-through' });
- };
-
- U.selectEl('.fontColor', parent).bind('click', function () {
-
- if ($('.fontColorBar', parent).css('display') == "none") {
- U.MD.UI.colorPicker($('.fontColorBar', parent)[0], function (r) {
- U.selectEl('.MD_ColorPicker', U.selectEl('.fontColorBar', parent)[0]).remove();
- U.selectEl('.fontColorBar', parent).hide();
- U.UF.E.setRangeStyle({ 'color': r });
- });
- U.selectEl('.fontColorBar', parent).show();
- }
- });
- U.selectEl('.backgroundColor', parent).bind('click', function () {
-
- if ($('.backgroundColorBar', parent).css('display') == "none") {
- U.MD.UI.colorPicker($('.backgroundColorBar', parent)[0], function (r) {
- U.selectEl('.MD_ColorPicker', U.selectEl('.backgroundColorBar', parent)[0]).remove();
- U.selectEl('.backgroundColorBar', parent).hide();
- U.UF.E.setRangeStyle({ 'backgroundColor': r });
- });
- U.selectEl('.backgroundColorBar', parent).show();
- }
- });
-
-
-
-
-
-
-
-
-
-
-
- U.selectEl('.a', parent).bind('click', function () {
- U.UF.E.addHref();
- });
-
- U.selectEl('.c', parent).bind('click', function () {
- U.UF.E.clearStyle(U.UF.E.getRangeAt());
- });
-
- U.selectEl('.textLeft', parent).bind('click', function () {
- U.UF.E.setLineStyle({ 'text-align': 'left' });
- });
-
- U.selectEl('.textCenter', parent).bind('click', function () {
- U.UF.E.setLineStyle({ 'text-align': 'center' });
- });
-
- U.selectEl('.textRight', parent).bind('click', function () {
- U.UF.E.setLineStyle({ 'text-align': 'right' });
- });
-
- };
- U.MD.UI.editor.Select = function (choosecon, selattr, optionevent, parentnode) {
- var _id = "";
- selattr.id && (_id = selattr.id) && (delete selattr.id);
- var _selectEl = $$('div', { id: _id }, parentnode || null),
- _value = $$('div', selattr, _selectEl),
- _textarea = $$('div', {}, _value);
- $$('div', { style: { cssText: 'border-width: 6px 4px; border-style: solid; border-color: rgb(166, 178, 192) transparent transparent; width: 0; position: absolute; right: 4px; top: 50%; margin-top: -3px'} }, _value);
-
- var _con = $$('div', {
- datacontent: '',
- style: { cssText: 'display: none;position: absolute; margin-top:-1px; min-width: 100%; max-width: 280px; max-height: 200px ;border: 1px solid silver; overflow-x: hidden; cursor: pointer;' }
- }, _selectEl),
- _range;
-
-
-
-
-
- (selattr.style && !selattr.style.position) ? _selectEl.style.position = 'relative' : '';
- (selattr.style && !selattr.style.textIndent) ? _textarea.style.textIndent = '6px' : '';
-
- _textarea.style.whiteSpace = 'pre';
- _textarea.style.overflow = 'hidden'
- _textarea.style.width = _selectEl.offsetWidth - 15 + "px";
- for (var i in choosecon) {
- $$('div', {
- value: i, innerText: choosecon[i],
- style: { cssText: 'padding: 4px 6px; background: #fff' },
- onmouseover: function () {
- this.style.background = '#ccc'
- },
- onmouseout: function () {
- this.style.background = '#fff'
- }, onclick: function () {
- _textarea.innerText = this.innerText;
- U.UF.E.reSelectRange(_range)
- optionevent(this.value || this.innerText);
- }
- }, _con);
- }
- for (var i in choosecon) {
- _textarea.innerText = choosecon[i];
- break;
- }
- _textarea.style.lineHeight = parseInt(_textarea.style.height) + 'px';
- _selectEl.onclick = function () {
- var _el = this.querySelector('div[datacontent]');
- U.UF.E.reSelectRange(_range)
- _el.style.display === 'block' ? _el.style.display = 'none' : _el.style.display = 'block';
- };
- U.selectEl(document).bind('click', function () {
- if (_con.style.display != 'none')
- _con.style.display = 'none'
- if ($(".BD_BorderPicker")[0]) {
- if ($(".BD_BorderPicker")[0].style.display != 'none')
- U.selectEl(".BD_BorderPicker")[0].style.display = 'none'
- }
- }, false);
- U.selectEl(_selectEl).bind('click', function (e) {
- U.UF.EV.stopBubble(e);
-
- });
- _selectEl.onmousedown = function () {
- _range = U.UF.E.getRangeAt()
- }
- return _selectEl;
- };
|