tinymce教程——安装tinymce-码农场

hankcs要硬着头皮做前端了，准备折腾个所见即所得的编辑器，挑来挑去选择了tinymce练手。hankcs略懂Java，但是不懂JS。不过语法应该是一样的，试试看吧。

首先去http://www.tinymce.com/download/download.php下载最新的tinymce，进入官网一看，有三种版本：

从上到下依次是精装版、jQuery版和开发版，作为新手hankcs挑了第一个下载。解压之后发现没文档，嗯，上官网看看发现文档在这里：http://www.tinymce.com/wiki.php

按照文档来一段试试吧：

<!-- Place inside the <head> of your HTML -->
<script type="text/javascript" src="./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>

文件结构如图：

打开一看，还挺不错的嘛：

不过语言是英文的，来把它调成中文再说：

先去http://www.tinymce.com/i18n/index.php?ctrl=lang&act=download&pr_id=1下载中文语言包，然后解压到tinymce\langs目录下。代码稍作调整：

<!-- Place inside the <head> of your HTML -->
<script type="text/javascript" src="./tinymce/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
    selector: "textarea",
    language:"zh_CN"
 });
</script>
 
<!-- Place this in the body of the page content -->
<form method="post">
    <textarea></textarea>
</form>

刷新，中文界面：

还可以用高级的配置：

tinymce代码：

<!-- Place inside the <head> of your HTML -->
<script type="text/javascript" src="./tinymce/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
    selector: "textarea#elm1",
    theme: "modern",
    width: 300,
    height: 300,
    language:"zh_CN",
    plugins: [
         "advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
         "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
         "save table contextmenu directionality emoticons template paste textcolor"
   ],
   content_css: "css/content.css",
   toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | l      ink image | print preview media fullpage | forecolor backcolor emoticons", 
   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'},
    ]
 }); 
</script>
 
<!-- Place this in the body of the page content -->
<form method="post">
    <textarea id="elm1" name="area"></textarea>
</form>

效果：