富文本编辑器实践

    xiaoxiao2023-03-24  2

    1.选择

    国产编辑器 百度ueditor 和 kindeditor 国外编辑器 bootstrap-wysiwyg 和 simditor

    百度ueditor功能丰富,文档易读,我们使用ueditor为例。

    2.实践

    ueditor分为两大类:UE和UM(UMeditor,简称UM,是 ueditor 的简版) 下载umeditor,解压后在文件夹中建立一个test.html文件:

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>umesitor示例</title> <link rel="stylesheet" href="./themes/default/css/umeditor.css"> </head> <body> <script src="./third-party/jquery.min.js"></script> <!-- 配置文件 --> <script type="text/javascript" src="./umeditor.config.js"></script> <!-- 编辑器源码文件 --> <script type="text/javascript" src="./umeditor.js"></script> <!-- 语言包文件 --> <script type="text/javascript" src="./lang/zh-cn/zh-cn.js"></script> <!-- 加载编辑器的容器 --> <script id="container" name="content" type="text/plain" style="width:600px;height:200px;"> 这里写你的初始化内容 </script> <!-- 实例化编辑器代码 --> <script type="text/javascript"> $(function() { window.um = UM.getEditor('container', { /* 传入配置参数,可配参数列表看umeditor.config.js */ //toolbar: ['undo redo | bold italic underline'] //配置的工具条,注释掉就可以使用默认的工具条 }); }); </script> </body> </html>

    获取编辑器的内容

    /* 获取编辑器内容 */ var allHtml = um.getAllHtml(); var html = um.getContent(); var txt = um.getContentTxt();

    参考资料:

    https://github.com/fex-team/umeditor

    转载请注明原文地址: https://ju.6miu.com/read-1200238.html
    最新回复(0)