tinymce插件使用

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

  1. 打开TinyMCE中文文档(去官网也可以,推荐有英文基础的朋友去看哈)
  2. 点击这个下载链接进行下载,当然最好是下载到本地,如果不想下载也可以去官方网站注册账号申请属于自己的http链接导入或者去cdn网站引用相应cdn,看个人喜好。
  3. 在前端页面引用相应js
<script src="../../js/tools/tinymce/tinymce.min.js"></script>
<!--不要忘记引用jquery哦 -->
<script src="../../vendor/jquery/jquery.min.js"></script>
  1. 使用js进行TinyMCE初始化
    html部分代码:
<!-- 用于显示富文本编辑器 -->
<textarea id="details" name="details"></textarea>

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文档
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值