首页 > 其他分享 >如何将之前编辑的文章HTML源代码导入到TinyMCE编辑器中

如何将之前编辑的文章HTML源代码导入到TinyMCE编辑器中

时间:2023-04-17 21:47:20浏览次数:58  
标签:导入到 TinyMCE tinymce activeEditor 源代码 data setContent

如果你想用TinyMCE来修改你之前写的文章那么你需要将源代码放到TinyMCE中,如果服务器把HTML源码发给我们可是我们应该怎样调用?

方法为使用 tinymce.activeEditor.setContent()这个函数

具体用法为:

 tinymce.activeEditor.setContent()   //设置TinyMCE编辑器里的内容源代码
 
 tinymce.activeEditor.getContent()   //获取TinyMCE编辑器里的内容源代码

可是我们发现直接放到HTML文件里执行无法获取到这个函数,这是因为TinyMCE这个时候还没有初始化完成,也就是说我们还无法调取这个函数,必须要等到TinyMCE彻底初始化完成后才能调用,所以我们这里有两种写法获取初始化完成的消息。

//第一种:
//使用setup
var data = "<p>这是一个P标签</p><h1>这是一个H1标签</h1><p><em>这是一个斜体字</em></p>";
tinymce.init({
            selector: '#mytextarea',
            setup: function (editor) {
                editor.on('init', function (e) {
                    console.log('初始化完成');
                    tinymce.activeEditor.setContent(data);
                });
            }
        })
 
//________________________________________________________________________________________
 
//第二种
//使用.then回调函数
var data = "<p>这是一个P标签</p><h1>这是一个H1标签</h1><p><em>这是一个斜体字</em></p>";
tinymce.init({
            selector: '#mytextarea',
        }).then(resolve => {
           tinymce.activeEditor.setContent(data);
        });
 

 

标签:导入到,TinyMCE,tinymce,activeEditor,源代码,data,setContent
From: https://www.cnblogs.com/mydyxy/p/17327598.html

相关文章

  • TinyMCE上传图片后端处理写法
    写法有两种,一种是先把图片转换成base64后再本地解析显示,这样可以直接将图片储存在HTML文件中,如果图片过多可能会让HTML文件过大,或者你可以将已经转码成base64的图片上传到服务器后服务器再转码成原jpg或png格式。另一种是方法是通过POST把图片传输给服务器后,服务器再返回图片地址......
  • vue3使用tinymce
    第一种方法:通过使用key云端调用安装@tinymce/tinymce-vuenpmi@tinymce/tinymce-vue去官网注册一个账号获取key,然后去https://www.tiny.cloud/get-tiny/language-packages/下载语言包,放在目录下的public里在组件中使用,工具栏可以是字符串或者数组,一行字符串可以看做......
  • tinymce封装成vue3组件
    封装成组件<scriptsetup>importEditorfrom'@tinymce/tinymce-vue'//引入tinymce开启本地模式import'tinymce/tinymce'//引入图标和主题等import'tinymce/themes/silver/theme'import'tinymce/icons/default/icons'import'tin......
  • 直播平台源代码,图片放大浏览功能
    直播平台源代码,图片放大浏览功能HTML <view><view><blockv-for="(item,index)infen"><view><image@click="previewImage(index)":src="item.picture"mode=""></image></view></block><......
  • tinymce来自word文档粘贴的优化
    前提条件src/components/TEditor.vue里,引入自带的paste插件在配置项(init)里的plugins里添加paste关于粘贴图片自动上传【效果】用户复制一个本地图片或者截图后,在编辑器里粘贴,首先以blob文件流形式展示;然后执行自动上传到接口,并在拿到图片地址后将blob文件流地址替换成真......
  • ahooks 源代码学习(一)
    无论人生上到哪一层台阶,阶下有人在仰望你,阶上亦有人在俯视你。你抬头自卑,低头自得,唯有平视,才能看见真正的自己。ahooks好久之前就知道,但是几乎不怎么使用,最近正在尝试使用一些,而且也对其中的一些简单的hooks的原理感兴趣,下面记录几个吧1.第一个当然是最简单的(由浅入深)useTo......
  • 低代码平台源代码交付的重要性,别再傻傻被骗了……
    一、前言作为这两年IT界的风口,低代码在众人眼里已经不是什么陌生的概念。对标于传统的纯代码开发,低代码是一种快速开发软件(应用程序)的方法,平台通过对大量功能与场景做提前封装,使得用户可以在可视化的基础上,通过拖拉拽就能完成开发,手动编码非常少。这种可视化的开发大大方便了开......
  • 深度学习检测不准确智能电表:一个案例研究 python源代码
    深度学习检测不准确智能电表:一个案例研究python源代码,代码按照高水平文章复现,保证正确根据用电情况检测出故障的智能电表,并针对其进行更换,可以节省大量的资源。为此,我们开发了一种基于长短期记忆(long-termmemory,LSTM)和改进的卷积神经网络(convolutionalneuralnetwork,......
  • 电力系统的物理信息神经网络python源代码 介绍了一种在电力系统中应用物理信息神经网
    电力系统的物理信息神经网络python源代码代码按照高水平文章复现介绍了一种在电力系统中应用物理信息神经网络的框架。利用控制电力系统的基本物理定律,并受到机器学习领域最新发展的启发,我们提出了一种神经网络训练程序,它可以利用广泛的数学模型来描述电力系统的行为,包括稳态和......
  • 基于大数据的人工神经网络高效发电预测系统 python源代码 提出了一种发电预测方案,该方
    基于大数据的人工神经网络高效发电预测系统python源代码,代码按照高水平文章复现,保证正确提出了一种发电预测方案,该方案能够以接近耗电量的速度预测所需的电量。该方案使用大数据分析来处理每个州在过去20年收集的电力管理数据。然后使用神经网络(NN)模型训练系统,根据收集的数......