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>
效果:
不过这里没有图片上传的功能,可能需要jquery版本的吧,我再去看看。