• uEditor富文本编辑器


    在配合vue和webpack使用时,在严格模式下注意会报错,需要修改配置。


    我采用的方式:————不建议全部取消严格模式,因为一些插件必须要再严格模式才能运行的
      对UEditor的严格模式报错文件,取消严格模式:
          然后就没问题了。
    {
      "presets": ["vue-app"],
     "ignore": [
        './src/assets/uEditor/ueditor.all.js'
      ]
    }

    常用的方法:

    1. 实例化编辑器到id为 container 的 dom 容器上:
       var ue = UE.getEditor('container');
    2. 设置编辑器内容:
        ue.setContent('<p>hello!</p>');
    3. 追加编辑器内容:
        ue.setContent('<p>new text</p>', true);
    4. 获取编辑器html内容:
        var html = ue.getContent();
    5. 获取纯文本内容:
        ue.getContentTxt();
    6. 获取保留格式的文本内容:
        ue.getPlainTxt();
    7. 判断编辑器是否有内容:
        ue.hasContents();
    8. 让编辑器获得焦点:
        ue.focus();
    9. 让编辑器失去焦点
        ue.blur();
    10. 判断编辑器是否获得焦点:
        ue.isFocus();
    11. 设置当前编辑区域不可编辑:
        ue.setDisabled();
    12. 设置当前编辑区域可以编辑:
        ue.setEnabled();
    13. 隐藏编辑器:
        ue.setHide();
    14. 显示编辑器:
        ue.setShow();
    15. 清空内容:
        ue.execCommand('cleardoc');
    16. 读取草稿箱:
        ue.execCommand('drafts');
    17. 清空草稿箱:
      ue.execCommand('clearlocaldata');
    
    

    配置工具栏:

    <script type="text/javascript" src="ueditor/ueditor.config.js"></script>
    <script type="text/javascript" src="ueditor/ueditor.all.min.js"> </script>
    <script type="text/javascript" src="ueditor/lang/zh-cn/zh-cn.js"></script>
    <script>
    $(function() {
    //本来是这样的:UE.getEditor('editor'); 传入参数后就是下面那样子了,toolbars里的就是工具的图标
    UE.getEditor('editor', {
    toolbar: [
    ['fullscreen', 'source', 'undo', 'redo', 'bold', 'italic', 
    'underline','fontborder', 'backcolor', 'fontsize', 'fontfamily', 
    'justifyleft', 'justifyright','justifycenter', 'justifyjustify', 
    'strikethrough','superscript', 'subscript', 'removeformat',
    'formatmatch','autotypeset', 'blockquote', 'pasteplain', '|',
    'forecolor', 'backcolor','insertorderedlist', 'insertunorderedlist', 
    'selectall', 'cleardoc', 'link', 'unlink','emotion', 'help']
    ]
    });
    })
    </script>
    
    配置项里用竖线 ‘|’ 代表分割线
    完整的按钮列表
    
    toolbars: [
    [
    'anchor', //锚点
    'undo', //撤销
    'redo', //重做
    'bold', //加粗
    'indent', //首行缩进
    'snapscreen', //截图
    'italic', //斜体
    'underline', //下划线
    'strikethrough', //删除线
    'subscript', //下标
    'fontborder', //字符边框
    'superscript', //上标
    'formatmatch', //格式刷
    'source', //源代码
    'blockquote', //引用
    'pasteplain', //纯文本粘贴模式
    'selectall', //全选
    'print', //打印
    'preview', //预览
    'horizontal', //分隔线
    'removeformat', //清除格式
    'time', //时间
    'date', //日期
    'unlink', //取消链接
    'insertrow', //前插入行
    'insertcol', //前插入列
    'mergeright', //右合并单元格
    'mergedown', //下合并单元格
    'deleterow', //删除行
    'deletecol', //删除列
    'splittorows', //拆分成行
    'splittocols', //拆分成列
    'splittocells', //完全拆分单元格
    'deletecaption', //删除表格标题
    'inserttitle', //插入标题
    'mergecells', //合并多个单元格
    'deletetable', //删除表格
    'cleardoc', //清空文档
    'insertparagraphbeforetable', //"表格前插入行"
    'insertcode', //代码语言
    'fontfamily', //字体
    'fontsize', //字号
    'paragraph', //段落格式
    'simpleupload', //单图上传
    'insertimage', //多图上传
    'edittable', //表格属性
    'edittd', //单元格属性
    'link', //超链接
    'emotion', //表情
    'spechars', //特殊字符
    'searchreplace', //查询替换
    'map', //Baidu地图
    'gmap', //Google地图
    'insertvideo', //视频
    'help', //帮助
    'justifyleft', //居左对齐
    'justifyright', //居右对齐
    'justifycenter', //居中对齐
    'justifyjustify', //两端对齐
    'forecolor', //字体颜色
    'backcolor', //背景色
    'insertorderedlist', //有序列表
    'insertunorderedlist', //无序列表
    'fullscreen', //全屏
    'directionalityltr', //从左向右输入
    'directionalityrtl', //从右向左输入
    'rowspacingtop', //段前距
    'rowspacingbottom', //段后距
    'pagebreak', //分页
    'insertframe', //插入Iframe
    'imagenone', //默认
    'imageleft', //左浮动
    'imageright', //右浮动
    'attachment', //附件
    'imagecenter', //居中
    'wordimage', //图片转存
    'lineheight', //行间距
    'edittip ', //编辑提示
    'customstyle', //自定义标题
    'autotypeset', //自动排版
    'webapp', //百度应用
    'touppercase', //字母大写
    'tolowercase', //字母小写
    'background', //背景
    'template', //模板
    'scrawl', //涂鸦
    'music', //音乐
    'inserttable', //插入表格
    'drafts', // 从草稿箱加载
    'charts', // 图表
    ]
    ]
  • 相关阅读:
    C语言volatile解析
    使用中断开关实现全局变量互斥访问
    CentOS7下gogs安装总结
    iOS Xcode: linker command failed with exit code 1 (use -v to see invocation) 处理方法
    C# 10进制与62进制互转 数据大无压力 10进制与72,96进制任意转换
    Web网站的性能测试工具
    NetCore跨平台桌面框架Avalonia的OSX程序打包
    C# 类中静态变量静态构造函数执行顺序
    mac osx下虚拟主机配置
    React+ES6+Webpack深入浅出
  • 原文地址:https://www.cnblogs.com/LChenglong/p/8028874.html
Copyright © 2020-2023  润新知