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

350 字

2 分钟

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

2019-12-11

2024-07-20

博客

tinymce

/

javascript

开始#

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

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

具体用法#

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

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

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

1
//第一种：
2
//使用setup
3
var data = "<p>这是一个P标签</p><h1>这是一个H1标签</h1><p><em>这是一个斜体字</em></p>";
4
tinymce.init({
5
            selector: '#mytextarea',
6
            setup: function (editor) {
7
                editor.on('init', function (e) {
8
                    console.log('初始化完成');
9
                    tinymce.activeEditor.setContent(data);
10
                });
11
            }
12
        })
13

14
//________________________________________________________________________________________
15

16
//第二种
17
//使用.then回调函数
18
var data = "<p>这是一个P标签</p><h1>这是一个H1标签</h1><p><em>这是一个斜体字</em></p>";
19
tinymce.init({
20
            selector: '#mytextarea',
21
        }).then(resolve => {
22
           tinymce.activeEditor.setContent(data);
23
        });