import"./pinia.js";import"./tinymce.js";import{E as l}from"./Editor.js";import"./plugin.js";import{R as s,E as r,a as o}from"./Editor2.js";import{M as j}from"./vue.js";const p={};p.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/tpIndent2em/plugin.min.js"></script>    
  </head>
  <body tp-page-height="298">
    <div>
      <textarea class="tinymce">
        <p>\u8FD9\u662F\u4E00\u4E2A\u9996\u884C\u7F29\u8FDB\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 tpIndent2em autoresize',
        toolbar: 'code tpIndent2em'
        });

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


html
`},sourceCode(){return''}};p.template=` `;const n={name:"domeVue3",components:{TinymceVue:l},data(){return{content:"\u8FD9\u662F\u4E00\u4E2A\u9996\u884C\u7F29\u8FDB\u63D2\u4EF6",tinymceOptions:{min_height:300,max_height:700,skeletonScreen:!0,base_url:"/tinymce",plugins:"code tpIndent2em preview autoresize",toolbar:"code tpIndent2em preview"}}}};n.methods?n.methods.source=function(){return`
<template>
<div>
 <h1>\u63D2\u4EF6demo\u5C55\u793A\u533A\u57DF</h1>
  <div class="vueDemo">
    <tinymce-vue v-model="content" :init="tinymceOptions" ></tinymce-vue>
  </div>
  <div  v-html="content"></div>
</div>
</template>

<script>
import tinymce from "tinymce";
import "tinymce-plugin";
import TinymceVue from "@tinymce-plugin/tinymce-vue";
import "tinymce-plugin/plugins/tpIndent2em/plugin.js";
export default{
name: 'domeVue3',
components: { TinymceVue },
data(){
    return {
        content: '\u8FD9\u662F\u4E00\u4E2A\u9996\u884C\u7F29\u8FDB\u63D2\u4EF6',
        tinymceOptions:{
                min_height: 300,
                max_height: 700,
                skeletonScreen: true,
                base_url:'/tinymce',
                plugins: 'code tpIndent2em preview autoresize',
                toolbar: 'code tpIndent2em preview',
             
        }
    }
  }
}
</script>

vue
`}:n.methods={source(){return`
<template>
<div>
 <h1>\u63D2\u4EF6demo\u5C55\u793A\u533A\u57DF</h1>
  <div class="vueDemo">
    <tinymce-vue v-model="content" :init="tinymceOptions" ></tinymce-vue>
  </div>
  <div  v-html="content"></div>
</div>
</template>

<script>
import tinymce from "tinymce";
import "tinymce-plugin";
import TinymceVue from "@tinymce-plugin/tinymce-vue";
import "tinymce-plugin/plugins/tpIndent2em/plugin.js";
export default{
name: 'domeVue3',
components: { TinymceVue },
data(){
    return {
        content: '\u8FD9\u662F\u4E00\u4E2A\u9996\u884C\u7F29\u8FDB\u63D2\u4EF6',
        tinymceOptions:{
                min_height: 300,
                max_height: 700,
                skeletonScreen: true,
                base_url:'/tinymce',
                plugins: 'code tpIndent2em preview autoresize',
                toolbar: 'code tpIndent2em preview',
             
        }
    }
  }
}
</script>

vue
`}};n.template=` ' `;const a={};a.methods?(a.methods.source=function(){return`
<template>
<div>
 <h1>\u63D2\u4EF6demo\u5C55\u793A\u533A\u57DF</h1>
  <div class="vueDemo">
    <tinymce-vue v-model="content" :init="tinymceOptions" ></tinymce-vue>
  </div>
  <div v-html="content"></div>
</div>
</template>

<script>
import tinymce from "tinymce";
import "tinymce-plugin";
import "tinymce-plugin/plugins/tpIndent2em/plugin.js";
import TinymceVue from "@tinymce-plugin/tinymce-vue";
export default{
name: 'domeVue2',
components: { TinymceVue },
data(){
    return {
        content: '\u8FD9\u662F\u4E00\u4E2A\u9996\u884C\u7F29\u8FDB\u63D2\u4EF6',
        tinymceOptions:{
                min_height: 300,
                max_height: 700,
                base_url:'/tinymce',
                plugins: 'code tpIndent2em preview autoresize',
                toolbar: 'code tpIndent2em Preview',
                skeletonScreen: true,
        }
    }
  }
}
</script>

vue
`},a.methods.template=function(){return`

\u63D2\u4EF6demo\u5C55\u793A\u533A\u57DF

`},a.methods.sourceCode=function(){return{name:"domeVue2",components:{TinymceVue:l},data:function(){return{content:"\u8FD9\u662F\u4E00\u4E2A\u9996\u884C\u7F29\u8FDB\u63D2\u4EF6",tinymceOptions:{min_height:300,max_height:700,base_url:"/tinymce",plugins:"code tpIndent2em preview autoresize",toolbar:"code tpIndent2em Preview",skeletonScreen:!0}}}}}):a.methods={template(){return`

\u63D2\u4EF6demo\u5C55\u793A\u533A\u57DF

`},sourceCode(){return{name:"domeVue2",components:{TinymceVue:l},data:function(){return{content:"\u8FD9\u662F\u4E00\u4E2A\u9996\u884C\u7F29\u8FDB\u63D2\u4EF6",tinymceOptions:{min_height:300,max_height:700,base_url:"/tinymce",plugins:"code tpIndent2em preview autoresize",toolbar:"code tpIndent2em Preview",skeletonScreen:!0}}}}},source(){return`
<template>
<div>
 <h1>\u63D2\u4EF6demo\u5C55\u793A\u533A\u57DF</h1>
  <div class="vueDemo">
    <tinymce-vue v-model="content" :init="tinymceOptions" ></tinymce-vue>
  </div>
  <div v-html="content"></div>
</div>
</template>

<script>
import tinymce from "tinymce";
import "tinymce-plugin";
import "tinymce-plugin/plugins/tpIndent2em/plugin.js";
import TinymceVue from "@tinymce-plugin/tinymce-vue";
export default{
name: 'domeVue2',
components: { TinymceVue },
data(){
    return {
        content: '\u8FD9\u662F\u4E00\u4E2A\u9996\u884C\u7F29\u8FDB\u63D2\u4EF6',
        tinymceOptions:{
                min_height: 300,
                max_height: 700,
                base_url:'/tinymce',
                plugins: 'code tpIndent2em preview autoresize',
                toolbar: 'code tpIndent2em Preview',
                skeletonScreen: true,
        }
    }
  }
}
</script>

vue
`}};a.template=` `;const t={};t.methods={source(){return`
<script>
import React from 'react';
import ReactDOM from 'react-dom';
import tinymce from "tinymce";
import "tinymce-plugin";
import "tinymce-plugin/plugins/tpIndent2em/plugin.js";
import { Editor } from '@tinymce/tinymce-react';

     class ReactDemo extends React.Component{
       constructor(props) {
           super(props);
           this.state = { reactDemoInitialValue: "<p>\u8FD9\u662F\u4E00\u4E2AREactDemo</p>"};
           this.reactDemoInit = {
                    min_height: 220,
                    base_url:'/tinymce',
                    branding: false,
                    language:'zh_CN',
                    menubar: false,
                    skeletonScreen: true,
                    plugins: 'code tpIndent2em autoresize',
                    toolbar: 'undo redo code tpIndent2em',
                    content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
             };
       this.handleChange = (data)=>{
              this.setState({reactDemoInitialValue: data})
        }
      }
      render(){
        return (
           <div>
            <h1>\u8FD9\u662F\u4E00\u4E2A\u9996\u884C\u7F29\u8FDB\u63D2\u4EF6</h1>
            <div>
            <Editor initialValue={this.state.reactDemoInitialValue} init={this.reactDemoInit} onEditorChange={this.handleChange} />
            </div>
            <div dangerouslySetInnerHTML={{__html: this.state.reactDemoInitialValue }} ></div>
          </div>
          );
      }
    }

   ReactDOM.render(<ReactDemo />, document.getElementById('ReactRootID'));
</script>

html
`},sourceCode(i){class e extends s.Component{constructor(c){super(c),this.state={reactDemoInitialValue:"

\u8FD9\u662F\u4E00\u4E2AREactDemo

"},this.reactDemoInit={min_height:220,base_url:"/tinymce",branding:!1,language:"zh_CN",menubar:!1,skeletonScreen:!0,plugins:"code tpIndent2em autoresize",toolbar:"undo redo code tpIndent2em",content_style:"body { font-family:Helvetica,Arial,sans-serif; font-size:14px }"},this.handleChange=h=>{this.setState({reactDemoInitialValue:h})}}render(){return s.createElement("div",null,s.createElement("h1",null,"\u8FD9\u662F\u4E00\u4E2A\u9996\u884C\u7F29\u8FDB\u63D2\u4EF6"),s.createElement("div",null,s.createElement(r,{initialValue:this.state.reactDemoInitialValue,init:this.reactDemoInit,onEditorChange:this.handleChange})),s.createElement("div",{dangerouslySetInnerHTML:{__html:this.state.reactDemoInitialValue}}))}}return o.render(s.createElement(e,null),i)}};t.template=` `;const b=j({components:{Demo0:p,Demo1:n,Demo2:a,Demo3:t},template:`

# \u{1F680} tpIndent2em

tinymce-plugin\xA0 release candidate\xA0 tinymce Version\xA0 GitHub license\xA0 tinymce Version

\u5B9E\u73B0 tinymce \u5BCC\u6587\u672C\u6846\u9996\u884C\u7F29\u8FDB\u529F\u80FD \u80FD\u5F88\u597D\u914D\u5408 \u5B57\u4F53\u5927\u5C0F(fon-size) \u5B57\u6BCD\u95F4\u8DDD(letter-spacing) \u5B9E\u73B0\u9996\u884C\u7F29\u8FDB

# \u4F7F\u7528\u65B9\u5F0F

# CDN

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
<script src="https://unpkg.com/tinymce-plugin/plugins/tpIndent2em/plugin.min.js"></script><!--\u5F15\u5165-->

<!-- \u4F7F\u7528 -->
<script>
   tinymce.init({
  ...
   plugins: "tpIndent2em"
   toolbar: "tpIndent2em"
  ...
 })
</script>


html

# NPM

\u4F7F\u7528 tinymce-plugin \u5E93

# \u4E0B\u8F7D tinymce-plugin

  • 1
npm i tinymce-plugin 

sh
 
  • 1
yarn add tinymce-plugin -D 

sh

# \u9879\u76EE\u4E2D\u4F7F\u7528

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
 import "tinymce-plugin"
 import "tinymce-plugin/plugins/tpIndent2em/plugin.js";
 tinymce.init({
  ...
   plugins: "tpIndent2em"
   toolbar: "tpIndent2em"
  ...
 })


js

# \u4E0B\u8F7D\u65B9\u5F0F2

  • 1
import "@tinymce/tp-indent2em"

js
  • 1
npm i @tinymce-plugin/tp-indent2em

sh
 
  • 1
yarn add @tinymce-plugin/tp-indent2em -D 

sh

# \u9879\u76EE\u4E2D\u4F7F\u7528

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
 import "tinymce-plugin"
 import "@tinymce-plugin/tp-indent2em";
 tinymce.init({
  ...
   plugins: "tpIndent2em"
   toolbar: "tpIndent2em"
  ...
 })

js

tpIndent2em \u4F9D\u8D56 tinymce-plugin

# Demo

`});export{b as default};