tinymce富文本编辑器使用到二开

tinymce


tinymce 一款现代化的富文本编辑器,有专门团队维护,是目前主流的富文本编辑器选择。

安装注意事项:

  1. 有两种方案分别是安装对应的vue/react组件,然后直接用组件,或者直接使用tinymce去按原生操作
  2. 会报找不到文件的错误,你需要把tinymce都复制
    到public里

安装 tinymce 和 @tinymce/tinymce-vue (react组件 @tinymce/tinymce-react)

 页面引入:

<template>
  <nav>
    <div id="mytinymce"></div>
  </nav>
</template>
<script setup>

import tinymce from "tinymce";
import { onMounted } from "vue";
onMounted(()=>{
  tinymce.init({
    selector:"#mytinymce" // 选择节点树
  })

})
</script>

<style lang="less">
</style>

 报错解决方案: 在node_modules文件夹中找到文件 复制放到public下 的js文件夹下

 

 隐藏不需要的部分:

 组件的使用方式:

import Editor from "@tinymce/tinymce-vue";

let initObj = {

  selector: "#mytinymce", // 选择节点树

  statusbar: true,

  menubar: true,

  toolbar: true,

};

<Editor  id="mytinymce" :init="initObj"></Editor>

 自定义样式:

添加skin 属性,value为 skins下ui 下的 目录名

 skin_url 自定义皮肤

  1. http://localhost:8080/myskin/skin.min.css
  2. http://localhost:8080/myskin/content.min.css

 按照报错提示新建这两个css文件 ,这里复制暗黑风格的css样式代码

 输入区域是一个iframe 

 这里要注意目录

图标样式:同理

 中文化:

 在官方文档下载 自己需要的语言包 并解压到 public下 

 自己选择工具栏内容和排序:

 

 

 

 

 

 

 

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以通过以下步骤来使用tinymce富文本编辑器: 1. 引入tinymce资源文件: 首先,你需要在你的项目中引入tinymce的资源文件。你可以从官方网站下载或者使用CDN链接。在你的HTML文件中添加以下代码来引入tinymce的资源文件: ```html <script src="https://cdn.tiny.cloud/1/your-api-key/tinymce/5/tinymce.min.js"></script> ``` 请将"your-api-key"替换为你自己的API密钥。 2. 创建一个textarea元素: 在你的HTML文件中,创建一个textarea元素来作为tinymce编辑器的容器。例如: ```html <textarea id="myTextarea"></textarea> ``` 3. 初始化tinymce: 使用以下代码来初始化tinymce编辑器: ```javascript tinymce.init({ selector: '#myTextarea' }); ``` 这将把id为"myTextarea"的textarea元素转换成一个tinymce编辑器。 4. 配置编辑器选项: 你可以根据需要配置编辑器的选项,比如设置编辑器的语言、工具栏按钮、插件等。你可以在初始化tinymce时传入一个选项对象来配置编辑器。例如: ```javascript tinymce.init({ selector: '#myTextarea', language: 'zh_CN', plugins: 'link image code', toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | code' }); ``` 这个例子中,我们设置了编辑器的语言为中文,加载了链接、图片和代码插件,并且设置了工具栏按钮。 5. 更多功能和配置: tinymce有很多其他的功能和配置,你可以参考官方文档来了解更多详细信息。官方文档提供了丰富的示例和教程,帮助你快速上手和使用tinymce富文本编辑器。你可以在官方网站的文档页面找到更多信息。 希望这些步骤可以帮助到你使用tinymce富文本编辑器。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [在 Vue 项目中引入 tinymce 富文本编辑器的完整代码](https://download.csdn.net/download/weixin_38688855/12760354)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [tinymce富文本编辑器使用](https://blog.csdn.net/weixin_44867717/article/details/128167874)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值