如何从TinyMCE文本编辑器获取数据
时间：2020-02-23 14:33:09 来源:igfitidea点击:
在本教程中，我们将学习从TinyMCE文本编辑器获取数据。
需求
我们将需要以下物品。
- 文本编辑器(例如SublimeText，TextMate，Coda，NotePad ++)或者IDE(例如Eclipse)
- Web浏览器，例如Chrome或者Firefox
- TinyMCE
- jQuery
假设条件
假定您已完成TinyMCE的设置。
要了解有关TinyMCE设置的更多信息，请查看本教程。
所以开始吧...
项目文件夹的结构如下所示...
tinymce | +--js | | | +-- jquery.min.js | +--plugin | | | +--tinymce | | | +-- some folders | | | +-- init-tinymce.js | | | +-- tinymce.min.js | +-- index.html
步骤1：创建项目
在tinymce项目文件夹中创建getdata.html文件。
在js文件夹中创建getdata.js文件。
该文件将包含我们将要编写JavaScript代码。
现在项目文件夹将如下所示...
tinymce | +--js | | | +-- getdata.js | | | +-- jquery.min.js | +--plugin | | | +--tinymce | | | +-- some folders | | | +-- init-tinymce.js | | | +-- tinymce.min.js | +-- getdata.html | +-- index.html
步骤2：编写代码
打开getdata.html文件并编写以下代码。
<!DOCTYPE html> <html> <head> <title>TinyMCE - Get Data</title> </head> <body> <form id="get-data-form" method="post"> <textarea class="tinymce" id="texteditor"></textarea> <input type="submit" value="Get Data"> </form> <div id="data-container"> </div> <!-- javascript --> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="plugin/tinymce/tinymce.min.js"></script> <script type="text/javascript" src="plugin/tinymce/init-tinymce.js"></script> <script type="text/javascript" src="js/getdata.js"></script> </body> </html>
打开getdata.js文件并编写以下代码。
$(document).ready(function(){
$("#get-data-form").submit(function(e){
var content = tinymce.get("texteditor").getContent();
$("#data-container").html(content);
return false;
});
});
