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

Php 如何在我的网站上实现所见即所得编辑器?,php,html,textarea,wysiwyg,Php,Html,Textarea,Wysiwyg,我想快速添加一个所见即所得编辑器到我的网站。我没有使用wordpress、drupal或joomla。我正在制作一个网站,通过手工编码。如何实现所见即所得编辑器?下载后,我似乎找不到一个简单直接的方法来实现其中的一个。我特别想使用tinyMCE,因为我正在制作一个响应性强的网站。有人能给我简单的说明如何实现这一点,并根据我的喜好定制它吗 我希望能够实现如下内容: 基本说明() 这是让TinyMCE替换textarea的最低配置 <!-- Place inside the <head&

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

我希望能够实现如下内容:

基本说明()

这是让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>

tinymce.init({
选择器:“文本区域”
});
以及您发布的示例的来源:

<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.init({
选择器:“文本区域”,
插件:[
“advlist autolink autosave link image list charmap打印预览hr锚定页面中断拼写检查器”,
“searchreplace wordcount visualblocks visualchars代码全屏插入日期时间媒体非中断”,
“表格上下文菜单方向性表情模板文本颜色粘贴整页文本颜色”
],
工具栏1:“新建文档全页|粗体斜体下划线删除线|左对齐中心对齐右对齐对齐对齐|样式选择格式选择字体选择字体大小选择”,
工具栏2:“剪切复制粘贴|搜索替换| bullist numlist | outdent缩进块报价|撤消重做|链接取消链接锚定图像媒体代码|插入时间预览|前景色背景色”,
工具栏3:“表格| hr removeformat |下标上标| charmap表情符号|全屏打印| ltr rtl |拼写检查器| visualchars visualblocks非破坏性模板pagebreak restoredraft”,
梅努巴:错,
工具栏项目大小:“小”,
样式和格式:[
{标题:“粗体文本”,内联:“b'},
{标题:'Red text',内联:'span',样式:{color:'#ff0000'}},
{title:'Red header',block:'h1',style:{color:'#ff0000'}},
{title:'example1',inline:'span',classes:'example1'},
{title:'example2',inline:'span',classes:'example2'},
{title:'表格样式'},
{title:'Table row 1',选择器:'tr',类:'tablerow 1'}
],
模板:[
{标题:'测试模板1',内容:'测试1'},
{标题:'测试模板2',内容:'测试2'}
]
});

我看过TinyMCE的网站,他们似乎在首页上放了一个快速安装说明。至于您希望在安装中显示哪个按钮,他们在文档部分中提供了所需的信息@阿尔菲的解释很有效


我怎么强调都不过分。阅读他们的文档,除非你想进行裸体安装。

我尝试过,但没有任何改变。对于安装路径,我是否将tinyMCE文件夹下载与所有其他php文件一起放在文件夹中?然后将路径设置到它所在的位置?如果您下载了主包,并将zip的内容提取到您的根web文件夹中,那么您需要的
src
路径将是:
src=“/tinymce/js/tinymce/tinymce.min.js”
我当前不在真正的服务器上。我在本地主机上使用XAMPP和htdocs。我有一个名为personalwebsite的文件夹,其中包含了我在htdocs中的所有文件。我把下载的tinymce文件夹放在我的个人网站文件夹中。我的路径当前为:并且仍然不工作尝试将其更改为
tinymce/js/tinymce/tinymce.min.js
,这应该与解压缩后下载的zip的默认文件/目录结构相匹配。根据您的上一条评论,我现在可以让它工作了。我如何让它使用这些额外的插件,如示例所示?我应该简单地复制并粘贴上面的代码吗?我会试试,让你知道。我投了反对票,因为在网页上添加TinyMCE的说明肯定在那个网站上。如果您遵循了这些说明,请显示您的代码,并确定您认为有问题的地方。(顺便说一句,这对这里的所有问题都是很好的建议)。如果你有几分钟的时间,一定要阅读这里的常见问题-它很好地说明了如何提问。对不起,我试了几个小时,网站上的说明让我很困惑。我真的很抱歉!我能寻求原谅吗?我不想被禁止或任何事情。不要担心奇怪的否决票
:)
。如果你有很多反对票和/或封闭式问题,你确实有可能在这里自动锁定提问,但你可以通过回答一些问题来赢得声誉。正如我所说,阅读常见问题解答-这将帮助你理解什么是一个好问题!祝你好运。