tinymce插件使用

今天在做项目的时候,涉及到要做一个类似于文章上传的功能,因为毕竟以前没有特地研究过,反正肯定直接使用默认的textarea感觉不是那么好,就想到我们csdn上写文章,肯定是用了富文本编辑器。当时就想弄一个出来,经过一番研究后,决定使用tinymce作为编辑器,而事实上他也并没有让我失望,功能也异常的强大。
好的,这里回归正题,开始记录使用过程:

  1. 打开TinyMCE中文文档(去官网也可以,推荐有英文基础的朋友去看哈)
  2. 点击这个下载链接进行下载,当然最好是下载到本地,如果不想下载也可以去官方网站注册账号申请属于自己的http链接导入或者去cdn网站引用相应cdn,看个人喜好。
  3. 在前端页面引用相应js



  1. 使用js进行TinyMCE初始化
    html部分代码:


js部分代码:

tinymce.init({
    selector: '#details',
    language: 'zh_CN',
    height: 500,
    plugins: 'print preview importcss  searchreplace autolink autosave save directionality  visualblocks visualchars fullscreen image link media  template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists  wordcount   imagetools textpattern noneditable help    charmap   quickbars  emoticons',
    mobile: {
        plugins: 'print preview importcss  searchreplace autolink autosave save directionality  visualblocks visualchars fullscreen image link media  template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists  wordcount   textpattern noneditable help   charmap  quickbars  emoticons'
    },
    menu: {
        tc: {
            title: '',
            items: 'addcomment showcomments deleteallconversations'
        }
    },
    menubar: 'file edit view insert format tools table tc help',
    toolbar: 'undo redo | bold italic underline strikethrough | fontselect fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent |  numlist bullist  | forecolor backcolor casechange   removeformat | pagebreak | charmap emoticons | fullscreen  preview save print | insertfile image media  template link anchor codesample | a11ycheck ltr rtl | showcomments addcomment',
    image_advtab: true,
    content_css: '//www.tiny.cloud/css/codepen.min.css',
});

提示:如需汉化需要去tinymce官网下载相应语言的汉化包,然后放置到目录下的langs包中。上方初始化使用的是高级文本编辑器。其他配置请参照相应API文档。
tinymce插件使用_第1张图片

你可能感兴趣的:(学习心得)