Simditor简单实现重新编辑功能

Simditor简单实现重新编辑功能

木来 木来

我们可能会有这样的需求:

使用Simditor富文本编辑器写了一篇文章之后,我们对其进行重新编辑,将其文章内容重新回显在富文本编辑器内。

首先呢,我们将后台获取的内容,直接展示在你的编辑页面的富文本编辑器textarea内。

便可以在富文本编辑器内展示内容。

以下是代码:

<textarea id="editor1" name="article_content"  autofocus >
需要展示的文章内容
</textarea>
<script>
$(function() {
    var editor,toolbar;
    
   
    
    
    Simditor.locale = 'zh-CN';
    toolbar = ['title', 'bold', 'italic', 'underline', 'strikethrough', 'fontScale', 'color', '|', 'ol', 'ul', 'blockquote', 'code', 'table', '|', 'link', 'image', 'hr', '|', 'indent', 'outdent', 'alignment'];

    editor = new Simditor({
      textarea: $('#editor1'),
   
      toolbar: toolbar,
      pasteImage: true,//是否允许粘帖上传图片
      defaultImage: '<%=basePath%>asset/public/js/simditor/images/image.png',
      upload : {
            url : '<%=basePath%>article/qiniuUploadImg.action?Math.random()', //文件上传的接口地址
            params: null, //键值对,指定文件上传接口的额外参数,上传的时候随文件一起提交
            fileKey: 'ImageFile', //服务器端获取文件数据的参数名
            connectionCount: 3,
            leaveConfirm: '正在上传文件'
        } 
    });

    
  });
  
 
  
</script>

这样你会发现,可以展示在富文本编辑器内,但是如果文章中有代码片段,会显示灰色空白。

原因是Simditor把展示的代码片段也当作Html标签内容进行了解析,这样的话,代码片段成了页面内部html代码的一部分了。

我的思路是:将其代码片段变成文本字符串内容,然后直接在Simditor中显示字符串,而其他的不是代码片段的内容不动。

那要怎么进行修改呢,首先,需要新建一个div,让其隐藏

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

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

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

  <!--新增的div-->
        <div id="contentdiv"  style="display:none">
         ${requestScope.articleCustomObject.article_content}
        </div>
        
        
        
<textarea id="editor1" name="article_content"  autofocus >

</textarea>
<script>
$(function() {
    var editor,toolbar;
    
    var pre="";
    
    //获取div中的pre的个数
    var presize=$("#contentdiv pre").length;
    //遍历pre
    for(var i=0;i<presize;i++){
    pre=$("#contentdiv pre").eq(i).text();  
    $("#contentdiv pre").eq(i).text(pre);
    }
    //装填到textarea中
    $("#editor1").text($("#contentdiv").html());
    
  
    
    
    Simditor.locale = 'zh-CN';
    toolbar = ['title', 'bold', 'italic', 'underline', 'strikethrough', 'fontScale', 'color', '|', 'ol', 'ul', 'blockquote', 'code', 'table', '|', 'link', 'image', 'hr', '|', 'indent', 'outdent', 'alignment'];

    editor = new Simditor({
      textarea: $('#editor1'),
   
      toolbar: toolbar,
      pasteImage: true,//是否允许粘帖上传图片
      defaultImage: '<%=basePath%>asset/public/js/simditor/images/image.png',
      upload : {
            url : '<%=basePath%>article/qiniuUploadImg.action?Math.random()', //文件上传的接口地址
            params: null, //键值对,指定文件上传接口的额外参数,上传的时候随文件一起提交
            fileKey: 'ImageFile', //服务器端获取文件数据的参数名
            connectionCount: 3,
            leaveConfirm: '正在上传文件'
        } 
    });
    
   
 


    
    
  });
  
 
  
</script>

我们获取div中的html内容中pre,即代码段的个数。

然后对其进行遍历,将其全部弄成字符串,然后将最后都自定义好的文章内容,放入simditor实例化的textarea标签内。

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

0 条评论