Simditor实现重新编辑功能

使用Simditor编辑器写了一篇文章之后,我对其进行重新编辑,将其文章内容重新回显在富文本编辑器内。
我将从数据库中读取到的内容放到textarea中,然后初始化Simditor和textarea后,应该就可以实现在线功能,
本该很简单的事情,没想到事情和想象的并不一样。

以下是代码:

<textarea id="editor1" name="article_content"  autofocus >
  <php
    echo $Content;//从数据库中读取到的内容
  ?>
</textarea>

<script>
$(function() {
    editor = new Simditor({
      textarea: $('#editor1'),
      pasteImage: true,//是否允许粘帖上传图片
      defaultImage: 'http://www.bytekits.com/theme/comm/log.png',
      placeholder: '发表博文...',
      upload: {
            url:'upload.php',
            params: null,
            fileKey: 'upload_file',
            connectionCount: 1,
            leaveConfirm: '文件正在上传,您确定离开?'
            },
     codeLanguages: '',
      toolbar : [ 'title', 'bold', 'italic', 'underline', 'strikethrough','color', 'ol', 'ul', 'blockquote', 'code', 'table', 'link', 'image', 'hr', 'indent', 'outdent' ]
    });

  });

</script>

这样你会发现,可以展示在富文本编辑器内,但是如果文章中有代码片段,会显示灰色空白。
原因是Simditor把展示的代码片段也当作Html标签内容进行了解析,这样的话,代码片段成了页面内部html代码的一部分了。
我的思路是:将其代码片段变成文本字符串内容,然后直接在Simditor中显示字符串,而其他的不是代码片段的内容不动。
那要怎么进行修改呢,首先,需要新建一个div,让其隐藏

 <div id="contentdiv"  style="display:none">
       文章内容
  </div>

这个div最好放在你的simditor实例化的textarea前面。

然后,我们需要在富文本编辑器实例化的代码前面写这么几行代码:

<!--新增的div 用于存储从数据库中读取的内容-->
 <div id="contentdiv"  style="display:none">
  <?php echo $Content;?>
  </div>


<textarea id="editor1" name="article_content"  autofocus >
</textarea>

<script>
$(function() {
    //装填到textarea中
    $("#editor1").text($("#contentdiv").html());


    editor = new Simditor({
      textarea: $('#editor1'),
      pasteImage: true,//是否允许粘帖上传图片
      defaultImage: 'http://www.bytekits.com/theme/comm/log.png',
      placeholder: '发表博文...',
      upload: {
            url:'upload.php',
            params: null,
            fileKey: 'upload_file',
            connectionCount: 1,
            leaveConfirm: '文件正在上传,您确定离开?'
            },
     codeLanguages: '',
      toolbar : [ 'title', 'bold', 'italic', 'underline', 'strikethrough','color', 'ol', 'ul', 'blockquote', 'code', 'table', 'link', 'image', 'hr', 'indent', 'outdent' ]
    });

  });

</script>

我们获取div中的html内容中的内将其全部弄成字符串,然后将生成的的文章内容,放入simditor实例化的textarea标签内。

这样的话,富文本编辑器就会完整的显示其文章内容。

取消
感谢您的支持,我会继续努力的!
扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

Powered by bytekits.com,汇天下文字,成非凡梦想!!!