引入wangEditor到F.A.B

稍后我在想是不是可以把这个wangEditor封装成一个widgets，估计会很舒服，单独开一个项目

以后也好直接引用下来

作为AddON？还是什么，不知道，先手工来一次

1、安装

https://www.wangeditor.com/v5/installation.html#npm

按照它的官方文档，是要这样

<!-- 引入 css --> <link href="https://cdn.jsdelivr.net/npm/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet"> <!-- 引入 js --> <script src="https://cdn.jsdelivr.net/npm/@wangeditor/editor@latest/dist/index.min.js"></script> <script> var E = window.wangEditor; // 全局变量 </script>

所以我先把两个文件下载下来到static目录下

https://flask-appbuilder.readthedocs.io/en/latest/templates.html#css-and-javascript

然后根据文档

我决定先对

动手

{% block head_css %}

{{ super() }}

<link rel="stylesheet" href="{{url_for('static',filename='editor/style.css')}}"></link>

{% endblock %}

{% block head_js %}

{{ super() }}

<script src="{{url_for('static',filename='editor/index.min.js')}}"></script>

{% endblock %}

然后在注入的test.js里面写

var E = window.wangEditor; // 全局变量

console.log(E)

测试一下有没有安装成功

OK，安装成功了

=========================================

打开note_widgets.html

昨晚自定义的一个组件里，直接插入两个锚点

搞错了，昨晚自定义的是show的小组件，

那看来还是得改my_edit.html

效果不好，只能还是改widget

https://github.com/dpgaspar/Flask-AppBuilder/blob/master/flask_appbuilder/templates/appbuilder/general/widgets/form.html

这是edit对应的小组件

新建一个note_form然后copy粘贴的原始代码

参考的官方文档在这里：

https://flask-appbuilder.readthedocs.io/en/latest/templates.html#other-widget-types

打开widgets.py

from flask_appbuilder.widgets import ShowBlockWidget,FormWidget

class NoteShowWidget(ShowBlockWidget):

template = 'widgets/note_show.html'

class NoteFormWidget(FormWidget):

template = 'widgets/note_form.html'

引用一个基，然后加一个class

再到view.py里面去

from .widgets import NoteShowWidget,NoteFormWidget

引一下

加一下

但是发现此路还是不够优雅。。。。

我还是用js的方法算了

=========================================

换了一下思路好多了

首先：

edit_widget = NoteFormWidget

add_widget = NoteFormWidget

都换成我自己的控件

然后在控件的头部

直接加入引用

控件的尾部，直接加入注入用的文件

然后安装注入一气呵成，就很舒服，其实我甚至可以稍后把js这部分也直接打入到note_form.html里面去的

就很舒服了

这样add和edit两个视图就同时加载好了控件

当然还有几个逻辑需要编写

1、edit的时候，需要把内容从textare初始化到编辑器去

2、onchang需要测试好

==========================================

1、初始化数据

刚才失败了，明白了

是它只认html

OK搞定了

搞定了，但是代码高亮在show模式下不行，这个文档里似乎提到过，稍后再来看怎么整