layui富文本编辑器-layui富文本编辑器内容如何显示

在使用layui富文本编辑器时，显示其编辑后的内容是一个常见的需求。解决方案主要分为两个步骤：一是获取编辑器中的内容；二是将获取到的内容渲染到指定的区域。

一、通过JavaScript获取并显示内容

要显示layui富文本编辑器的内容，需要确保已经正确引入了layui库，并初始化了富文本编辑器。下面是一个简单的例子，演示如何获取和显示编辑器内容：

html
<!-- 引入layui CSS -->

<!-- HTML结构 -->
<textarea id="editor"></textarea></p>

<div id="contentDisplay"></div>

<p><button id="showContent">显示内容</button></p>

<p><!-- 引入layui JS --></p>




layui.use('layedit', function(){
  var layedit = layui.layedit;
  // 建立编辑器
  var editIndex = layedit.build('editor');

  document.getElementById('showContent').addEventListener('click', function(){
    // 获取编辑器中的内容
    var content = layedit.getContent(editIndex);
    // 将内容设置到页面中指定位置
    document.getElementById('contentDisplay').innerHTML = content;
  });
});


<p>

这段代码创建了一个隐藏的<textarea>作为富文本编辑器的容器，一个用于显示内容的<div>，以及一个按钮来触发内容的显示。当点击“显示内容”按钮时，它会从编辑器中提取HTML内容，并将其插入到页面上的指定位置。

二、使用PHP等后端语言处理

如果是在服务器端开发中，比如用PHP处理表单提交的数据，那么可以先保存用户在富文本编辑器中输入的内容到数据库，然后在需要展示的地方查询出来再输出。这里以PHP为例：

假设我们有一个名为article.php的文件用于保存信息，其中包含对富文本编辑器内容的保存逻辑：

php
<?php
// 连接数据库...
$pdo = new PDO(/* 数据库连接参数 */);</p>

<p>if ($<em>SERVER['REQUEST</em>METHOD'] === 'POST') {
  $content = $_POST['content']; // 获取来自富文本编辑器的POST数据
  // 执行SQL语句保存数据...
}
?></p>


  <!-- 富文本编辑器 -->
  <textarea name="content" id="editor"></textarea>
  



layui.use('layedit', function(){
  var layedit = layui.layedit;
  layedit.build('editor'); // 初始化富文本编辑器
});


<p>

而在另一个页面（如view_article.php）中读取并显示这些内容：