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

来源:互联网 发布:什么是淘宝企业店铺 编辑:程序博客网 时间:2024/06/06 23:10

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/
详细使用方法还是参照官方文档比较靠谱。。。。

0 0