天天看点

PHP 富文本编辑器demo

包含文件

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>wangEditor demo</title>
</head>
<body>
<div id="editor">

</div>
<input type="hidden" name="content" id="content" value="">
<!-- 注意, 只需要引用 JS,无需引用任何 CSS !!!-->
<script type="text/javascript" src="wangEditor.js"></script>
<script type="text/javascript">
    //5秒自动保存
    window.setInterval(function() {
      $('#content').click();
    },5000)
    var E = window.wangEditor
    var editor = new E('#editor')
    // 自定义菜单配置
    editor.customConfig.menus = [
        //'head',  // 标题
        //'bold',  // 粗体
        //'fontSize',  // 字号
        //'fontName',  // 字体
        //'italic',  // 斜体
        //'underline',  // 下划线
        //'strikeThrough',  // 删除线
        //'foreColor',  // 文字颜色
        //'backColor',  // 背景颜色
        //'link',  // 插入链接
        //'list',  // 列表
        'justify',  // 对齐方式
        //'quote',  // 引用
        //'emoticon',  // 表情
        'image',  // 插入图片
        'table',  // 表格
        //'video',  // 插入视频
        //'code',  // 插入代码
        //'undo',  // 撤销
        //'redo'  // 重复
    ],
        // 下面两个配置,使用其中一个即可显示“上传图片”的tab。但是两者不要同时使用!!!
        editor.customConfig.uploadImgShowBase64 = true   // 使用 base64 保存图片
        //editor.customConfig.uploadImgServer = 'upload'
        editor.create()
        //editor.$textElem.attr('contenteditable', false)//禁止编辑
        //editor.txt.html('<p>用 JS 设置的内容</p>')
        //document.getElementById('editor').addEventListener('click', function () {
        document.getElementById('content').addEventListener('click', function () {

                document.getElementsByName("content")[0].value = editor.txt.html();

        })

        //}, false)
</script>
</body>
</html>
           

wangEditor.js

wangEditor.min.css

js,css文件官网下载