精华内容
下载资源
问答
  • MathJax官网总是下载失败,亲...MathJax是一款运行在浏览器中的开源的数学符号渲染引擎,使用MathJax可以方便的在浏览器中显示数学公式,不需要使用图片。目前,MathJax可以解析Latex、MathML和ASCIIMathML的标记语言。
  • mathjax本地引用插件,用于显示html页面的数学公式内容,减少数学公式使用图片的解决方案。
  • 为了使用数学公式插件ckeditor5-math,必须安装一些基础工具: Node.js 12.0.0+ npm 5.7.1+ (note: some npm 5+ versions were known to cause problems, especially with deduplicating packages; upg

    背景

    LaTeX是一种基于ΤΕΧ的排版系统,非常适用于生成高印刷质量的科技和数学类文档。当需要书写大量公式、切换风格的时候,熟练使用LaTeX公式代码可以秒杀点击MathType数学公式编辑器。参考公式手册

    katex或者mathjax都是基于LaTeX公式的Web组件,支持LaTeX公式的网页渲染,目前很多markdown编辑器和网站都集成了它们。

    常用的富文本编辑器如CKEditor、TinyEditor等需要安装插件katex或者mathjax来实现LaTeX公式的渲染。本文选用CKEditor5和数学公式插件ckeditor5-math

    CKEditor5分为CKEditor 5 Builds和CKEditor 5 Framework,前者主要是方便直接使用一个构建好的工具,后者更接近源码以提供更灵活的多种组件。

    首先安装一些基础工具:

    • Node.js 12.0.0+
    • npm 5.7.1+ (note: some npm 5+ versions were known to cause problems, especially with deduplicating packages; upgrade npm when in doubt)
    • npm install -g webpack@4 webpack-cli@3
    • npm install -g yarn

    主要参考官网文档installing-plugins步骤。

    从CKEditor 5 Builds安装插件

    1. 先安装build,以classic模式为例(还有inline、balloon等)
    npm install --save @ckeditor/ckeditor5-build-classic
    
    1. 再安装ckeditor5-math插件
    npm install --save-dev ckeditor5-math
    
    1. 修改src/ckeditor.js,增加如下,引擎可以选择katex或者mathjax
    // ...
    import Mathematics from 'ckeditor5-math/src/math';
    
    ClassicEditor.builtinPlugins = [
        // ...
    	Mathematics
    ];
    
    ClassicEditor.defaultConfig = {
    	toolbar: {
    		items: [
    			// ...
    			'math'
    		]
    	},
    	// ...
    	math: {
    		engine: 'katex', // or katex or function. E.g. (equation, element, display) => { ... }
    		lazyLoad: undefined, // async () => { ... }, called once before rendering first equation if engine doesn't exist. After resolving promise, plugin renders equations.
    		outputType: 'script', // or span
    		forceOutputType: false, // forces output to use outputType
    		enablePreview: true, // Enable preview view
    		previewClassName: [], // Class names to add to previews
    		popupClassName: [] // Class names to add to math popup balloon
    	}
    };
    
    1. ckeditor-math主题复制到node_modules/@ckeditor/ckeditor5-theme-lark/theme下
    2. 创建index.html,增加katex或者mathjax的引入,引入build/ckeditor.js,简单创建classic编辑器
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <title>CKEditor 5 Framework – Quick start</title>
    		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css">
        </head>
        <body>
            <div id="editor">
                <p>Editor content goes here.</p>
            </div>
            <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
            <script id="MathJax-script" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
            <script src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js"></script>
            <script src="https://cdn.jsdelivr.net/npm/katex@0.11.0/dist/contrib/mhchem.min.js"></script>
            <script src="build/ckeditor.js"></script>
    		<script>
    			ClassicEditor
    				.create( document.querySelector( '#editor' ) )
    				.catch( error => {
    					console.error( error );
    				} );
    		</script>
        </body>
    </html>
    
    1. 编译打包
    webpack --mode development
    
    1. 打开index.html,会提示错误ckeditor-duplicated-modules,删掉node_modules\ckeditor5-math\node_modules,因为ckeditor的几个核心包引用重复了

    2. 现在打开index.html正常效果如图
      在这里插入图片描述

    从CKEditor 5 Framework安装插件

    主要步骤1.3.5不同:

    1. 先根据官网文档framework quick-start搭建环境
    npm install --save \
        postcss-loader@3 \
        raw-loader@3 \
        style-loader@1 \
        webpack@4 \
        webpack-cli@3
    

    创建webpack.config.js配置文件

    'use strict';
    
    const path = require( 'path' );
    const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );
    
    module.exports = {
        // https://webpack.js.org/configuration/entry-context/
        entry: './app.js',
    
        // https://webpack.js.org/configuration/output/
        output: {
            path: path.resolve( __dirname, 'dist' ),
            filename: 'bundle.js'
        },
    
        module: {
            rules: [
                {
                    test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
    
                    use: [ 'raw-loader' ]
                },
                {
                    test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,
    
                    use: [
                        {
                            loader: 'style-loader',
                            options: {
                                injectType: 'singletonStyleTag',
                                attributes: {
                                    'data-cke': true
                                }
                            }
                        },
                        {
                            loader: 'postcss-loader',
                            options: styles.getPostCssConfig( {
                                themeImporter: {
                                    themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
                                },
                                minify: true
                            } )
                        }
                    ]
                }
            ]
        },
    
        // Useful for debugging.
        devtool: 'source-map',
    
        // By default webpack logs warnings if the bundle is bigger than 200kb.
        performance: { hints: false }
    };
    

    安装核心包

    npm install --save \
        @ckeditor/ckeditor5-dev-utils \
        @ckeditor/ckeditor5-editor-classic \
        @ckeditor/ckeditor5-essentials \
        @ckeditor/ckeditor5-paragraph \
        @ckeditor/ckeditor5-basic-styles \
        @ckeditor/ckeditor5-theme-lark
    
    1. 再安装ckeditor5-math插件(同从CKEditor buidls安装插件的2.)
    npm install --save-dev ckeditor5-math
    
    1. 创建app.js,引擎可以选择katex或者mathjax
    import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
    import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
    import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
    import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
    import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
    
    import Mathematics from 'ckeditor5-math/src/math';
    
    ClassicEditor
        .create( document.querySelector( '#editor' ), {
            plugins: [ Essentials, Paragraph, Bold, Italic, Alignment,Highlight,Mathematics],
            toolbar: [ 'bold', 'italic' , 'alignment' ,'highlight','math'],
    		math: {
    			engine: 'katex', // or katex or function. E.g. (equation, element, display) => { ... }
    			lazyLoad: undefined, // async () => { ... }, called once before rendering first equation if engine doesn't exist. After resolving promise, plugin renders equations.
    			outputType: 'script', // or span
    			forceOutputType: false, // forces output to use outputType
    			enablePreview: true, // Enable preview view
    			previewClassName: [], // Class names to add to previews
    			popupClassName: [] // Class names to add to math popup balloon
    		}
        } )
        .then( editor => {
            console.log( 'Editor was initialized', editor );
        } )
        .catch( error => {
            console.error( error.stack );
        } );
    
    1. ckeditor-math主题复制到node_modules/@ckeditor/ckeditor5-theme-lark/theme下(同从CKEditor buidls安装插件的4.)
    2. 创建index.html,增加katex或者mathjax的引入,引入build/build.js
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <title>CKEditor 5 Framework – Quick start</title>
    		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css">
        </head>
        <body>
            <div id="editor">
                <p>Editor content goes here.</p>
            </div>
            <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
            <script id="MathJax-script" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
            <script src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js"></script>
            <script src="https://cdn.jsdelivr.net/npm/katex@0.11.0/dist/contrib/mhchem.min.js"></script>
            <script src="build/build.js"></script>
        </body>
    </html>
    
    1. 编译打包(同从CKEditor buidls安装插件的6.)
    webpack --mode development
    
    1. 打开index.html,会提示错误ckeditor-duplicated-modules,删掉node_modules\ckeditor5-math\node_modules,因为ckeditor的几个核心包引用重复了(同从CKEditor buidls安装插件的7.)

    2. 现在打开index.html正常效果如图(同从CKEditor buidls安装插件的8.)
      在这里插入图片描述

    注意:

    • mathjax引擎和ckeditor-math主题不兼容,推荐katex
    • mathtype插件可能需要联网,参考
    展开全文
  • 在线数学公式编辑器插件

    热门讨论 2013-03-12 14:28:50
    在线数学公式编辑器插件 web在线 js 数学公式 特殊符号
  • 重点在这里,就是下面的ueditor文件和 数学公式插件kityformula文件 ,找了很多文章全部要付费,经过我几天的努力还是找到了免费的。 下载地址 我还遇到了一个坑。就是我在一级路由使用公式插件会正常显示,但是在...

    ueditor.vue组件

    <template>
      <div class="home">
       <script :id="id"  :defaultMsg="writeMsg" type="text/plain" ></script>    
       <div></div>
      </div>
    </template>
    <script>
    
    import '../../../static/ueditor/ueditor.config.js'
    import '../../../static/ueditor/ueditor.all.js'
    import '../../../static/ueditor/lang/zh-cn/zh-cn.js'
    
    //引入公式插件。我们也是通过import的方式加进来的。
    import '../../../static/ueditor/kityformula-plugin/addKityFormulaDialog.js'
    import '../../../static/ueditor/kityformula-plugin/getKfContent.js'
    import '../../../static/ueditor/kityformula-plugin/defaultFilterFix.js'
    import { mapState } from 'vuex'
    export default {
        name: "UEditor",
        props: {
            id: {
                type: String
            },
            config: {
                type: Object
            },
            writeMsg:{
                type: String
            }
        },
    //  components:{util},
        data() {
            return {
              editor: null,
              message:null
            }
        },    
        mounted() {
            //初始化UE
      this.$nextTick(()=>{//避免在切换到填空题再切回来找不到dom而报offsetWidth undefined
                   const _this = this;
            this.editor = UE.delEditor(this.id);
            this.editor = UE.getEditor(this.id,this.config);
            this.editor.addListener("ready",function(){
                setTimeout(function(){//过段时间在加载。这是在编辑的时候把获取的内容传到编辑器里
                    if(_this.writeMsg!=''){_this.editor.setContent(_this.writeMsg)}
                },500)
                
            })
            
            })  
        },
        destoryed() {
            this.editor.destory();
        },
        methods:{
          getMessage(){
            debugger
            this.message =  this.getUEContent();
          },
           getUEContent(){
      debugger
             return this.editor.getContent();
           },
           getContentTxt: function(){
             return this.editor.getContentTxt();
           },
    
       setUEContent: function(val){
                 if(this.editor && this.editor.isReady){
                    const _this = this;
                    setTimeout(function(){//过段时间在加载
                        _this.editor.setContent(val);
                    },500);
                    return;
                 }else{
                      const _this = this;
                     setTimeout(function(){//过段时间在加载
                      _this.setUEContent(val);
                    },500)
                 }
            },
        }
    }
    </script>
    
    

    在需要用到富文本编译器的组件中引入uedictor.vue ,config1中的初始化配置可以查看官网,或者去百度,去掘金都可以找到的,这个不是重点。

    <template>
      <div class="home">
           <Ueditor :writeMsg="defaultMsg1"  :id="ueditor1" :config="config1"  ref="ue1" ></Ueditor> 
      </div>
    </template>
    <script>
    import Ueditor from '@/views/home/Ueditor.vue'
    export default {
      components:{
        Ueditor
      },
        name: "home",
        data() {
            return {
                editor: null,
                activeName:'first',
                defaultMsg1:'',
    
                ueditor1:'ueditor1',
    
                config1: {
    //               serverUrl:"http://domain/core/upload/ueditor?type=40",//如果页面的上传的文件的地址在使用编辑器的地方并不是一个。我们就可以在当前的配置文件里面写上他的地址
                  autoHeightEnabled: false,
                  autoFloatEnabled: false,//不允许滚动时固定在顶部
                   initialContent:'请输入题干内容...(如果是填空题请用{***}来表示横线)',   //初始化编辑器的内容,
                  autoClearinitialContent:true, //是否自动清除编辑器初始内容,注意:如果focus属性设置为true,这个也为真,那么编辑器一上来就会触发导致初始化的内容看不到了
                  initialFrameWidth: null,
                  initialFrameHeight: 250,
                  BaseUrl: '',
                  UEDITOR_HOME_URL: 'static/UEditor/',
    
                   zIndex:'100',//修改编辑器的层级
                }, 
            }
        },   
    methods:{
      // this.$refs.ue1.getUEContent()  获取文本中的内容   
      // this.$refs.ue3.setUEContent(编辑器赋值的内容);
    } 
    }
    </script>
    
    <style lang="scss" scoped>
     .home{
        width:100%;
        height: 100%;
      }
      .message{
        flex: 1;
      }
    </style>
    
    

    重点在这里,就是下面的ueditor文件和 数学公式插件kityformula文件 ,找了很多文章全部要付费,经过我几天的努力还是找到了免费的。
    在这里插入图片描述

    下载地址
    我还遇到了一个坑。就是我在一级路由使用公式插件会正常显示,但是在二级路由中国使用的时候就会不显示。现在是解决了.但是不是官方给的方法,官方让配置这个 window.UEDITOR_HOME_URL = “/xxxx/xxxx/”;
    我没找到解决方法,就直接删除了 改成这个样子var URL = ‘/static/ueditor/’;就出来了。
    问题是解决了,但是还有很多不足的地方,还请大佬多多指教。

    展开全文
  • 基于CKeditor编辑器的可视化的数学公式编辑器,可以返回数学公式。 将 CKeditor编辑器的config.js打开,在 CKEDITOR.editorConfig = function( config ) {}; 里面添加 config.extraPlugins = 'jdmath'; config....

    基于CKeditor编辑器的可视化的数学公式编辑器,可以返回数学公式。

    将 CKeditor编辑器的config.js打开,在

    CKEDITOR.editorConfig = function( config ) {};

    里面添加

    config.extraPlugins = 'jdmath';
    config.allowedContent = true;

    然后在最后加入

    CKEDITOR.config.contentsCss = '/ckeditor_4.7.3_full/ckeditor/plugins/jdmath/mathquill-0.10.1/mathquill.css';

    以上是你编辑器的可视化部分,下面开始配置你的用户看到的页面的代码。 在客户看的页面添加css引入

    <link rel="stylesheet" href="你的CKeditor路径/plugins/jdmath/mathquill-0.10.1/mathquill.css">

    配置完后即可使用

    本来我看着 www.jmeditor.com 上面的JMEditor编辑器可以用,很兴奋,但是苦于作者长时间没更新,我的CKeditor编辑器的界面和功能需要其他的东西,所以决定自己写一个,于是乎参考了一下JMEditor,发现它是基于CKeditor的,所以我写的插件就这么成型了。 但是随后我发现如果这个公式编辑器过长则生成的HTML代码会把数据库撑满,于是乎我开始在寻找其他解决方案。

    方案一

    将公式只让公式编辑器返回LaTeX代码,然后重新进行渲染。看了CKeditor官方的公式插件就是这么做的,但是他的插入公式部分需要手写LaTeX代码。非常的不人性化。

    config.js代码参考

    CKEDITOR.editorConfig = function( config ) {
        config.extraPlugins = 'jdmath';
        config.allowedContent = true;
    };
    CKEDITOR.config.contentsCss = '/ckeditor_4.7.3_full/ckeditor/plugins/jdmath/mathquill-0.10.1/mathquill.css';

    效果图


    本文来自云栖社区合作伙伴“开源中国”

    本文作者:达尔文

    原文链接

    展开全文
  • Ueditor中添加数学公式插件

    千次阅读 2017-02-04 11:31:42
    <script type="text/javascript" charset="utf-8" src="public/js/ueditor/kityformula-plugin/addKityFormulaDialog.js?version=1.0.1"> <script type="text/javascript" charset="utf-8" src="public/js/ueditor...
    <script type="text/javascript" charset="utf-8" src="public/js/ueditor/kityformula-plugin/addKityFormulaDialog.js?version=1.0.1"></script>
    
    <script type="text/javascript" charset="utf-8" src="public/js/ueditor/kityformula-plugin/getKfContent.js?version=1.0.1"></script>
    <script type="text/javascript" charset="utf-8" src="public/js/ueditor/kityformula-plugin/defaultFilterFix.js?version=1.0.1"></script>
     
     

    在编辑器初始化时,添加  kityformula

    展开全文
  • 这篇文章主要介绍了在HTML5中使用MathML数学公式的简单讲解,math标签的妙用往往可以收货意想不到的效果,需要的朋友可以参考下HTML5 的 HTML 语法允许我们在文档内使用 ... 标签应用 MathML 元素。下面是一个使用 ...
  • MathquillBasedEditor是一款所见即所得的jQuery数学公式编辑器插件。该数学公式编辑器依赖于mathquill,可以通过点击图标来直接生成乘方和开方等数学公式
  • MathquillBasedEditor是一款所见即所得的jQuery数学公式编辑器插件。该数学公式编辑器依赖于mathquill,可以通过点击图标来直接生成乘方和开方等数学公式
  • MathquillBasedEditor是一款所见即所得的jQuery数学公式编辑器插件。该数学公式编辑器依赖于mathquill,可以通过点击图标来直接生成乘方和开方等数学公式。使用方法在页面中引入mathquill和matheditor的相关文件。...
  • DraftJS MathJax Plugin 这个插件允许你编辑由mathjax渲染的数学公式
  • 《在网页中显示数学公式》由会员分享,可在线阅读,更多相关《在网页中显示数学公式(5页珍藏版)》请在人人文库网上搜索。1、在网页中显示数学公式本网站是一个理科网站,往往会涉及数学公式的输入和显示,而这在Web...
  • 数学公式编辑器初体验APIoptions配置演示(参考test/simple.html)嵌入演示(参考test/wangEditor/wangEditor.html)源码 初体验 在html中引入dist文件内打包后的js和css: <script src=...
  • 如题,无法使用该插件正确地渲染数学公式 解决 如图,在拓展坞中将 Jupter 与 Python 的拓展包会推至 2021 年年初或再之前的版本 重启,问题解决 关于该插件的其他信息设置,譬如数学引擎 KeTaX or Mathjs、背景 ...
  • 1. 使用官方的 markdown 插件是渲染不出 latex 公式的,如下图 2. 所以我进行了 markdown + MathJax 两个插件结合使用的尝试,但是未果 3.于是我想了两个办法 将要渲染为 markdown 的代码中的公式替换为图片 在...
  • ueditor引入公式插件

    千次阅读 2017-09-11 19:27:52
    1、在官网下载公式插件; 2、将公式插件复制到ueditor的根目录里; 3、引入公式插件js 4、在ueditor的编辑界面就能看到图标,并进行公式编辑
  • 接下来我们来根据文档进行配置,页面引入script标签、toolbars增加kityformula,这时就可以正常看到数学公式的界面了,如果工具栏图标显示空白暂且不用管,我们后面描述。 我们先随便选择一个标签来F12看一下: ...
  • UEditor + Vue + Kityformula 富文本编辑器嵌入数学公式的实现 首先展示一下代码实现后的效果: 现在我们开始写代码 第一步:我们需要去下载Ueditor官方的包:Ueditor官网 这里我使用的是 VUE 所以我选择这个jsp ...
  • Laravel-smartmd:一个实用的 Markdown 编辑器,支持数学公式、流程图由 NoisyWind 创建于2年前, 最后更新于 1年前版本号 #16155 views6 likes0 collects项目简介一个实用的 markdown 编辑器,兼容大部分主流的 ...
  • markdown数学公式

    2018-10-03 10:48:12
    公式引用插件 &amp;lt;script type=&quot;text/javascript&quot; src=&quot;https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML&quot;&amp;gt;&amp;lt;/script&...
  • MathJax是一款开源的JavaScript显示引擎,适用所有现代浏览器,使用MathJax可以方便的在浏览器中显示数学公式,不需要使用图片。 目前,MathJax可以解析Latex、MathML和ASCIIMathML的标记语言。 MathJax官网:...
  • JavaScript Mathematical Expression Evaluator是一个基于纯js脚本的数学公式表达式计算工具,可以在客户端计算复杂的数学表达式,功能强大,调用方便!

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,728
精华内容 1,091
关键字:

js数学公式插件