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 -->
< type=\"text/ \" src=\"./tinymce/tinymce.min.js\"></ >
< type=\"text/ \">
tinymce.init({
selector: \"textarea\"
});
</ >
<!-- 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 -->
< type=\"text/ \" src=\"./tinymce/tinymce.min.js\"></ >
< type=\"text/ \">
tinymce.init({
selector: \"textarea\",
language:\"zh_CN\"
});
</ >
<!-- Place this in the body of the page content -->
<form method=\"post\">
<textarea></textarea>
</form>
还可以用高级的配置：
tinymce代码：
<!-- Place inside the <head> of your HTML -->
< type=\"text/ \" src=\"./tinymce/tinymce.min.js\"></ >
< type=\"text/ \">
tinymce.init({
selector: \"textarea#elm1\",
theme: \"modern\",
width: 300,
height: 300,
language:\"zh_CN\",
plugins: [
\"advlist auto 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: [
{ : \'Bold text\', inline: \'b\'},
{ : \'Red text\', inline: \'span\', styles: {color: \'#ff0000\'}},
{ : \'Red header\', block: \'h1\', styles: {color: \'#ff0000\'}},
{ : \'Example 1\', inline: \'span\', classes: \'example1\'},
{ : \'Example 2\', inline: \'span\', classes: \'example2\'},
{ : \'Table styles\'},
{ : \'Table row 1\', selector: \'tr\', classes: \'tablerow1\'},
]
});
</ >
<!-- Place this in the body of the page content -->
<form method=\"post\">
<textarea id=\"elm1\" name=\"area\"></textarea>
</form>
不过这里没有图片上传的功能，可能需要jquery版本的吧，我再去看看。
继续阅读与本文标签相同的文章
上一篇 :
深度度量学习中的损失函数
下一篇 :
tinyMCE编辑器实用方法讲解
-
为促进人工智能产业发展，北京推出公共数据开放新举措
2026-05-15栏目： 教程
-
Graboid：首例在Docker Hub映像中发现的加密劫持蠕虫
2026-05-15栏目： 教程
-
5G在物流行业的应用
2026-05-15栏目： 教程
-
大数据来帮忙，打造滨江区一站式生态保护系统！
2026-05-15栏目： 教程
-
黑客曾公开51区绝密资料，UFO是人为制造？中国已掌握“UFO”技术
2026-05-15栏目： 教程