如何在我的网站上实现所见即所得的编辑器?

Som*_*guy -2 html php wysiwyg textarea

我想快速在我的网站中添加一个所见即所得的编辑器。我没有使用wordpress,drupal或joomla。我通过手工编写网站来制作网站。如何实现WYSIWYG编辑器?下载后,我似乎找不到一种简单易行的方法来实现其中之一。我特别想使用tinyMCE,因为我正在制作一个响应式网站。有人可以给我简单的说明,以实现该方法并根据自己的喜好对其进行自定义吗?

我希望能够实现这样的事情:

http://www.tinymce.com/tryit/classic.php

Alf*_*fie 5

基本说明(http://www.tinymce.com/wiki.php/Installation

这是让TinyMCE替换文本区域的最小配置。

<!-- Place inside the <head> of your HTML -->
<script type="text/javascript" src="<your installation path>/tinymce/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
    selector: "textarea"
 });
</script>

<!-- Place this in the body of the page content -->
<form method="post">
    <textarea></textarea>
</form>
Run Code Online (Sandbox Code Playgroud)

和您发布的示例的来源:

<script type="text/javascript" src="<your installation path>/tinymce/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
        selector: "textarea",
        plugins: [
                "advlist autolink autosave link image lists charmap print preview hr anchor pagebreak spellchecker",
                "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
                "table contextmenu directionality emoticons template textcolor paste fullpage textcolor"
        ],

        toolbar1: "newdocument fullpage | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | styleselect formatselect fontselect fontsizeselect",
        toolbar2: "cut copy paste | searchreplace | bullist numlist | outdent indent blockquote | undo redo | link unlink anchor image media code | inserttime preview | forecolor backcolor",
        toolbar3: "table | hr removeformat | subscript superscript | charmap emoticons | print fullscreen | ltr rtl | spellchecker | visualchars visualblocks nonbreaking template pagebreak restoredraft",

        menubar: false,
        toolbar_items_size: 'small',

        style_formats: [
                {title: 'Bold text', inline: 'b'},
                {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
                {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
                {title: 'Example 1', inline: 'span', classes: 'example1'},
                {title: 'Example 2', inline: 'span', classes: 'example2'},
                {title: 'Table styles'},
                {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
        ],

        templates: [
                {title: 'Test template 1', content: 'Test 1'},
                {title: 'Test template 2', content: 'Test 2'}
        ]
});</script>

<form method="post" action="somepage">
    <textarea name="content" style="width:100%"></textarea>
</form>
Run Code Online (Sandbox Code Playgroud)