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

古城微笑少年丶 2022-08-19 11:25 423阅读 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 条评论，423人围观）

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

相关阅读

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

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

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

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

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

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

相关 vue富文本编辑器tinymce

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

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

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

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

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

相关 vue——PC段富文本编辑器的使用(tinymce)

最近在看别人的代码时，发现用的`富文本编辑器`并不是非常的好用，在上家公司时，也有用到富文本编辑器，在此记录一下。 ![在这里插入图片描述][watermark_type_

淡淡的烟草味﹌/ 2022年09月02日 00:48/ 0 赞/ 545 阅读

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

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

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

相关富文本编辑器tinymce获取文本内容和设置文本内容

1、如果当前页面只有一个编辑器：获取内容：tinyMCE.activeEditor.getContent() 设置内容：tinyMCE.activeEditor.

向右看齐/ 2022年05月12日 07:08/ 0 赞/ 544 阅读

相关 Vue富文本编辑器 tinymce

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

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

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

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

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

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

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

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