capricorncd / zx-editor Goto Github PK

The HTML document (rich text) editor in Smart phone browser or webview, supporting mixed layout, reference, headline, unordered list, font color, bold and italics. 移动端HTML文档（富文本）编辑器，支持图文混排、引用、大标题、无序列表，字体颜色、加粗、斜体

Home Page: https://capricorncd.github.io/zx-editor/demo

JavaScript 38.74% Shell 0.18% TypeScript 43.56% SCSS 5.12% HTML 5.74% CSS 5.55% PHP 1.11%

editor html5 smart-phone npm-workspaces typescript

zx-editor's People

Stargazers

Watchers

Forkers

colinrds kule2018 lmqlcy wmzher helenwd123 makecoder benhailong 424385117 netsesame2 xiesantao linuslan tennessine ly272864 gs089597 tupengxiong joyce-may jarvis12138 gail9527 yuditxj zhenghaoqin cupeng torns xiaowiba lunay1016 znshje yinpinghui drunkdreams 18037128621 goldencolor raojiahong888 garycooper2015 janeyzou jianwwpro wangyq1983 626848357 codersunnylau faelssim jianjiayi zhyzhyzzz jooanchan ruanfeixiong kangkang721 omvmo qinzichen j4n17 bzliukai caigongda chengshulin limnqq zhang1432574133 mrdoge horkooo tutouweb elixgc happyya luotianyi-wzd joncv liu-wenxiang v-zhangsibo lookmelovely jiangdaa kong6001 iamxiaoma wittech shannsheeran tianyingzhong fgcp020 1640797264 ruolunhui yanghaoning yangsphp xiaonan-ewin zhangkaiwang lanbaba lilizzcc mistak1992 xiaoyunge yuelinghunyu hehuiqi gtxzsxxk niubg oraclenetworkprotocol kkwaps seven-oo xianuo leaoncc gxljava qbdsoft lukeme fork-archive-hub fuzhuzhang ppyds

zx-editor's Issues

过滤粘贴内容，使其以文本形式插入正文

如题

图片上传，请问如何监听啊，自己自定义如何编写

要自己全部从头开始写到尾巴？我就想直接把base64换成图片路径

使用3.0.2版本出现的问题

我是在Vue单页面应用中当做子组件来使用的，通过import ZxEditor from 'zx-editor';来引入。
问题：
1.页面显示异常，编辑器的高度默认设置的很高，底部工具栏会始终显示

2.点击编辑框会默认选择图片

请问大佬如何处理

创建的链接，点击跳转不了

npm run build 为什么只有首次会生成

我执行npm run build
在dist文件夹中只有首次会生成zx-editor.css zx-editor-min.css zx-editor.css

以后执行npm run build在dist文件只会生成zx-editor-min.js

这是为什么呢？

手机浏览器兼容问题

测试了微信自带浏览器、UC浏览器、oppo自带浏览器均无问题，但是我本人的努比亚自带浏览器，有一些问题，首先点击返回按钮可以，但是上传图片无反应，debug无信息，下方按钮均无反应，再虚拟键盘弹出时，点击文字样式可以弹出但是会闪退，虚拟键盘也会打开。

选了无序列表或是引用之后，换行还是有样式怎么去掉呢

大佬，怎么监听我删除的是哪张图片？

因业务需要返回过来的图片的ID集合需要提交，但我删除图片不能获取到删除图片的信息，可能编辑器里面提交的图片比id数目多，求帮忙解答。谢谢哈

如何开启多图片上传

可以支持自定义DOM标签吗

目前是使用的section，但是和之前已有的项目无法兼容，可以满足支持自定义p标签或者是div标签吗？

复制粘贴的时候内容会重复

比如粘贴“我是谁”，结果会变成“我是谁我是谁”。。。。。就是重复了一次

大佬有没有监听图片删除的方法？

什么时候支持上传视频呢

老哥，出出出大BUG啦

用谷歌浏览器打开F12调试发现没有问题，然后用手机微信打开，发现点击文本框并不会弹出键盘，看了一下，是因为我使用了ydui.js这个插件导致的，里面使用了FastClick这个防止300秒延迟的东东，辣么问题来了，，有神马方法可以兼容这个东西吗？
我在其他页面使用过禁用FastClick这个东东的方法，不知道在这里可行否？
下面代码：
var notNeed = FastClick.notNeeded(document.body);
$.fn.triggerFastClick=function(){
this.trigger("click");
if(!notNeed){
this.trigger("click");
}
}

编译失败

D:\Projects\zx-editor\node_modules\webpack-cli\bin\config-yargs.js:89
                                describe: optionsSchema.definitions.output.properties.path.description,
                                                                           ^
TypeError: Cannot read property 'properties' of undefined
    at module.exports (D:\Projects\zx-editor\node_modules\webpack-cli\bin\config-yargs.js:89:48)
    at Object.<anonymous> (D:\Projects\zx-editor\node_modules\webpack-dev-server\bin\webpack-dev-server.js:84:40)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:742:12)
    at startup (internal/bootstrap/node.js:279:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:752:3)

需要更新依赖到以下版本：
"webpack": "^4.20.2",
"webpack-cli": "^3.1.1"

大佬怎样定义粘贴内容（比如去掉粘贴内容的标签的和标签里面的属性

您已经设置有paste方法但只能获取到粘贴的内容，不能把粘贴的内容设置后放置在里面。需要怎么处理？求大佬解答

链接功能在手机上点击链接不反应

在电脑上需要鼠标点击移动错位才生效，点击也是不反应的，如果我想上传一个word文档链接都打不开在手机上，实用性就不高了，为什么要这样设计啊

怎么去掉编辑器文字样式里面的颜色项，不需要颜色项，希望可以丰富配置，控制显示每一个配置项

怎么去掉编辑器文字样式里面的颜色项，不需要颜色项，希望可以丰富配置，控制显示每一个配置项
文字样式那一排按钮希望也可以配置，大写的L C R很多人不知道什么意思

解决图片file格式上传服务器

我也是要上传到服务器再返回来img的文件路径
我的思路是：点击发送的时候获取编辑器里面全部的base64位图片再转为file文件
直接贴源码吧，我这边要上传获取到的img信息的数组所以每次点击发送都会清空newList,希望对大家有帮助
zxEditor.on('finishButton', function () {
var newList=[];
for (var i = 0; i < that.data.imgList.length; i++) {
var li = that.data.imgList[i];
$(".child-node-is-img img").each(function (index, ele) {
if (ele.id == li.file_name.substr(0, li.file_name.length - 4)) {
newList.push(that.data.imgList[i]);
}
})
}
var list = zxEditor.getBase64Images();
function dataURLtoFile(dataurl, filename) {
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, { type: mime });
}
for (var i = 0; i < list.length; i++) {
var item = list[i];
upimgData(1, dataURLtoFile(item.base64, item.id + ".jpg"), function (res) {
var id = res.data.file_name.substr(0, res.data.file_name.length - 4);
$(".zxeditor-content-wrapper").find("#" + id).attr("src", res.data.url);
// 判断图片之前是否存在
// 不存在则追加
newList.push(res.data);
})
}
that.data.imgList = newList;
// 获取编辑器里面的内容
that.data.textContent = zxEditor.getContent();
console.log(that.data.imgList);
console.log(that.data.textContent);
})

怎么自定义自己的emoji表情

公司业务需要需要用到自己的emoji，大佬怎样自定义？

苹果手机在页面编辑内容时，移动光标或者滑动页面后软键盘除删除外其他按键点击无效的问题

页面结构是这样的，也不知道是什么原因导致的，没什么思路，要说是键盘的问题，但里面的删除键还是可用的。
这时键盘无效后，只能收起键盘，再重新触发键盘后才能输入。
希望能得到大家的指点，谢谢。

3.0.1版本报错 TypeError: __WEBPACK_IMPORTED_MODULE_0_zx_editor__.ZxEditor is not a constructor

有人用过3.0.1的版本吗？我更新到3.0.1 后报TypeError: WEBPACK_IMPORTED_MODULE_0_zx_editor.ZxEditor is not a constructor

【未压缩文件BUG】

html引入min.js正常，但引入zx-editor.js报错：Uncaught TypeError: ZxEditor is not a constructor

可以加个是否可编辑的选项

你好为什么在小程序里报错呢？

thirdScriptError
sdk uncaught third Error
Cannot read property 'createElement' of undefined
TypeError: Cannot read property 'createElement' of undefined

上传多张图片bug

上传多张图片问题
TypeError: null is not an object (evaluating 'i.getContext("2d").drawImage')filename

iPhone里像安卓里面底部按钮栏跟随键盘移动整体页面不动

混合开发H5页面中 iPhone下能像安卓下底部工具栏跟随键盘移动么有啥办法和思路么方便留下qq或者微信么__

复制粘贴问题

只要复制内容不是纯文本, 都不能粘贴
举例: 在demo里面打几个字, 然后全选剪切, 并不能粘贴
看了一下源码, getPasteText里, items的getAsString是空, 不是很熟, 本人也没能力修复.

有这么一个方法，你可以上传好视频，再把链接插入编辑器

zxEditor.addMedia(url, type)

向正文焦点处添加图片/音频/视频

图片url地址或base64数据

音频/视频只支持url地址

参数：

url: String url地址

type: String, img|audio|video

Originally posted by @capricorncd in #29 (comment)

大佬，最新的3.0.4 没有这段代码是不是没有push上去呀

编辑器刚开始输入空格不能删除

大佬编辑器刚开始输入空格不能删除，求大佬看看

你zx-editor.js代码里前一千多行都是在实现一个自己的jQuery？

作者辛苦了，可能我没表述清楚，您zx-editor.js里的很大一部分代码都是在实现一个类似于jQuery还是就是jQuery的对dom进行操作的一个库？

添加视频、音频链接附件

支持添加视频、音频链接
或支持添加自定义内容

iPhone里，编辑器无法激活，没有光标

ios12.1
编辑器点击，键盘也能弹出，工具栏也会上移。但就是不出现光标，导致无法输入文字和编辑

编辑器复制粘贴内容会换行且重复

你好问一下，这里的监听为啥不会打印

zxEditor.on('select-picture', function (_) {
// hybrid模式开发时，此处可以调用原生App提供的接口，访问图片文件选择列表
// 执行图片文件数据获取，
// 或者获取由原生App处理并上传完成的图片url
console.log("自定义选择图片-------------------");
zxEditor.addImage('图片url地址或base64图片数据')
// 其他操作...
})

文字颜色是否可以增加自定义颜色啊？

在App中，有时键盘不能删除图片

已设置

let editor = new ZxEditor("#editorContainer", {
    fixed: false,
    disableBackspaceDelete: false
});

经常出现backspace不能删除图片，不知何故

初始化
@param selector
@param options
@Private
*/
_init (selector, options) {
// version
this.version = 'VERSION'
// broadcast
this.broadcast = broadcast.broadcast
this.broadcast = broadcast.broadcast 在单页应用中会重复
单页应用中A跳转到B页面（在monted钩子里 new ZxEditor 一个对象），这时B返回A，A再跳转到B ，这样broadcast.broadcast并不是最初的对象，并没有初始化而是使用了之前的对象，导致select-picture会绑定多个事件，
this.zxEditor.on('select-picture', function () {
// 会多次触发这个事件，跳转多少次就会触发多少次
$inputFile.click();
})

为什么 this.broadcast = broadcast.broadcast 这里不直接用this.broadcast = {} 这样初始化呢？