今天在做项目的时候,涉及到要做一个类似于文章上传的功能,因为毕竟以前没有特地研究过,反正肯定直接使用默认的textarea感觉不是那么好,就想到我们csdn上写文章,肯定是用了富文本编辑器。当时就想弄一个出来,经过一番研究后,决定使用tinymce作为编辑器,而事实上他也并没有让我失望,功能也异常的强大。
好的,这里回归正题,开始记录使用过程:
- 打开TinyMCE中文文档(去官网也可以,推荐有英文基础的朋友去看哈)
- 点击这个下载链接进行下载,当然最好是下载到本地,如果不想下载也可以去官方网站注册账号申请属于自己的http链接导入或者去cdn网站引用相应cdn,看个人喜好。
- 在前端页面引用相应js
<script src="../../js/tools/tinymce/tinymce.min.js"></script>
<!--不要忘记引用jquery哦 -->
<script src="../../vendor/jquery/jquery.min.js"></script>
- 使用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文档。