import"./pinia.js";import{M as a}from"./vue.js";const s={};s.methods={source(){return`
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="shortcut icon" href="https://avatars.githubusercontent.com/u/87648636?s=60&v=4" type="image/x-icon">
    <title>Tinymce-Plugin</title>
    <style>
      .open-plugin{
        width:150px;
        height: 30px;
        display: flex;
        padding: 0px 10px;
        background-color:rgb(27, 158, 234);
        border-radius:5px;
        color:white;
        font-size:0;
        text-align:center;
        cursor:pointer;
        align-content: space-around;
        flex-wrap: nowrap;
        align-items: center;
        justify-items: center;
      }
      .open-plugin img{
        display: block;
        width: 20px;
        height: 20px;
      }
      .open-plugin span{
        display: inline-block;
        height:20px;
        line-height:20px;
        vertical-align: middle;
        margin-left:10px;
        font-size:14px;
      }
    </style>
    <script src='/tinymce/tinymce.js'></script>
    <script src="/tinymce/tinymce-plugin.js"></script>
    <script src="https://unpkg.com/tinymce-plugin/langs/zh_CN.js"></script>
    <script src="https://unpkg.com/tinymce-plugin/plugins/tpLayout/plugin.min.js"></script>    
  </head>
  <body tp-page-height="298">
    <div>
      <textarea class="tinymce">
        <p>\u8FD9\u662F\u4E00\u4E2A\u4E00\u952E\u6392\u7248\u63D2\u4EF6</p>
      </textarea>
    </div>
    <div>
      <p></p>
      <a onclick="openPlugin()" class="open-plugin"  title="\u70B9\u51FB\u8C03\u7528\u89E6\u53D1\u63D2\u4EF6" ><img  src="https://avatars.githubusercontent.com/u/87648636?s=60&v=4" alt=""><span>\u70B9\u51FB\u8C03\u7528\u89E6\u53D1\u63D2\u4EF6</span></a>
    </div>
    <script>

     tinymce.init({
        selector: 'textarea.tinymce',
        language: 'zh_CN',
        skeletonScreen: true,
        plugins: 'code tpLayout autoresize',
        toolbar: 'code tpLayout'
        });

     var openPlugin=()=>{
       tinymce.activeEditor.execCommand('mceTpLayout');
     }
    </script>
  </body>
</html>


html
`},sourceCode(){return''}};s.template=` `;const p=a({components:{Demo0:s},template:`

# \u914D\u7F6E\u53C2\u8003

# \u53C2\u6570\u914D\u7F6E

\u53C2\u6570\u540D\u79F0 \u7C7B\u578B \u53C2\u6570\u8BF4\u660E \u53C2\u6570\u9ED8\u8BA4\u503C
style Object \u4E00\u952E\u5E03\u5C40\u9ED8\u8BA4\u6837\u5F0F\u53C2\u6570 {\u2018text-align\u2019:\u2018justify\u2019,\u2018text-indent\u2019:\u20182em\u2019,\u2018line-height\u2019: 1.5 }
filterTags Array \u8FC7\u6EE4\u6807\u7B7E\uFF0C\u8BE5\u6570\u7EC4\u4E2D\u7684\u6807\u7B7E\uFF0C\u4E00\u952E\u5E03\u5C40\u4E2D\u5C06\u4F1A\u88AB\u5FFD\u7565 [\u2018table>*\u2019,\u2018img\u2019]
tagsStyle Object \u5355\u72EC\u6807\u7B7E\u6837\u5F0F\u5904\u7406 \u2014\u2014
clearStyle Array \u6E05\u9664\u6837\u5F0F \uFF0C\u4E00\u952E\u5E03\u5C40\u540E \uFF0C\u6570\u7EC4\u4E2D\u7684\u6837\u5F0F\u5C06\u4F1A\u6E05\u9664\u6389 \u2014\u2014

\u63D0\u793A

\u914D\u7F6E\u4F18\u5148\u7EA7\u4ECE\u4F4E\u5230\u9AD8\uFF1A style < filterTags < tagsStyle < clearStyle

  • 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
tinymce.init({
    selector: '#tinydemo',
    plugins: "layout",
    toolbar: "layout",
    tp_layout_options: {
                style: {
                   'text-align':'justify',
                   'text-indent':'2em',
                   'line-height': 1.5
                },
                filterTags\uFF1A['table>*','tbody'], //'table\uFF0C'tbody','td','tr' \u5C06\u4F1A\u5FFD\u7565\u6389 \u540C\u65F6 table>*\uFF0C\u5FFD\u7565table \u6807\u7B7E \u4EE5\u53CA\u6240\u6709\u5B50\u6807\u7B7E
                clearStyle: ['text-indent'],//text-indent \u5C06\u4F1A\u88AB\u6E05\u9664\u6389
                tagsStyle: {
                   'table': {
                       'line-height': 3,
                       'text-align': 'center'
                   },
                  'table,tbody,tr,td': { //\u652F\u6301\u5E76\u96C6\u9009\u62E9
                    'line-height': 2
                   },
                   'tr>td,table>tbody': { //\u652F\u6301, \u7CBE\u51C6\u5B9A\u4F4D \u901A\u8FC7 ' > '
                    'line-height': 3,
                    'text-align': 'center'
                   }
               }
    }
});

js

# \u5982\u4F55\u901A\u8FC7\u5916\u90E8\u6309\u94AE\u89E6\u53D1

\u53EF\u4EE5\u7528\u901A\u8FC7 execCommand('mceTpLayout') \u8C03\u7528

`});export{p as default};