Question

我想快速将WYSIWYG编辑器添加到我的网站。我没有使用wordpress，drupal或joomla。我正在手工编写一个网站。如何实现WYSIWYG编辑器？在下载之后，我似乎无法找到一种简单直接的方法来实现其中一种。我特别想使用tinyMCE，因为我正在建立一个响应式网站。有人可以告诉我如何实现这个并根据自己的喜好自定义它吗？

我希望能够实现这样的目标：

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

Answer 1

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

这是让TinyMCE替换textarea的最小配置。

<!-- 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>

您发布的示例的来源：

<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>

Answer 2

我看过TinyMCE的网站，似乎他们已经在他们的头版上安装了快速安装说明。至于要在安装中显示的按钮，它们在“文档”部分中包含所需的信息。 @Alfie的解释很有效。

我无法强调这一点。阅读他们的文档，除非您想要进行准系统安装。

如何在我的网站上实现WYSIWYG编辑器？

2 个答案: