Skip to content

1
1024程序员开源挑战赛

Five-菜鸟级 / 1024程序员开源挑战赛
该项目与 Fork 源项目分叉

Fork自 GitCode / 1024程序员开源挑战赛（10.23-11.14）

通知 1
Star 1
Fork 0
1
1024程序员开源挑战赛
切换分支/标签
查找文件 普通视图历史永久链接Permalink
index.html 12.1 KB
Newer Older
Five-菜鸟级's avatar
init  
Five-菜鸟级 已提交
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
  <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
  <!-- <script src='./api/api.js'></script> -->
  
  <script src='/tinymce/tinymce.js'></script><!-- 必要 -->
  <script src='/tinymce/tinymce-plugin.js'></script><!-- 必要 -->

  <style>
    body{max-width: 1920px; min-width: 900px;width: 100%; margin: 0 auto;}
    header{}
    .header_logo{ display: inline-block;vertical-align: middle;}
    header > div{ display: block; text-align: center;}
   .demo,#showID{ margin-top:50px;}
   #showID{ padding: 20px;}
   #tinymce-app .tinymce-box {padding-bottom: 0px!important;}
   .tiny_color{ color:#344A85 ;text-shadow: 0 3px 5px #677285; display: inline-block;margin-right: -20px; vertical-align: middle;}
   .plugin_color { color: #43B984;text-shadow: 0 3px 5px #34435C;display: inline-block;margin-left: -23px; vertical-align: middle;}
   .text-center{ text-align: center;}
   .animated #logoSvgId{
    fill-opacity: 0.75
   }
   a{display: inline-block; padding: 20px;font-size: 20px; list-style: none; text-decoration: none;color: #333;}
   #logoSvgId{display: inline-block; vertical-align: middle;}
   .btn{ border-radius: 20px; outline: none; width: 300px;height: 60px; margin: 20px auto; display: block; background: #1488F5; text-align: center;line-height: 60px; font-size: 28px;letter-spacing: 2px; color: #dedede;}
  </style>
</head>

<body tp-page-height="498">
      <div class="demo">
        <div id="tinymce-app">
            <div class="tinymce-demo" style="color: #000;">
                <div class="tinymce-cnt" id="mytextarea">
                  <div id="fvContentID"><ol>
                    <li style="letter-spacing: 2px;"><span style="color: #2dc26b;"><span style="color: #000000;">不知如何使用编辑框可以点击<img src="https://xwjywjb.obs.cn-southwest-2.myhuaweicloud.com/db/UploadFile/2020/11/13/fcd5cc64-aff6-4ded-8f14-6a98b66a2aea.png">（或 Alt+0)，查看帮助-【快捷键】【功能介绍】【操作手册】【疑问解答】【反馈问题】 。</span></span></li>
                    <li style="letter-spacing: 2px;"><span style="color: #3598db;">鼠标悬浮</span>在<em>功能图标</em>上可了解功能名称</li>
                    <li style="letter-spacing: 2px;"><span style="color: #e03e2d;">如过需要修改2020年11月之前的旧新闻，建议先清除格式&nbsp; 或&nbsp; 一键布局<img src="https://xwjywjb.obs.cn-southwest-2.myhuaweicloud.com/db/UploadFile/2020/11/13/e952a0d5-2d30-4d86-ae7d-e8fd5c4e7cc7.png">，将旧新闻样式去掉重新排版</span></li>
                    <li style="letter-spacing: 2px;"><span style="color: #e03e2d;">若文档编辑调整过程中发生意外关闭【如：登录时间过长】，并且未存为草稿 可以点击<img src="https://xwjywjb.obs.cn-southwest-2.myhuaweicloud.com/db/UploadFile/2020/12/25/9b1473d3-e399-43d9-86b1-a0cb5970d7d0.png">，恢复文档编辑状态（1小时以内的最近状态）</span></li>
                    <li style="letter-spacing: 2px;"><span style="color: #e03e2d;"><span id="attachment_mce_1" contenteditable="false"><img style="width: 30px;" src="https://api.hope55.com/Content/js/tinymce/plugins/attachment/icons/file_type_pdf2.svg" width="30px"><a href="https://xwjywjb.obs.cn-southwest-2.myhuaweicloud.com/db/UploadFile/2020/11/9/a7653b78-f186-4237-81fb-213aac317ebe.pdf" target="_blank" rel="noopener">新编辑器新闻上传操作说明(1).pdf (1.04 M)</a></span> </span></li>
                  </ol></div>
                  <style> #fvContentID a{display:inline-block!important} #fvContentID .attachment>img{display:inline-block!important;max-width:30px!important;min-width:30px!important;}#fvContentID .attachment>a{display:contents!important;}</style>
                </div>
            </div>
        </div>
      </div>
  <script>
          function savefun(){
            $("#showID").html(tinymceConfig.getHtml())
          }
                var xhrOnProgress = function (fun) {
                xhrOnProgress.onprogress = fun;
                return function () {
                    var xhr = $.ajaxSettings.xhr();
                    if (typeof xhrOnProgress.onprogress !== 'function')
                        return xhr;
                    if (xhrOnProgress.onprogress && xhr.upload) {
                        xhr.upload.onprogress = xhrOnProgress.onprogress;
                    }
                    return xhr;
                }
            }
            var tinymceConfig= {
                tinyID: "mytextarea",//作用域ID
                placeholder: '', //默认文字
                infoHtml: $(this.tinyID).html(),//初始化内容
                GbaseUrl: '',//全局baseUrl
                OMHtml: '<div style="height: 1500px;"><p><h2>操作手册：</h2></p></div><p>666</p>', //设置操作手册Html
                CPHtml: '',
            }
          tinymce.init({
                 selector: '#'+tinymceConfig.tinyID,
                 language:'zh_CN',
                 menubar:false,
                 branding: false,
                 min_height:400,
                 max_height: 700,
                 plugins: ' print  axupimgs clearhtml  preview insertdatetime  attachment  searchreplace visualblocks autolink  layout fullscreen toc image upfile link media code codesample table charmap hr pagebreak  anchor advlist lists textpattern help emoticons autosave bdmap indent2em   axupimgs   letterspacing imagetools quickbars attachment wordcount autoresize  importword tpCollapse tpTabs tpButtons',
                 toolbar_groups: {
                         formatting: {
                             text: '文字格式',
                             tooltip: 'Formatting',
                             items: 'bold italic underline | superscript subscript',
                         },
                         alignment: {
                             icon: 'align-left',
                             tooltip: 'alignment',
                             items: 'alignleft aligncenter alignright alignjustify',
                         }
                  },
                 toolbar: ['|code formatselect fontselect fontsizeselect forecolor backcolor bold italic underline strikethrough  link alignment indent2em outdent  indent lineheight letterspacing bullist numlist blockquote subscript superscript layout removeformat table image  axupimgs media upfile attachment  emoticons importword charmap  hr pagebreak  clearhtml  tpImportword codesample visualblocks insertdatetime  bdmap  quickbars  toc cut copy undo redo ltr rtl tpCollapse tpTabs tpButtons restoredraft  searchreplace fullscreen  help wordcount preview'],
                 table_style_by_css: true,
                 OperationManualHtml: '',
                 CommonProblemHtml: '',
                 fixed_toolbar_container:'#tinymce-app .toolbar',
                 custom_ui_selector: '#tinymce-app',
                 placeholder:''+tinymceConfig.placeholder,
                 file_picker_types: 'media',
                 powerpaste_word_import: "clean", // 是否保留word粘贴样式  clean | merge 
                 powerpaste_html_import: 'clean', // propmt, merge, clean
                 powerpaste_allow_local_images: true,//
                 powerpaste_keep_unsupported_src:true,
                 paste_data_images: true,
                 toolbar_sticky: false,
                skeletonScreen: true,
                 autosave_ask_before_unload: false,
                 fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
                 font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats;',
                 images_upload_base_path: '',
               
                 images_upload_handler: function (blobInfo, succFun, failFun) {
                    var file = blobInfo.blob();
                    var reader = new FileReader();
                    reader.onload = function(e){
                     succFun(e.target.result)
                    }
                   reader.readAsDataURL(file)
                 },
                 file_picker_callback: function (succFun, value, meta) { //自定义文件上传函数 
                    var filetype = '.pdf, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .mp3, .mp4';
                    var input = document.createElement('input');
                    input.setAttribute('type', 'file');
                    input.setAttribute('accept', filetype);
                    input.click();
                    input.onchange = function () {
                        var file = this.files[0];
                        var data = new FormData();
                         data.append("file", file);
                        $.ajax({
                            data: data,
                            type: 'GET',
                            url: './api/file.json',
                            header:{'Content-Type':'multipart/form-data'},
                            cache: false,
                            contentType: false,
                            processData: false,
                            dataType: 'json',
                            xhr: xhrOnProgress(function (e) {
                                const percent = (e.loaded / e.total * 100 | 0) + '%';//计算百分比
                                // console.log(percent);
                                progressCallback(percent);
                  
                            }),
                        }).then(function (data) {
                            if ( data.code== 200) {
                                succFun(data.data,{ text: data.data });
                            }
                        }).fail(function (error) {
                            failFun('上传失败:' + error.message)
                        });
                    }
                 },
                 file_callback: function (file, succFun) { //文件上传  file:文件对象 succFun(url|string,obj) 成功回调
                    var data = new FormData();
                    data.append("file", file);
                    $.ajax({
                        data: data,
                        type: 'GET',
                        url: '/tinymce/api/file.json',
                        cache: false,
                        contentType: false,
                        processData: false,
                        header:{'Content-Type':'multipart/form-data'},
                        dataType: 'json',
                        xhr: xhrOnProgress(function (e) {
                            const percent = (e.loaded / e.total * 100 | 0) + '%';//计算百分比
                            progressCallback(percent);
                        }),
                    }).then(function (data) {
                        if ( data.code== 200) {
                            succFun(data.data,{text: file.name});
                        } 
                    }).fail(function (error) {
                        // failFun('上传失败:' + error.message)
                    });
                 },
                 tp_attachment_max_size: 5009715200,
                //  attachment_style: '.attachment>img{display:inline-block!important;max-width:30px!important;}',
                 tp_attachment_assets_path: '/tinymce/plugins/attachment/icons',
                
              
                 init_instance_callback: function(editor){
                     $('#tinymce-app').fadeIn(1000);
                  //    editor.execCommand('selectAll');
                  //    editor.selection.getRng().collapse(false);
                  //    editor.focus();
                 }
          }).then(function(res){
                 tinymce.feedBackIframeUrl ='/tinymce/plugins/help/docBox.html'; //反馈链接
             });
  </script>
</body>
</html>