npm - @lingxiteam/lcdp-ueditor-react - Versions diffs - 1.0.0-alpha.1 - Mend

@lingxiteam/lcdp-ueditor-react 1.0.0-alpha.1

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

Files changed (272) hide show

package/ueditor-resource/dialogs/wordimage/wordimage.html ADDED Viewed

@@ -0,0 +1,221 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+    "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+    <title></title>
+    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
+    <script type="text/javascript" src="../internal.js?32939b8e"></script>
+    <style type="text/css">
+        .wrapper {
+            width: 600px;
+            padding: 10px;
+            height: 352px;
+            overflow: hidden;
+            position: relative;
+            border-bottom: 1px solid #d7d7d7
+        }
+        .wrapper .image-info {
+            display: flex;
+            align-items: center;
+        }
+        .wrapper .image-info .input {
+            flex-grow: 1;
+            display: flex;
+        }
+        .wrapper .image-info .input input {
+            display: block;
+            border: 1px solid #CCC;
+            height: 23px;
+            border-radius: 3px;
+            flex-grow: 1;
+            outline: none;
+        }
+        .wrapper .image-info .copy {
+            width: 60px;
+            cursor: pointer;
+            margin: 0 5px;
+        }
+        .wrapper .image-info .copy div {
+            height: 30px;
+            font-size: 12px;
+            line-height: 28px;
+            cursor: pointer;
+            border-radius: 4px;
+            text-align: center;
+            background-color: #F8F8F8;
+            border: 1px solid #EEE;
+        }
+        .wrapper .image-info .action {
+            width: 100px;
+            cursor: pointer;
+        }
+        .wrapper .image-info .action .save-from-local {
+            position: relative;
+            height: 30px;
+            font-size: 12px;
+            line-height: 28px;
+            cursor: pointer;
+            border-radius: 4px;
+            text-align: center;
+            background-color: #F8F8F8;
+            border: 1px solid #EEE;
+        }
+        .wrapper .image-info .action .save-from-local input {
+            position: absolute;
+            left: 0;
+            top: 0;
+            opacity: 0;
+            cursor: pointer;
+        }
+        .wrapper .image-manual {
+            background: #EEE;
+            padding: 10px;
+            border-radius: 5px;
+            margin-top: 10px;
+            line-height: 2;
+        }
+        .wrapper .image-manual .title {
+            font-weight: bold;
+            font-size: 120%;
+        }
+        .wrapper .image-manual .body {
+        }
+    </style>
+</head>
+<body>
+<div class="wrapper">
+    <div class="image-info">
+        <div class="input">
+            <input type="text" id="fileUrl"/>
+        </div>
+        <div class="copy">
+            <div id="copyButton">复制路径</div>
+        </div>
+        <div class="action">
+            <div class="save-from-local">
+                <div>本地选择保存</div>
+                <input type="file" id="saveFile" multiple=true/>
+            </div>
+        </div>
+    </div>
+    <div class="image-tip"></div>
+    <div class="image-manual">
+        <div class="title">
+            Windows使用教程
+        </div>
+        <div class="body">
+            <p>1、点击复制地址按钮</p>
+            <p>2、点击本地选择文件，粘贴剪切板的路径到文件选择路径</p>
+            <p>3、点击确定</p>
+        </div>
+        <div class="title">
+            Mac使用教程
+        </div>
+        <div class="body">
+            <p>1、点击复制地址按钮</p>
+            <p>2、点击本地选择文件，按快捷 Command+Shift+G ，粘贴剪切板的路径到文件选择路径</p>
+            <p>3、点击确定</p>
+        </div>
+    </div>
+</div>
+<script src="../../third-party/jquery-3.5.1.js?89c36344"></script>
+<script src="../../third-party/webuploader/webuploader.js?f37088cc"></script>
+<script type="text/javascript" src="../../third-party/clipboard/clipboard.js?7af7cd91"></script>
+<script type="text/javascript" src="wordimage.js?61427c9d"></script>
+<script type="text/javascript">
+    editor.setOpt({
+        wordImageFieldName: "upfile",
+        compressSide: 0,
+        maxImageSideLength: 900
+    });
+    //全局变量
+    var imageUrls = [],          //用于保存从服务器返回的图片信息数组
+        selectedImageCount = 0,  //当前已选择的但未上传的图片数量
+        optImageUrl = editor.getActionUrl(editor.getOpt('imageActionName')),
+        optImageFieldName = editor.getOpt('imageFieldName'),
+        optImageCompressBorder = editor.getOpt('imageCompressEnable') ? editor.getOpt('imageCompressBorder') : null,
+        maxSize = editor.getOpt('imageMaxSize') / 1024 / 1024,
+        extension = editor.getOpt('imageAllowFiles').join(';').replace(/\./g, '*.');
+    /* 添加额外的GET参数 */
+    var params = utils.serializeParam(editor.queryCommandValue('serverparam')) || '',
+        urlWidthParams = optImageUrl + (optImageUrl.indexOf('?') == -1 ? '?' : '&') + params;
+    var uploader,
+        actionUrl = editor.getActionUrl(editor.getOpt('imageActionName')),
+        acceptExtensions = (editor.getOpt('imageAllowFiles') || []).join('').replace(/\./g, ',').replace(/^[,]/, ''),
+        imageMaxSize = editor.getOpt('imageMaxSize'),
+        imageCompressBorder = editor.getOpt('imageCompressBorder');
+    uploader = WebUploader.create({
+        accept: {
+            title: 'Images',
+            extensions: acceptExtensions,
+            mimeTypes: 'image/*'
+        },
+        swf: '../../third-party/webuploader/Uploader.swf',
+        server: actionUrl,
+        fileVal: editor.getOpt('imageFieldName'),
+        duplicate: true,
+        fileSingleSizeLimit: imageMaxSize,    // 默认 2 M
+        threads: 1,
+        compress: editor.getOpt('imageCompressEnable') ? {
+            width: imageCompressBorder,
+            height: imageCompressBorder,
+            // 图片质量，只有type为`image/jpeg`的时候才有效。
+            quality: 90,
+            // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
+            allowMagnify: false,
+            // 是否允许裁剪。
+            crop: false,
+            // 是否保留头部meta信息。
+            preserveHeaders: true
+        } : false
+    });
+    uploader.on('uploadSuccess', function (file, res) {
+        if ('state' in res) {
+            if (res.state === 'SUCCESS') {
+                if (res.url) {
+                    imageUrls.push({
+                        name: file.name,
+                        url: res.url,
+                        title: '',
+                    });
+                    $('.image-tip').html('<span style="color:#139213;">图片' + imageUrls.length + '(' + file.name + ')' + '转存成功</span>');
+                } else {
+                    $('.image-tip').html('上传失败:' + JSON.stringify(res))
+                }
+                // 触发上传附件事件
+                editor.fireEvent("uploadsuccess", {
+                    res: res,
+                    type: 'image'
+                });
+            } else {
+                $('.image-tip').html('上传失败:' + JSON.stringify(res))
+            }
+        } else {
+            $('.image-tip').html('上传失败:' + JSON.stringify(res))
+        }
+    });
+    uploader.on('uploadFinished', function () {
+        $('.image-tip').html('<span style="color:#139213;">转存成功，请提交确认</span>');
+    });
+    utils.domReady(function () {
+        var options = {};
+        var callbacks = {};
+        wordImage.init(options, callbacks);
+    });
+</script>
+</body>
+</html>

package/ueditor-resource/dialogs/wordimage/wordimage.js ADDED Viewed

@@ -0,0 +1,93 @@
+/**
+ * Created by JetBrains PhpStorm.
+ * User: taoqili
+ * Date: 12-1-30
+ * Time: 下午12:50
+ * To change this template use File | Settings | File Templates.
+ */
+var wordImage = {};
+var g = $G, flashObj, flashContainer;
+wordImage.init = function (opt, callbacks) {
+    showLocalPath("fileUrl");
+    createCopyButton("copyButton", "fileUrl");
+    addUploadButtonListener();
+    addOkListener();
+};
+function addUploadButtonListener() {
+    g('saveFile').addEventListener('change', function () {
+        $('.image-tip').html('正在转存，请稍后...');
+        uploader.addFile(this.files);
+        uploader.upload();
+    });
+}
+function addOkListener() {
+    dialog.onok = function () {
+        //console.log('imageUrls',imageUrls);
+        if (!imageUrls.length) return;
+        var urlPrefix = editor.getOpt('imageUrlPrefix'),
+            images = domUtils.getElementsByTagName(editor.document, "img");
+        editor.fireEvent('saveScene');
+        // console.log('images',images,imageUrls);
+        for (var i = 0, img; img = images[i++];) {
+            var src = img.getAttribute("data-word-image");
+            if (!src) continue;
+            for (var j = 0, url; url = imageUrls[j++];) {
+                // console.log('url',src, url);
+                if (src.indexOf(url.name.replace(" ", "")) != -1) {
+                    img.src = urlPrefix + url.url;
+                    img.setAttribute("_src", urlPrefix + url.url);  //同时修改"_src"属性
+                    img.setAttribute("title", url.title);
+                    domUtils.removeAttributes(img, ["data-word-image", "style", "width", "height"]);
+                    editor.fireEvent("selectionchange");
+                    break;
+                }
+            }
+        }
+        editor.fireEvent('saveScene');
+        // hideFlash();
+    };
+    dialog.oncancel = function () {
+        //hideFlash();
+    };
+}
+function showLocalPath(id) {
+    //单张编辑
+    var img = editor.selection.getRange().getClosedNode();
+    var images = editor.execCommand('wordimage');
+    if (images.length == 1 || img && img.tagName == 'IMG') {
+        g(id).value = images[0];
+        return;
+    }
+    var path = images[0];
+    var leftSlashIndex = path.lastIndexOf("/") || 0,  //不同版本的doc和浏览器都可能影响到这个符号，故直接判断两种
+        rightSlashIndex = path.lastIndexOf("\\") || 0,
+        separater = leftSlashIndex > rightSlashIndex ? "/" : "\\";
+    path = path.substring(0, path.lastIndexOf(separater) + 1);
+    g(id).value = path;
+    //增提醒用户选择哪些文件
+    var names = [];
+    for (var i = 0, len = images.length; i < len; i++) {
+        var img = images[i];
+        names.push(img.substring(img.lastIndexOf(separater) + 1, img.length));
+    }
+    $('.image-tip').html('<span style="color:#ff0000;">请选择:' + names.join("、") + "共" + images.length + '个文件</span>');
+}
+function createCopyButton(id, dataFrom) {
+    var url = g(dataFrom).value;
+    if (url.startsWith("file:////")) {
+        url = url.substring(8);
+    }
+    url = decodeURI(url);
+    g(id).setAttribute("data-clipboard-text", url);
+    var clipboard = new Clipboard('[data-clipboard-text]')
+    clipboard.on('success', function (e) {
+        g('copyButton').innerHTML = '复制成功';
+    });
+}

package/ueditor-resource/index.html ADDED Viewed

@@ -0,0 +1,146 @@
+<!doctype html>
+<html>
+<head>
+    <title>UEditorPlus 完整演示</title>
+    <meta name="viewport" content="width=device-width, minimum-scale=0.5, maximum-scale=5, user-scalable=no">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
+    <script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script>
+    <script type="text/javascript" charset="utf-8" src="ueditor.all.js"></script>
+    <script type="text/javascript" charset="utf-8" src="lang/zh-cn/zh-cn.js?8c5d8442"></script>
+    <script src="./plugins/demo/demo.js"></script>
+    <script>
+        // window.UEDITOR_CONFIG.toolbars[0].push('undo');
+    </script>
+    <script>var _hmt = _hmt || [];
+    (function () {
+        var hm = document.createElement("script");
+        hm.src = "https://hm.baidu.com/hm.js?f84f35a44b5cc5c0b10c3fabdf0f322b";
+        var s = document.getElementsByTagName("script")[0];
+        s.parentNode.insertBefore(hm, s);
+    })();</script>
+    <style>
+        :root {
+            /*--ueditor-top-offset: 20px;*/
+        }
+    </style>
+    <link rel="stylesheet" href="./style.css"/>
+</head>
+<body class="demo-editor-page">
+<div>
+    <h1>完整示例</h1>
+    <div>
+        <script id="editor" type="text/plain" style="height:300px;">
+<h1>
+    你好 UEditorPlus
+</h1>
+<p>
+    UEditorPlus 是基于 UEditor 二次开发的富文本编辑器，让 UEditor <span style="color: #E36C09;">焕<span style="color: #0070C0;">然</span><span style="color: #31859B;"><span style="color: #00B050;">一</span><span style="color: #FF0000;">新</span></span></span>
+</p>
+<table data-sort="sortDisabled">
+    <tbody>
+        <tr class="firstRow">
+            <td valign="top" style="word-break: break-all;" rowspan="1" colspan="3">
+                我是表格
+            </td>
+        </tr>
+        <tr>
+            <td width="273" valign="top" style="word-break: break-all;">
+                如果
+            </td>
+            <td width="273" valign="top" style="word-break: break-all;">
+                有一天
+            </td>
+            <td width="273" valign="top" style="word-break: break-all;">
+                我离开了
+            </td>
+        </tr>
+        <tr>
+            <td valign="top" colspan="1" rowspan="1" style="word-break: break-all;">
+                怎么才能
+            </td>
+            <td valign="top" colspan="1" rowspan="1" style="word-break: break-all;">
+                证明我
+            </td>
+            <td valign="top" colspan="1" rowspan="1" style="word-break: break-all;">
+                曾经来过
+            </td>
+        </tr>
+    </tbody>
+</table>
+<pre class="brush:html;toolbar:false">&lt;div&gt;
+  &lt;span&gt;这里是HTML标签&lt;/span&gt;
+&lt;/div&gt;</pre>
+<h2>
+公式支持
+</h2>
+<p>
+    <img src="https://r.latexeasy.com/image.svg?%5Cint%20%5Cfrac%7B1%7D%7Bx%7D%20dx%20%3D%20%5Cln%20%5Cleft%7C%20x%20%5Cright%7C%20%2B%20C"
+      data-formula-image="%5Cint%20%5Cfrac%7B1%7D%7Bx%7D%20dx%20%3D%20%5Cln%20%5Cleft%7C%20x%20%5Cright%7C%20%2B%20C"/>
+</p>
+<p>
+    <br/>
+</p>
+        </script>
+    </div>
+    <div id="btns" style="margin-top:20px;">
+        <div>
+            <button onclick="alert(UE.getEditor('editor').getAllHtml())">获得整个html的内容</button>
+            <button onclick="alert(UE.getEditor('editor').getContent())">获得内容</button>
+            <button onclick="UE.getEditor('editor').setContent('<p>欢迎使用 UEditorPlus</p>', false)">写入内容</button>
+            <button onclick="UE.getEditor('editor').setContent('<p>欢迎使用 UEditorPlus</p>', true)">追加内容</button>
+            <button onclick="alert(UE.getEditor('editor').getContentTxt())">获得纯文本</button>
+            <button onclick="alert(UE.getEditor('editor').getPlainTxt())">获得带格式的纯文本</button>
+            <button onclick="alert(UE.getEditor('editor').hasContents())">判断是否有内容</button>
+            <button onclick="UE.getEditor('editor').focus()">使编辑器获得焦点</button>
+            <button onmousedown="isFocus()">编辑器是否获得焦点</button>
+            <button onmousedown="setBlur()">编辑器失去焦点</button>
+            <button onclick="getSelectText()">获得当前选中的文本</button>
+            <button onclick="UE.getEditor('editor').execCommand('insertHtml', '插入的内容')">插入内容</button>
+            <button onclick="UE.getEditor('editor').setEnabled()">设定可编辑</button>
+            <button onclick="UE.getEditor('editor').setDisabled('fullscreen')">设定不可编辑</button>
+            <button onclick="UE.getEditor('editor').setHide()">隐藏编辑器</button>
+            <button onclick="UE.getEditor('editor').setShow()">显示编辑器</button>
+            <button onclick="UE.getEditor('editor').setHeight(300)">设置固定高度</button>
+            <button onclick="UE.getEditor('editor')">创建编辑器</button>
+            <button onclick="UE.getEditor('editor').destroy()">销毁编辑器</button>
+            <button onclick="alert( UE.getEditor('editor').execCommand('get_auto_save_content') )">草稿箱-获取</button>
+            <button onclick="UE.getEditor('editor').execCommand('clear_auto_save_content'); alert('已清空草稿箱')">草稿箱-清空
+            </button>
+            <button onclick="UE.getEditor('editor').execCommand('set_auto_save_content'); alert('已保存')">草稿箱-立即保存
+            </button>
+            <button onclick="UE.getEditor('editor').execCommand('auto_save_restore')">草稿箱-恢复到编辑器</button>
+        </div>
+    </div>
+    <script type="text/javascript">
+        var ue = UE.getEditor('editor',{
+            // autoHeightEnabled: false,
+        });
+        ue.on('contentchange', function () {
+            // console.log('contentchange', ue.getContent());
+        });
+        function isFocus(e) {
+            alert(UE.getEditor('editor').isFocus());
+            UE.dom.domUtils.preventDefault(e)
+        }
+        function setBlur(e) {
+            UE.getEditor('editor').blur();
+            UE.dom.domUtils.preventDefault(e)
+        }
+        function getSelectText() {
+            var range = UE.getEditor('editor').selection.getRange();
+            range.select();
+            var txt = UE.getEditor('editor').selection.getText();
+            alert(txt)
+        }
+    </script>
+</div>
+</body>
+</html>