放牧代码和思想
专注自然语言处理、机器学习算法
    愛しさ 優しさ すべて投げ出してもいい

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>

效果:

不过这里没有图片上传的功能,可能需要jquery版本的吧,我再去看看。

知识共享许可协议 知识共享署名-非商业性使用-相同方式共享码农场 » tinymce教程——安装tinymce

评论 欢迎留言

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

我的作品

HanLP自然语言处理包《自然语言处理入门》