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

如果你想用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);
        });

我们可以看到刚启动编辑器就有内容了HTML源码也是整齐的

(不要吐槽中文和工具数量,这些是我后面设置的,没有放进代码片里)

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Vue3使用TinyMCE富文本编辑器导入Word文件,通常需要通过插件来实现,因为TinyMCE本身并不直接支持Word文档导入。一个常用的插件是`file-image-upload-plugin`,这个插件允许用户上传各种类型的文件,包括Word文档。 以下是大致步骤: 1. 安装插件: 首先,在项目安装TinyMCE的file-image-upload-plugin: ``` npm install @tinymce/file-image-upload ``` 2. 配置插件: 在`main.js`或你的组件里,初始化TinyMCE并配置插件: ```javascript import { TinyEditor } from '@tinymce/tinymce-vue' import FileImageUpload from '@tinymce/file-image-upload' Vue.use(TinyEditor) Vue.use(FileImageUpload) // 初始化TinyMCE tinymce.init({ plugins: 'file_image_upload', selector: 'textarea', // 替换为你实际的富文本输入元素 image_dimensions_sample: true, file_picker_callback: function (callback) { callback( /* { type: 'custom', async: true, upload: function (blobInfo, success, failure) { const formData = new FormData(); formData.append('file', blobInfo.blob(), blobInfo.name()); await axios.post('/api/upload-word', formData) .then(response => { if (response.status === 200) { success({ url: response.data.url }); } else { failure(); } }) .catch(failure); }, }*/ ); }, }); ``` 这里的`file_picker_callback`是一个自定义函数,用于处理文件上传。你需要替换`axios.post`部分为实际的文件上传服务,并根据返回数据更新`success`回调的URL。 3. 文件上传逻辑: 这部分依赖于你的服务器端API,你需要创建一个接收Word文件、转换并保存到数据库或服务器存储的地方,然后返回新的URL给前端。 **注意**:这只是一个基础示例,实际应用可能需要处理更多边界情况,例如错误处理、文件类型验证等。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值