margox/braft-extensions

Braft Editor扩展模块包

braft-extensions's Issues

table功能是如何支持的....

公司在开发一款编辑器,一定要用draft.js.,,,,,看到你这边已经支持了表格功能了...不过好像看不到例子

code-highlighter高亮问题

当受控后，代码高亮不起作用了

没有受控时正常


受控后结果与预期不符

code-highlighter: theme was preserved in the codeblock by copy code from IDE(vscode)

Hi, thanks for your great work, I have a problem with extension of code-highlighter. when I insert my code from my IDE(vscode) by copy (control/command + C )，and the theme of my IDE was preserved in the codeblock of braft-editor.

here is, the theme of code is my IDE's theme, and the code style will be preserved in the html string, when I call this.state.editorState.toHTML()

however, the braft-editor code-highlighter default theme is prism-tomorrow, and the expected result is:

期待一个公式编辑器

编辑器里新添加表格没有问题，但是编辑 有表格 的内容时，表格没有正确显示

编辑器里新添加表格没有问题，但是编辑 有表格 的内容时，表格没有正确显示

已经按照https://github.com/margox/braft-extensions/blob/master/README.md#%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9增加了id

"braft-editor": "^2.2.9",
"braft-extensions": "0.0.18",

code-highlighter模块启用后最终生成的HTML代码中pre内部没有code元素，该设置在code元素上的属性被设置在了pre元素上

下方是书写的javascript所生成的一段html代码：

<pre data-lang="javascript" class="lang-javascript">
    function helloworld() {
    <br/>  
    console.log(&#x27;hello world!&#x27;);
    <br/>
    }
</pre>

按照prism官方推荐的code格式应该是这样的：

<pre><code class="language-css">p { color: red }</code></pre>

table模块预览的时候样式消失

增加了预览的按钮，但是预览界面没有table样式了

Mention功能

margox/braft-editor#324
对于Mention功能，有什么进度么？
或者有什么方案？
不知道以下示例是否能提供帮助
https://ant.design/components/mentions-cn/

How to add new row and column while using table extension ?

设置个别编辑器使用表格不起作用问题

BraftEditor.use(Table({includeEditors:['xxx']}))设置后，相应的编辑器仍然没有插入表格项，只有BraftEditor.use(Table({xxx}))(table中设置不包括includeEditors或excludeEditors)是编辑器中才会出现表格插入图标

table中无法插入图片

已升级为最新版
table中无法插入图片

可以把组件直接插入到内容中区吗？

定义好的react组件，渲染后查到编辑器中作为内容

code-highlighter doesn't work with ant-design form

Table 选中多行单元格，设置居中时问题

复现路径：

1. 添加一个 3 * 3 的表格，填入内容

2. 选中所有单元格，点击工具栏中的剧中操作
   

3. 设置剧中完成后，表格被合并成一行了，如下图
   

4. 如果选中6行时，设置居中会导致js error 整个编辑器崩溃了
   

期望结果，所有单元格内容居中，表格显示如下图：

table 插件 光标自动跳转问题

如果光标点击 table 最右侧, 之后光标会自动跳到 table 内部最后一个单元格, 之后不管是点击 table 内部还是外部都会自动跳转到最后一个单元格.

而且现在貌相只能通过清楚内容来删除 table. 不能在 table 最右侧处光标, delete 键删除掉.

ie中table在初始化无法显示

在主流浏览器中都可以在初始化时显示表格但是在ie11中直接提示类型错误。只要加了{editorId:'editor-table'}参数找不到具体的原因导致的请帮忙看一下

表情包不显示

表情包已经能展开了 但是插入到编辑器里面是一个空格 是为什么有什么解决办法吗

多个table单元格内容文本被选中时，在输入内容时，会导致单元格被误删

引入color-picker扩展后，将会导致无法利用setState设置editorState来更新编辑器的内容

问题：加入color-picker扩展后，利用this.setState修改editorState的值，该状态会更新，但是编辑器的内容无法成功按照更新后的editorState的值渲染出来，但是编辑器内修改编辑器内容可以更新editorState的值，也就是数据流变成了单向

1.table输入内容比较快的时候，报错直接白屏。2.table输入内容选中点击居中时，报错直接白屏

想法很好，市面上比较缺乏，希望抓紧完善，等着用

能不能自定义link啊。

[我的需求是选中文字后，弹出一个下拉框，然后在下拉框里选择链接

对markdown的支持是跟draft-js-markdown-shortcuts-plugin这个demo是一样的吗

table extensions 怎么在显示页面显示样式

我引入了
import 'braft-extensions/dist/table.css'
没有效果

table 焦点光标跳转后页面报错

table里面输入内容时候，光标会突然串到之前一格内容中，然后就报错了，在官网上的例子也试了，也是报这个错误

react-color 后。加了control无法显示出来啊

输入字数限制模块 到达MaxLength 之后中文输入法仍能继续输入

输入字数限制模块 到达MaxLength之后中文输入法仍能继续输入 有解决办法吗？

how we can create a different page(of text area) if number of words reached to the maximum state, like google docs is doing.

colorpicker是否支持ts

colorpicker是否支持ts？

复制过来的代码会覆盖掉代码输入器的样式怎么办

Bold and Italics not working

Hi,

I hope its ok to raise this in english.
I have just made a simple braftEditor component following the example in https://braft.margox.cn/demos/basic

And bold, italics seem to not be working. Is there a fix for this?

在开启readOnly的编辑器中表格仍然可编辑

如题，readOnly={true}的editor组件中表格仍然可以操作编辑，不过更改并不会保存（并没有相应的处理相关事件）

Enter回车

请问作者有没有可配置属性 让enter回车可以直接触发提交事件 而不是换行

edge浏览器下增加table功能会造成所有内容无法显示

您好
当使用扩展表格功能后，edge浏览器无法将通过
BraftEditor.createEditorState(props.data, {....}) 创建包含数据的editorState ，editorState.toHTML()为空，与之前提问的ie出现的情况类似，打印了error
初次

SyntaxError: Unexpected end of JSON input
at JSON.parse ()
at Function.editor_BraftEditor.createEditorState.external_draft_js_.EditorState.createFrom [as createEditorState] (index.js:6250)
at new Braft (BraftEditor.js:84)
at constructClassInstance (react-dom.development.js:11312)
at updateClassComponent (react-dom.development.js:14481)
at beginWork (react-dom.development.js:15438)
at performUnitOfWork (react-dom.development.js:19106)
at workLoop (react-dom.development.js:19146)
at renderRoot (react-dom.development.js:19229)
at performWorkOnRoot (react-dom.development.js:20136)
at performWork (react-dom.development.js:20048)
at performSyncWork (react-dom.development.js:20022)
at requestWork (react-dom.development.js:19891)
at scheduleWork (react-dom.development.js:19705)
at Object.enqueueSetState (react-dom.development.js:11141)
at DynamicComponent../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:335)
at dynamic.js:91

之后

SyntaxError: Unexpected token < in JSON at position 0
at JSON.parse ()
at Function.editor_BraftEditor.createEditorState.external_draft_js_.EditorState.createFrom [as createEditorState] (index.js:6250)
at BraftEditor.js:105

谷歌也会有这个error 但是加载显示无任何问题。

我按文档添加表格插件, 可是在工具栏头部没有出现表格操作按钮!

导入文档后表格被渲染在最后面

接口返回的html显示，table是在前面的，但是渲染到编辑器里的时候被渲染到了最后面。

请问一下这个是否支持TypeScript

请问一下这个是否支持TypeScript，yarn add @types/braft-extensions 并没有这个

表格可以支持设置背景颜色吗？

现在所有的表格都是同一个背景颜色，我们希望有个表头和 表体的区别，对第一行的表头设置背景颜色

antd-form表单中中使用braft-extensions问题

在antd表单中使用getFieldDecorator绑定braft组件时，设置了CodeHighlighter代码高亮扩展功能，并且在getFieldDecorator的initialValue中按照官方案例初始化赋值，此时CodeHighlighter代码高亮功能失效。
请问是否此扩展功能无法和antd的getFieldDecorator功能一起使用？

详细代码：

`

BraftEditor.use(CodeHighlighter({ includeEditors: ['editor'] }));

export default class Publish extends PureComponent {
state = {
editorInitValue: BraftEditor.createEditorState('请输入正文', { editorId: 'editor' })
};

 render () {

 return (

      <Form>
         <Form.Item label='正文'>
              {getFieldDecorator('content', {
              // 初始化赋值无效
              initialValue: editorInitValue,
              validateTrigger: 'onBlur, onChange',
              rules: [{
              required: true,
              validator: (_, value, callback) => {
                   if (!value) {
                        callback('正文内容不能为空');
                    } else {
                        console.log(value.toRAW());
                        callback();
                    }
                }
            }],
          })(

            <BraftEditor
              id="editor"
              className={style.editor}
            />

          )}
        </Form.Item>
   </Form>

)

}
}

`

表格扩展添加不生效

照着文档设置.发现不生效

标题id属性扩展以及控制媒体库问题咨询...

当我们写文章时，比如在语雀中，它会自动给h1-h3标题的块加上id属性，这样的话，通过元素类型和id属性，我们可以构造文档页面的锚点，并将页面锚点组织起来形成文档的大纲，对于文档系统来说，这简直是一大利器，非常好用
无奈，才疏学浅，看了Draft.js的默认块的定制，似乎没能找到hack进braft-editor来实现该功能的方法...
希望大神能指点一下解决思路，文档我自己看...

还有，上传图片的时候我希望能在数据库里面记录某文章中所有上传过的图片（文章的图片库），将图片库和组件的媒体库关联起来，这样，媒体库中文件删除时，我这边会按照数据库中记录的图片信息去云端删除该图片，减少无用图片的存储
但目前的问题是，没找到直接插入数据到媒体库的，根据数据库中的图片信息来初始化媒体库的方法...
大神，求指点...

编辑有表格的内容时 表格的显示有问题

编辑器里新添加表格没有问题，但是编辑 有表格 的内容时，表格没有正确显示

section 样式直接显示不出来啊？？？求解

立秋习俗知多少

English support

Hi!
looks great, any chance for English components?
Thanks!

代码高亮扩展(CodeHighlighter)存在严重Bug

重现步骤

import 代码如下

插件使用代码

高亮效果

其他说明

修改插件使用代码

高亮效果(竟然正确了) 一定要刷新浏览器页面

在antd的form中使用表格的问题

在点击插入表格，弹框显示行列设置，点击确认后，触发了form的submit事件；需要将行列设置面板里的按钮加上属性type=“button”，防止意外提交

代码高亮问题

用了代码高亮模块，生成的代码里class前缀是lang-不是language-，展示页引入prism.js和prism.css无法高亮显示

table功能线条及样式保存问题

在使用表格扩展的时候，editorState.toHTML()转化出来的html代码没有了表格的样式，表格的线条什么的都没有了，请问有什么方法取到对应的html代码吗？包的版本："braft-convert": "^2.1.11","braft-editor": "^2.1.36","braft-extensions": "0.0.13","braft-utils": "^3.0.9"

Process data from onConfirm modal

Hi @margox
I want to create a extension for UnsplashFinder
This is my code:

import React from 'react';
import Unsplash from './Unsplash';

export default (config = {}) => {
    const { includeEditors, apiKey, excludeEditors, id = 'unsplash' } = config;
    return {
        type: 'entity',
        name: 'UNSPLASH',
        mutability: 'IMMUTABLE',
        includeEditors,
        excludeEditors,
        control: props => {
            return {
                key: 'unsplash',
                type: 'modal',
                title: 'Unsplash',
                text: 'Unsplash',
                modal: {
                    id: id,
                    title: 'Unsplash Finder',
                    showCancel: true,
                    showConfirm: true,
                    confirmable: true,
                    showFooter: true,
                    component: (
                        <Unsplash apiKey={apiKey} editor={props.editor} editorState={props.editorState} />
                    ),
                    onConfirm: () => {
                        console.log(1111);
                    }
                }
            };
        }
    };
};

You can imagine it similar to Media
How can I insert my data from onConfirm?
I can submit it from Unsplash component but I can't find a closes modal method.

table在回显的时候表格没了

新建的时候：

回显的时候（确认过，富文本中table td之类的都在 和提交的是完全一致的信息）

图片上传后可以一行显示吗

图片上传后可以一行显示吗