如何在我的网站上实施 WYSIWYG 编辑器？ [关闭]答案

【问题标题】：How do I implement a WYSIWYG editor to my website? [closed]如何在我的网站上实施 WYSIWYG 编辑器？ [关闭]
【发布时间】：2013-06-16 21:43:37
【问题描述】：

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

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

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

【问题讨论】：

我投了反对票，因为将 TinyMCE 添加到页面的说明肯定在该网站上。如果您按照这些说明进行操作，请出示您的代码，并指出您认为遇到问题的地方。（顺便说一句，这是对这里所有问题的好建议）。如果您有几分钟的时间，请阅读此处的常见问题解答 - 它介绍了如何很好地提出问题。
抱歉，我试了几个小时，网站上的说明让我很困惑。我对此感到非常抱歉！我可以寻求宽恕吗？我不想被禁止或任何事情。
不要担心奇怪的反对票:)。如果您有很多反对意见和/或关闭的问题，确实可以自动锁定此处不提问，但您可以通过回答一些问题来赢得声誉来解决这个问题。正如我所说，阅读常见问题解答 - 这将帮助您了解什么是一个好问题！祝你好运。

标签： php html textarea wysiwyg

【解决方案1】：

基本说明 (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 文件夹下载与所有其他 php 文件放在文件夹中？然后将路径设置到它所在的位置？
如果您下载了主包，并将 zip 的内容解压缩到您的根 Web 文件夹，您需要的 src 路径将是：src="/tinymce/js/tinymce/tinymce.min.js"
我目前不在真实服务器上。我在本地主机上使用 XAMPP 和 htdocs。我有一个名为个人网站的文件夹，其中包含我在 htdocs 中的所有文件。我将下载的文件夹 tinymce 放在了我的个人网站文件夹中。我的路径目前是：它仍然无法正常工作
尝试将其更改为tinymce/js/tinymce/tinymce.min.js，这应该与解压缩后下载的zip的默认文件/目录结构相匹配。
有了你的最后一条评论，我现在可以让它工作了。我如何让它使用像示例这样的额外插件？我应该简单地复制并粘贴上面的代码吗？我会尝试并告诉你。

【解决方案2】：

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

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

【讨论】：