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

古城微笑少年丶 2022-08-19 11:25 446阅读 0赞

1.首先需要在官方网站下载tinymce插件：  
[官网下载地址：https://www.tinymce.com/][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/][https_www.tinymce.com_docs_demo_basic-example]  
详细使用方法还是参照官方文档比较靠谱。。。。

[https_www.tinymce.com]: https://www.tinymce.com/
[https_www.tinymce.com_docs_demo_basic-example]: https://www.tinymce.com/docs/demo/basic-example/

发表评论取消回复

表情：

评论列表（有 0 条评论，446人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue3.3-TinyMCE：TinyMCE富文本编辑器基础使用

一、TinyMCE官网 [GitHub - tinymce/tinymce][GitHub - tinymce_tinymce] [TinyMCE中文文档中文手册][T

女爷i/ 2024年03月22日 23:00/ 0 赞/ 123 阅读

相关在 Vue 项目中引入 tinymce 富文本编辑器前端

[https://www.cnblogs.com/wisewrong/p/8985471.html][https_www.cnblogs.com_wisewrong_p_898

小灰灰/ 2023年05月22日 11:28/ 0 赞/ 10 阅读

相关 tinymce富文本编辑器链接地址

用过了wangEditor,summernote,搜到tinymce这个中文链接，抽时间想试试 [tinymce][] 这个富文本编辑器，存个记录. [tiny

一时失言乱红尘/ 2023年02月25日 03:43/ 0 赞/ 2 阅读

相关 vue使用tinymce5富文本编辑器

目录效果图：客户端： view/scwz/index.vue: view/wzlb/index.vue: view/wzlbEdit.vue: u

短命女/ 2023年01月16日 04:49/ 0 赞/ 375 阅读

相关 vue富文本编辑器tinymce

一、概述 TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。同类程序有：UEditor、Kindeditor、Simditor、CKEditor、wangE

待我称王封你为后i/ 2022年11月17日 05:09/ 0 赞/ 379 阅读

相关富文本编辑器-tinymce的各种应用

为什么用这个编辑器？ pc和H5皆可，纯粹的html？vue？angular？react？皆可简单，直接，输出dom 功能强大，你想要的几乎都有了

分手后的思念是犯贱/ 2022年10月16日 02:53/ 0 赞/ 375 阅读

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

1.首先需要在官方网站下载tinymce插件： [官网下载地址：https://www.tinymce.com/][https_www.tinymce.com] 2.将

古城微笑少年丶/ 2022年08月19日 11:25/ 0 赞/ 447 阅读

相关 Vue富文本编辑器 tinymce

1. 介绍tinymce 1.1 查看官网[https://www.tiny.cloud/][https_www.tiny.cloud] 1.2 查看样子 !

╰+哭是因爲堅強的太久メ/ 2022年04月23日 05:28/ 0 赞/ 378 阅读

相关 Django 之富文本编辑器-tinymce

这里的富文本编辑器以 tinymce 为例。环境：ubuntu 16.04 + django 1.10 + python 2.7 ubuntu安装tinymce： py

╰半夏微凉°/ 2022年03月08日 16:42/ 0 赞/ 357 阅读

相关 Tinymce富文本编辑器实现步骤

一 Tinymce可视化编辑器参考：[https://panjiachen.gitee.io/vue-element-admin/\/components/tinymc

向右看齐/ 2021年07月24日 14:46/ 0 赞/ 598 阅读