如何设置TinyMCE文本编辑器
时间：2020-02-23 14:33:11 来源:igfitidea点击:
在本教程中，我们将学习为Web项目设置TinyMCE HTML WYSIWYG文本编辑器。
需求
我们将需要以下物品。
- 文本编辑器(例如SublimeText，TextMate，Coda，NotePad ++)或者IDE(例如Eclipse)
- Web浏览器，例如Chrome或者Firefox
- TinyMCE
- jQuery
所以开始吧...
步骤1：下载TinyMCE
访问tinymce.com并下载社区版本。
步骤2：下载jQuery
访问jquery.com并下载压缩的生产版本。
步骤3：创建一个新项目：tinymce
打开您喜欢的文本编辑器或者IDE，然后创建一个新项目并将其命名为tinymce。
在项目文件夹中创建两个子文件夹，即js和plugin。
现在，将您从jquery.com下载的jquery.min.js文件复制到js文件夹中。
并在插件文件夹中复制tinymce文件夹。
步骤4：建立index.html档案
在项目文件夹中，创建一个index.html文件。
我们将在该文件中创建一个TinyMCE文本编辑器。
步骤5：建立init-tinymce.js档案
现在在plugin文件夹内的tinymce文件夹内，创建一个新文件，并将其命名为init-tinymce.js。
该文件将初始化tinymce文本编辑器。
项目文件夹的结构如下所示...
tinymce | +--js | | | +-- jquery.min.js | +--plugin | | | +--tinymce | | | +-- some folders | | | +-- init-tinymce.js | | | +-- tinymce.min.js | +-- index.html
index.html
在index.html文件中编写以下HTML代码。
<!DOCTYPE html> <html> <head> <title>TinyMCE - Setup</title> </head> <body> <textarea class="tinymce"></textarea> <!-- javascript --> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="plugin/tinymce/tinymce.min.js"></script> <script type="text/javascript" src="plugin/tinymce/init-tinymce.js"></script> </body> </html>
init-tinymce.js
在init-tinymce.js文件中编写以下代码。
tinymce.init({
/* replace textarea having class .tinymce with tinymce editor */
selector: "textarea.tinymce",
/* theme of the editor */
theme: "modern",
skin: "lightgray",
/* width and height of the editor */
width: "100%",
height: 300,
/* display statusbar */
statubar: true,
/* plugin */
plugins: [
"advlist autolink link image lists charmap print preview hr anchor pagebreak",
"searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
"save table contextmenu directionality emoticons template paste textcolor"
],
/* toolbar */
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons",
/* style */
style_formats: [
{title: "Headers", items: [
{title: "Header 1", format: "h1"},
{title: "Header 2", format: "h2"},
{title: "Header 3", format: "h3"},
{title: "Header 4", format: "h4"},
{title: "Header 5", format: "h5"},
{title: "Header 6", format: "h6"}
]},
{title: "Inline", items: [
{title: "Bold", icon: "bold", format: "bold"},
{title: "Italic", icon: "italic", format: "italic"},
{title: "Underline", icon: "underline", format: "underline"},
{title: "Strikethrough", icon: "strikethrough", format: "strikethrough"},
{title: "Superscript", icon: "superscript", format: "superscript"},
{title: "Subscript", icon: "subscript", format: "subscript"},
{title: "Code", icon: "code", format: "code"}
]},
{title: "Blocks", items: [
{title: "Paragraph", format: "p"},
{title: "Blockquote", format: "blockquote"},
{title: "Div", format: "div"},
{title: "Pre", format: "pre"}
]},
{title: "Alignment", items: [
{title: "Left", icon: "alignleft", format: "alignleft"},
{title: "Center", icon: "aligncenter", format: "aligncenter"},
{title: "Right", icon: "alignright", format: "alignright"},
{title: "Justify", icon: "alignjustify", format: "alignjustify"}
]}
]
});
