tinymce富文本使用详解

1、不要去看tinymce的中文翻译的,可能是低版本的使用方式,最新的tinymce.init和中文班上面的存在不太一样的情况。下面介绍最简单的使用方面及遇到问题的解法。

2、在tinymce上面注册一个账号。会有这样的快速生成的案例。

3、直接把上面的代码copy到你的项目中就可以直接的查看效果的。

<textarea id="tinydemo" name="content" v-model="content">
</textarea> 

   v-model="content" 就可以回显获取的编辑器的内容

 4、获取文档编辑的内容

const content = tinymce.activeEditor.getContent();

5、虽然上面的已经可以很好的展示了,但是会提示一些信息。

   this domain is not registered with Tiny Cloud . Please review your approved domains

那我们之需要到

添加上对应的域名即可。

除了上面的方式外我们还可以通过本地的引用js就可以了。下面是下载的方法:

 打开连接 https://www.tiny.cloud/get-tiny/self-hosted/ 出现下载的界面

 点击下载即可。

到现在就可以去使用了

补充:

1、出现系统可能不会保存您所作的更改

解决方案是把  plugins 下面的 autosave去掉

添加汉化 

1、此次的解决方法是参看tiny 的中文文档 

  此处添加tiny 的中文文档的截图和链接

tiny 的中文文档

并附上汉化包

   

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 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、付费专栏及课程。

余额充值