Fork自 GitCode / 1024程序员开源挑战赛（10.23-11.14）
System.register(["./pinia-legacy.js","./vue-legacy.js"],(function(s){"use strict";var a;return{setters:[function(){},function(s){a=s.M}],execute:function(){var n={methods:{source:function(){return'<pre class="hljs fv-hljs "><ul class="highlight-line-number " ><li ><span>1</span></li><li ><span>2</span></li><li ><span>3</span></li><li ><span>4</span></li><li ><span>5</span></li><li ><span>6</span></li><li ><span>7</span></li><li ><span>8</span></li><li ><span>9</span></li><li ><span>10</span></li><li ><span>11</span></li><li ><span>12</span></li><li ><span>13</span></li><li ><span>14</span></li><li ><span>15</span></li><li ><span>16</span></li><li ><span>17</span></li><li ><span>18</span></li><li ><span>19</span></li><li ><span>20</span></li><li ><span>21</span></li><li ><span>22</span></li><li ><span>23</span></li><li ><span>24</span></li><li ><span>25</span></li><li ><span>26</span></li><li ><span>27</span></li><li ><span>28</span></li><li ><span>29</span></li><li ><span>30</span></li><li ><span>31</span></li><li ><span>32</span></li><li ><span>33</span></li><li ><span>34</span></li><li ><span>35</span></li><li ><span>36</span></li><li ><span>37</span></li><li ><span>38</span></li><li ><span>39</span></li><li ><span>40</span></li><li ><span>41</span></li><li ><span>42</span></li><li ><span>43</span></li><li ><span>44</span></li><li ><span>45</span></li><li ><span>46</span></li><li ><span>47</span></li><li ><span>48</span></li><li ><span>49</span></li><li ><span>50</span></li><li ><span>51</span></li><li ><span>52</span></li><li ><span>53</span></li><li ><span>54</span></li><li ><span>55</span></li><li ><span>56</span></li><li ><span>57</span></li><li ><span>58</span></li><li ><span>59</span></li><li ><span>60</span></li><li ><span>61</span></li><li ><span>62</span></li><li ><span>63</span></li><li ><span>64</span></li><li ><span>65</span></li><li ><span>66</span></li><li ><span>67</span></li><li ><span>68</span></li><li ><span>69</span></li><li ><span>70</span></li><li ><span>71</span></li></ul><code class=" hljs hljs-html" @click.stop="()=>{}"><span class="hljs-meta"><!DOCTYPE <span class="hljs-keyword">html</span>></span>\n<span class="hljs-tag"><<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">head</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span> /></span>\n <span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"icon"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"/favicon.ico"</span> /></span>\n <span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"viewport"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"width=device-width, initial-scale=1.0"</span> /></span>\n <span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"shortcut icon"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://avatars.githubusercontent.com/u/87648636?s=60&v=4"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"image/x-icon"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">title</span>></span>Tinymce-Plugin<span class="hljs-tag"></<span class="hljs-name">title</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">style</span>></span><span class="language-css">\n <span class="hljs-selector-class">.open-plugin</span>{\n <span class="hljs-attribute">width</span>:<span class="hljs-number">150px</span>;\n <span class="hljs-attribute">height</span>: <span class="hljs-number">30px</span>;\n <span class="hljs-attribute">display</span>: flex;\n <span class="hljs-attribute">padding</span>: <span class="hljs-number">0px</span> <span class="hljs-number">10px</span>;\n <span class="hljs-attribute">background-color</span>:<span class="hljs-built_in">rgb</span>(<span class="hljs-number">27</span>, <span class="hljs-number">158</span>, <span class="hljs-number">234</span>);\n <span class="hljs-attribute">border-radius</span>:<span class="hljs-number">5px</span>;\n <span class="hljs-attribute">color</span>:white;\n <span class="hljs-attribute">font-size</span>:<span class="hljs-number">0</span>;\n <span class="hljs-attribute">text-align</span>:center;\n <span class="hljs-attribute">cursor</span>:pointer;\n <span class="hljs-attribute">align-content</span>: space-around;\n <span class="hljs-attribute">flex-wrap</span>: nowrap;\n <span class="hljs-attribute">align-items</span>: center;\n justify-items: center;\n }\n <span class="hljs-selector-class">.open-plugin</span> <span class="hljs-selector-tag">img</span>{\n <span class="hljs-attribute">display</span>: block;\n <span class="hljs-attribute">width</span>: <span class="hljs-number">20px</span>;\n <span class="hljs-attribute">height</span>: <span class="hljs-number">20px</span>;\n }\n <span class="hljs-selector-class">.open-plugin</span> <span class="hljs-selector-tag">span</span>{\n <span class="hljs-attribute">display</span>: inline-block;\n <span class="hljs-attribute">height</span>:<span class="hljs-number">20px</span>;\n <span class="hljs-attribute">line-height</span>:<span class="hljs-number">20px</span>;\n <span class="hljs-attribute">vertical-align</span>: middle;\n <span class="hljs-attribute">margin-left</span>:<span class="hljs-number">10px</span>;\n <span class="hljs-attribute">font-size</span>:<span class="hljs-number">14px</span>;\n }\n </span><span class="hljs-tag"></<span class="hljs-name">style</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">'/tinymce/tinymce.js'</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"/tinymce/tinymce-plugin.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://unpkg.com/tinymce-plugin/langs/zh_CN.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://unpkg.com/tinymce-plugin/plugins/tpLayout/plugin.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span> \n <span class="hljs-tag"></<span class="hljs-name">head</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">body</span> <span class="hljs-attr">tp-page-height</span>=<span class="hljs-string">"298"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">div</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">textarea</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tinymce"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">p</span>></span>这是一个一键排版插件<span class="hljs-tag"></<span class="hljs-name">p</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">textarea</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">div</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">div</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">p</span>></span><span class="hljs-tag"></<span class="hljs-name">p</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"openPlugin()"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"open-plugin"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"点击调用触发插件"</span> ></span><span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://avatars.githubusercontent.com/u/87648636?s=60&v=4"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">""</span>></span><span class="hljs-tag"><<span class="hljs-name">span</span>></span>点击调用触发插件<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">a</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">div</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="language-javascript">\n\n tinymce.<span class="hljs-title function_">init</span>({\n <span class="hljs-attr">selector</span>: <span class="hljs-string">'textarea.tinymce'</span>,\n <span class="hljs-attr">language</span>: <span class="hljs-string">'zh_CN'</span>,\n <span class="hljs-attr">skeletonScreen</span>: <span class="hljs-literal">true</span>,\n <span class="hljs-attr">plugins</span>: <span class="hljs-string">'code tpLayout autoresize'</span>,\n <span class="hljs-attr">toolbar</span>: <span class="hljs-string">'code tpLayout'</span>\n });\n\n <span class="hljs-keyword">var</span> <span class="hljs-title function_">openPlugin</span>=(<span class="hljs-params"></span>)=>{\n tinymce.<span class="hljs-property">activeEditor</span>.<span class="hljs-title function_">execCommand</span>(<span class="hljs-string">'mceTpLayout'</span>);\n }\n </span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">body</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">html</span>></span>\n\n</code><div class="language-text" >html</div></pre>'},sourceCode:function(){return'<iframe scrolling="no" width="100%" style="width:100%;margin:auto 0;border:0px; min-height: 319px" onload="autoIframeHeight(this)" src="/demo/demo-configure_t_36dk4e1665394502088_p_1665394508760/index.html"></iframe>'}},template:'<PreviewIframe class="demo-configure_t_36dk4e1665394502088_p_" idx="Demo0" :source="source()" :sourceCode="sourceCode()">\n \n </PreviewIframe>'};s("default",a({components:{Demo0:n},template:'<div class="fv-mardown-html"><div class="fv-mardown-main tp-doc"><h1 id="配置参考" tabindex="-1"><a class="header-anchor" href="#配置参考">#</a> 配置参考</h1>\n<h2 id="参数配置" tabindex="-1"><a class="header-anchor" href="#参数配置">#</a> 参数配置</h2>\n<table>\n<thead>\n<tr>\n<th>参数名称</th>\n<th>类型</th>\n<th>参数说明</th>\n<th>参数默认值</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>style</td>\n<td>Object</td>\n<td>一键布局默认样式参数</td>\n<td>{‘text-align’:‘justify’,‘text-indent’:‘2em’,‘line-height’: 1.5 }</td>\n</tr>\n<tr>\n<td>filterTags</td>\n<td>Array</td>\n<td>过滤标签，该数组中的标签，一键布局中将会被忽略</td>\n<td>[‘table>*’,‘img’]</td>\n</tr>\n<tr>\n<td>tagsStyle</td>\n<td>Object</td>\n<td>单独标签样式处理</td>\n<td>——</td>\n</tr>\n<tr>\n<td>clearStyle</td>\n<td>Array</td>\n<td>清除样式 ，一键布局后 ，数组中的样式将会清除掉</td>\n<td>——</td>\n</tr>\n</tbody>\n</table>\n<div class="tip fv-state-tip fv-tip"><p class="fv-state-title" >提示</p>\n<p>配置优先级从低到高： style < filterTags < tagsStyle < clearStyle</p>\n</div>\n<pre class="hljs fv-hljs "><ul class="highlight-line-number " ><li ><span>1</span></li><li ><span>2</span></li><li ><span>3</span></li><li ><span>4</span></li><li ><span>5</span></li><li ><span>6</span></li><li ><span>7</span></li><li ><span>8</span></li><li ><span>9</span></li><li ><span>10</span></li><li ><span>11</span></li><li ><span>12</span></li><li ><span>13</span></li><li ><span>14</span></li><li ><span>15</span></li><li ><span>16</span></li><li ><span>17</span></li><li ><span>18</span></li><li ><span>19</span></li><li ><span>20</span></li><li ><span>21</span></li><li ><span>22</span></li><li ><span>23</span></li><li ><span>24</span></li><li ><span>25</span></li><li ><span>26</span></li><li ><span>27</span></li></ul><code class=" hljs hljs-js" @click.stop="()=>{}">tinymce.<span class="hljs-title function_">init</span>({\n <span class="hljs-attr">selector</span>: <span class="hljs-string">'#tinydemo'</span>,\n <span class="hljs-attr">plugins</span>: <span class="hljs-string">"layout"</span>,\n <span class="hljs-attr">toolbar</span>: <span class="hljs-string">"layout"</span>,\n <span class="hljs-attr">tp_layout_options</span>: {\n <span class="hljs-attr">style</span>: {\n <span class="hljs-string">'text-align'</span>:<span class="hljs-string">'justify'</span>,\n <span class="hljs-string">'text-indent'</span>:<span class="hljs-string">'2em'</span>,\n <span class="hljs-string">'line-height'</span>: <span class="hljs-number">1.5</span>\n },\n filterTags：[<span class="hljs-string">'table>*'</span>,<span class="hljs-string">'tbody'</span>], <span class="hljs-comment">//'table，'tbody','td','tr' 将会忽略掉 同时 table>*，忽略table 标签 以及所有子标签</span>\n <span class="hljs-attr">clearStyle</span>: [<span class="hljs-string">'text-indent'</span>],<span class="hljs-comment">//text-indent 将会被清除掉</span>\n <span class="hljs-attr">tagsStyle</span>: {\n <span class="hljs-string">'table'</span>: {\n <span class="hljs-string">'line-height'</span>: <span class="hljs-number">3</span>,\n <span class="hljs-string">'text-align'</span>: <span class="hljs-string">'center'</span>\n },\n <span class="hljs-string">'table,tbody,tr,td'</span>: { <span class="hljs-comment">//支持并集选择</span>\n <span class="hljs-string">'line-height'</span>: <span class="hljs-number">2</span>\n },\n <span class="hljs-string">'tr>td,table>tbody'</span>: { <span class="hljs-comment">//支持, 精准定位 通过 ' > '</span>\n <span class="hljs-string">'line-height'</span>: <span class="hljs-number">3</span>,\n <span class="hljs-string">'text-align'</span>: <span class="hljs-string">'center'</span>\n }\n }\n }\n});\n</code><div class="language-text" >js</div></pre>\n<h2 id="如何通过外部按钮触发" tabindex="-1"><a class="header-anchor" href="#如何通过外部按钮触发">#</a> 如何通过外部按钮触发</h2>\n<p>可以用通过 <code class="fv-code_inline">execCommand(\'mceTpLayout\')</code> 调用</p>\n<Demo0 data-isComponent="iframe" />\n</div></div><PagesRouter docPath="__docs__/configure.md" mapType="docs" docRepo="tp-layout" pagesName="configure_t_36dk4e1665394502088_p_" />'}))}}}));
