我如何实现一个所见即所得编辑器到我的网站


How do I implement a WYSIWYG editor to my website?

我想快速添加一个所见即所得编辑器到我的网站。我没有使用wordpress、drupal或joomla。我正在制作一个网站,所有的代码都由手。如何实现所见即所得编辑器?我似乎找不到一个简单直接的方法来实现这些后,我下载了它。我特别想使用tinyMCE,因为我正在制作一个响应式网站。有人能给我简单的说明如何实现这一点,并自定义它到我的喜欢吗?

我希望能够实现这样的东西:

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

基本说明(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>

和你发布的例子的来源:

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

我看了一下TinyMCE的网站,他们似乎在首页上放了一个快速安装说明。至于您希望在安装中显示哪个按钮,它们的Documentation部分提供了所需的信息。@Alfie的解释足够好了。

我怎么强调都不为过。阅读他们的文档,除非你想要一个裸机安装。