-2

我想快速添加一个所见即所得的编辑器到我的网站。我没有使用 wordpress、drupal 或 joomla。我正在通过手工编码来制作一个网站。如何实现所见即所得的编辑器？下载后，我似乎找不到一种简单直接的方法来实现其中一个。我特别想使用 tinyMCE，因为我正在制作一个响应式网站。有人可以给我简单的说明如何实现它并根据我的喜好定制它吗？

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

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

4

2 回答 2

6

基本说明（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>
于 2013-06-16T21:45:57.750 回答
0

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

我不能很好地强调这一点。阅读他们的文档，除非你想要一个准系统安装。

于 2013-06-16T21:58:02.697 回答