TinyMCE可视化HTML编辑器插件的使用方法

最新推荐文章于 2025-04-23 12:24:59 发布

笑傲IT

最新推荐文章于 2025-04-23 12:24:59 发布

阅读量384

点赞数

本文链接：https://blog.youkuaiyun.com/daiqunbiao/article/details/17113095

版权

本文介绍如何快速集成并配置TinyMCE编辑器，包括基本使用方法、功能配置、以及与PHP服务器的优化整合。TinyMCE是一个轻量级、所见即所得的编辑器，支持多种浏览器，基于JavaScript编写，提供丰富的插件和高度的灵活性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器，支持目前流行的各种浏览器，由JavaScript写成。功能配置灵活简单（两行代码就可以将编辑器嵌入网页中），支持AJAX。另一特点是加载速度非常快，如果你的服务器采用的脚本语言是 PHP，那还可以进一步优化。最重要的是，TinyMCE是一个根据LGPL license发布的自由软件，你可以把它用于商业应用。我通常采用以下两种使用方法：

第一种：

<html>
<head>
<script language="javascript" type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
$('.tinymceCompletion').each(function() {
            $(this).tinymce({
                script_url : "../jscripts/tiny_mce/tiny_mce.js",
                // General options
                theme : "advanced",
                plugins: "pagebreak,style,layer,table,advhr,advimage,advlink,emotions,inlinepopups,insertdatetime,preview,media,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",

                // Theme options
                theme_advanced_buttons1: "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,formatselect,fontselect,fontsizeselect",
                theme_advanced_buttons2: "cut,copy,paste,pastetext,pasteword,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
                theme_advanced_buttons3: "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,advhr,|,print,|,ltr,rtl,|,fullscreen",
                theme_advanced_toolbar_location: "top",
                theme_advanced_toolbar_align: "left",
                theme_advanced_statusbar_location: "none",
                theme_advanced_resizing: false
                
            });
        });
</script>
</head>
<body>
 <textarea  id="taCompletionHtml" name="taCompletionHtml" class="tinymceCompletion" rows="15" cols="80" style="width: 100%; height: 250px" ></textarea>
</body>
</html>

第二种：
<html>
<head>
<script type="text/javascript" src="ClientInclude/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" language="javascript">
    tinyMCE.init({
        // General options
        mode: "exact",
        elements: "taComments",
        theme: "advanced",
        plugins: "safari,pagebreak,style,layer,table,advhr,advimage,advlink,emotions,inlinepopups,insertdatetime,preview,media,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",

        // Theme options
        theme_advanced_buttons1: "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,formatselect,fontselect,fontsizeselect",
        theme_advanced_buttons2: "cut,copy,paste,pastetext,pasteword,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
        theme_advanced_buttons3: "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,advhr,|,print,|,ltr,rtl,|,fullscreen",
        theme_advanced_toolbar_location: "top",
        theme_advanced_toolbar_align: "left",
        theme_advanced_statusbar_location: "none",
        theme_advanced_resizing: false
    });

</script>
</head>
<body>
  <textarea id="taComments" runat="server" cols="20" rows="3" class="ui-txt-general large"></textarea>
</body>
<html>