如何在自己的项目中引入tinymce富文本编辑器

1.首先需要在官方网站下载tinymce插件:
官网下载地址:https://www.tinymce.com/
2.将下载到的文件放入自己的项目中
3.在显示html页面引入jquery和tinymce js文件

<script type="text/javascript" src="/app_3th/jquery/jquery-1.12.0.min.js"></script>
 <script type="text/javascript" src="/app_3th/tinymce/js/tinymce/tinymce.min.js"></script>

然后在需要渲染富文本的页面中添加javascript语句:

<script>
    tinymce.init({
        mode: 'textareas',
        height: 500,
        theme: 'modern',
        plugins: [
            'advlist autolink lists link image charmap print preview hr anchor pagebreak',
            'searchreplace wordcount visualblocks visualchars code fullscreen',
            'insertdatetime media nonbreaking save table contextmenu directionality',
            'emoticons template paste textcolor colorpicker textpattern imagetools'
        ],
        toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
        toolbar2: 'print preview media | forecolor backcolor emoticons',
        image_advtab: true,
        templates: [
            { title: 'Test template 1', content: 'Test 1' },
            { title: 'Test template 2', content: 'Test 2' }
        ],
        content_css: [
            '//fast.fonts.net/cssapi/e6dc9b99-64fe-4292-ad98-6974f93cd2a2.css',
            '//www.tinymce.com/css/codepen.min.css'
        ]
    });

</script>

这些初始化信息是可以自定义的,官方网站有demo介绍,可以跟自己的需要改动
https://www.tinymce.com/docs/demo/basic-example/
详细使用方法还是参照官方文档比较靠谱。。。。

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值