search

Alex-D / Trumbowyg

A lightweight and amazing WYSIWYG JavaScript editor under 10kB
https://alex-d.github.io/Trumbowyg
MIT License
3.99k stars 612 forks source link

My Editor is not working after adding plugins #1126

Closed ngcgolf11 closed 4 years ago

ngcgolf11 commented 4 years ago

I have used the following code but my editor is not working and it is not adding any plugins please guide me what should I do to add plugins into my code and work 

<head>
    <meta charset="UTF-8">
    <title>Allow tags from paste plugin | Trumbowyg</title>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://noidagolfcourse.com/editor/T/dist/plugins/emoji/ui/trumbowyg.emoji.min.css">
    <link rel="stylesheet" href="../../css/main.css">
</head>
<body class="documentation-body">
<div class="main main-demo-inner">
    <section class="wrapper section">
        <h2 class="section-title">Allow tags from paste plugin</h2>

        <div class="feature">
            <h3>Basic usage</h3>
            <p>
                This plugin allows you to filter tags allowed when an user paste some code into the editor.
            </p>

            <a href="../../documentation/plugins/#plugin-allowtagsfrompaste" class="button button-demo">Read allow tags from paste plugin documentation</a>

            <div id="editor">
                <h4>Try to paste something!</h4>
                <p>
                    Only `h2`, `p` `strong` and `br` tags are allowed!
                    All other tags will be removed.
                </p>
            </div>

            <div class="sample-data">
                <h4 style="padding: 0;">Some text to copy to test</h4>
                <p>
                    This table will be not pasted:
                </p>
                <table style="margin: 0;">
                    <tr>
                        <td>h4 must be kept</td>
                        <td>but not</td>
                        <td>this table</td>
                    </tr>
                    <tr>
                        <td>Second line</td>
                        <td>will be</td>
                        <td>striped out too</td>
                    </tr>
                </table>
            </div>

            <h3>The code</h3>
            <pre><code class="js-code-to-eval javascript">
$('#editor')
.trumbowyg({
    btns: [
        'viewHTML',
        'undo', 'redo',
        'formatting',
        'fontfamily','fontsize',
        'strong', 'em', 'del',
        'superscript', 'subscript',
        'link','emoji',
        'insertImage','insertAudio',
        'justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull',
        'unorderedList', 'orderedList',
        'horizontalRule',
        'removeformat',
        'fullscreen','foreColor', 'backColor'
    ],
autogrowOnEnter: true,
autogrow: true,
urlProtocol: true,
imageWidthModalEdit: true,
    plugins: {
        allowTagsFromPaste: {
            allowedTags: ['h4', 'p', 'br']
        },
colors: {
            colorList: [
                '000', '111', '222', 'ffea00'
            ]
        }
    }
});
            </code></pre>
        </div>

        <div class="feature">
            <h3>Setup</h3>

            <h4>In head tag</h4>
            <pre><code class="html loading-head">
            </code></pre>
            <h4>At the end of body</h4>
            <pre><code class="html loading-body">
&lt;!-- Import jQuery -->
&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">&lt;/script>
&lt;script>window.jQuery || document.write('&lt;script src="js/vendor/jquery-3.3.1.min.js">&lt;\/script>')&lt;/script>
            </code></pre>
        </div>
    </section>
</div>

<!-- Import jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
<script src="https://noidagolfcourse.com/editor/T/dist/plugins/cleanpaste/trumbowyg.cleanpaste.min.js"></script>
<script src="https://noidagolfcourse.com/editor/T/dist/plugins/colors/trumbowyg.colors.min.js"></script>
<script src="https://noidagolfcourse.com/editor/T/dist/plugins/emoji/trumbowyg.emoji.min.js"></script>
<script src="https://noidagolfcourse.com/editor/T/dist/plugins/fontfamily/trumbowyg.fontfamily.min.js"></script>
<script src="https://noidagolfcourse.com/editor/T/dist/plugins/fontsize/trumbowyg.fontsize.min.js"></script>
<script src="https://noidagolfcourse.com/editor/T/dist/plugins/insertaudio/trumbowyg.insertaudio.min.js"></script>
<!-- DO NOT COPY THESE LINES IN YOUR PROJECT, THEY ARE THERE JUST FOR THE EXAMPLE PAGE PURPOSE -->
<script src="../js/loader.js"></script>
<script>
    loadStyle('https://noidagolfcourse.com/editor/T/dist/ui/trumbowyg.min.css');
    loadScript('https://noidagolfcourse.com/editor/T/dist/trumbowyg.min.js', 'Import Trumbowyg');
    loadScript('https://noidagolfcourse.com/editor/T/dist/plugins/allowtagsfrompaste/trumbowyg.allowtagsfrompaste.min.js', 'Import all plugins you want AFTER importing jQuery and Trumbowyg');
</script>
<script src="../js/runExampleCode.js"></script>
<script src="../js/highlight.js"></script>
</body>
</html>
ngcgolf11 commented 4 years ago

this is my code thanks alot for your efforts

Alex-D commented 4 years ago

Hi

  1. DO NOT COPY THESE LINES IN YOUR PROJECT, THEY ARE THERE JUST FOR THE EXAMPLE...

    Means, you should not copy these lines in your project...

  2. Follow the doc, start with... Get started make your HTML valid, and working with just a simple Trumbowyg instance, then add plugins
  3. Do not copy-paste HTML from documentation source, documentation display things, but the code which generates the docs is very dynamic and not ready at all for final use.
  4. You can found tons of examples here: https://github.com/Alex-D/Trumbowyg/blob/98be1fb0a253eb912a05e2beffa9c52a8b19ed32/index.html#L226-L442