原生js富文本编辑器(原创)

所属分类:输入-丰富的输入

 16389  120  查看评论 (9)
分享到微信朋友圈
X
原生js富文本编辑器(原创) ie兼容9

更新时间:2020-09-04 00:15:41

更新说明:修改bug


更新时间:2020-09-03 12:15:17

页面引入js脚本文件即可,不依赖jq

使用方法

创建容器

<div id="inEditor"></div>

初始化编辑器

方法一

var lEditor = new Editor({
       ElemId:'inEditor',  //容器id
Height:'500'         //默认高度
})
lEditor.init()  初始化富文本编辑器

方法二

var lEditor = new Editor({
       ElemId:'inEditor',  //容器id
Height:'500'         //默认高度
}).init()

设置富文本编辑器内容:

lEditor.setEditorHtml('<h2>这是设置的富文本内容</h2>')

获取富文本编辑器内容:

lEditor.getEditorHtml()

自定义资源文件(图片、视频、音乐、附件)接口上传地址:

lEditor.FileConfig.FileImgPath='http://www.ningchy.com/MyIndex/public/img/'

自定义资源文件访问地址:

lEditor.FileConfig.FileImgUrl='http://www.ningchy.com/ImgFile/imgFile'

注意:资源文件上传成功后直接全路劲加载在富文本编辑器渲染,目前只有图片上传。视频、音乐、附件大同小异,暂时未做

自定义字体(支持多个或单个,中文和英文):

lEditor.setPubConfig.dataFont.windows.push({ ch: '宋体',en: 'SimSun'})   //添加单个字体
lEditor.setPubConfig.dataFont.windows = [{ ch: '宋体',en: 'SimSun'},{ch: '黑体',en: 'SimHei'},{ch: '微软雅黑',en: 'Microsoft Yahei'},{ch: '楷体',en: 'KaiTi'},{ch: 'Airal',en: 'Airal'},{ ch: '宋体',en: 'SimSun'}]    //添加多个字体
相关插件-丰富的输入

一款jQuery评论插件

jQuery评论插件,带表情,数量可随意添加,数据保存到本地缓存,刷新不丢失。
  丰富的输入
 22930  267

[力荐]表情选择器

完全自定义的表情选择器。
  丰富的输入
 63513  483

jquery仿牛客网的在线测评考试

实现在线模拟测评,仿照的是牛客网的测评页面
  丰富的输入
 41945  435

jQuery在线做试卷并查看答案

jQuery在线试卷,提交后查看答案、解析。题型包括 1单选2多选3判断4填空5问答8论述题6完型填空7阅读理解
  丰富的输入
 17860  222

讨论这个项目(9)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    gongfeng 0
    2021/3/10 16:52:08
    我又发现一个问题,希望作者看到回复下
    在ie10以上,有一个地方报错,无法引用未定义或null 引起的属性style
        gongfeng0
        2021/3/10 17:12:14
        这个问题特别奇葩,每个浏览器渲染dom的时间不一样,所以获取dom时就报错了,我写了一个setTimeOut解决了
    回复
    gongfeng 1
    2021/3/9 23:13:38

    提出建议(已在项目中使用,踩了好多坑)
    1、js 文件的定义变量在严格模式下会报错  var lastEditRange;
    2、放在弹框中,同一页面只能用一个,不然很多bug在IE浏览器中,页面始终加载html最前面的div id=inEdit;
    3、如果是做内部人员使用的系统无法访问外网,js文件引用图标的路径就得更换,然后把图标放到本地引用;
    4、如果一个字不编辑,内容不会为空,而是“</br>
    ”;

        gongfeng0
        2021/3/10 10:15:14
        不依赖任何插件,确实好用,感谢
    回复
    gongfeng 0
    2021/3/9 17:52:54
    麻烦大神指教下 回复
    gongfeng 0
    2021/3/9 17:52:13
    我的图标如果不请求http显示不出来
        西瓜0
        2021/3/9 20:08:58
        图标显示不出来就两种错误,1引用地址不正确,2,https协议请求了http协议的地址。
    回复
    太极凌云 0
    2020/9/14 15:34:30

    上传图片出现上传不了

        淡水0
        2021/3/5 11:44:00
        源码打开来看看,根据你的接口返回情况在n.onload方法里做下小修改即可
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复