yii2 integrates Baidu editor umeditor, yii2 integrates umeditor_PHP tutorial

yii2 integrates Baidu editor umeditor, yii2 integrates umeditor

Author: Bailang Source: www.manks.top/article/yii2_umeditor

The copyright of this article belongs to the author, and you are welcome to reprint it. However, this statement must be retained without the author's consent, and a link to the original text must be provided in an obvious position on the article page. Otherwise, we reserve the right to pursue legal liability.

In actual work, it is inevitable that we will not encounter development work such as news and articles, which requires the operation personnel to publish them. However, some friends, in order to save trouble, divide three by five and divide by two. ok, online. The girl who runs it tried it out, and oh my, the content of your article gave me a big trouble textarea That’s it, it’s over. You can’t beat me to death by publishing a news article. Next, let’s talk about how the Yii2 framework integrates Baidu Editor umeditor.

What is umeditor? I have only heard of ueditor. Is your umeditor a pirated version of Dongdongnan? umeditor, to put it bluntly, is the mini version of ueditor. According to Baidu official statement, it is actually the "short, soft and small" version of the editor, but has all the functions. Ahem, let’s get back to the topic.

First of all, let’s go to the official website to download a mini version of ueditor umeditor. Note that it is um editor.

, unzip it and put it in the  /css directory under the project root directory and name it umeditor. You can choose the exact location as long as you can reference it later.

The second step is to extend the backendassetsAppset class first. Oh my god, why do we need to extend such a thing? What does it have to do with our umeditor integration? Cheng Yaojin came out halfway. The purpose of extending this class file here is to facilitate the introduction of css js files into the file later.

It’s very simple, just add the following two methods to the Appset method

    //定义按需加载JS方法，注意加载顺序在最后  
    public static function addScript($view, $jsfile) {  
        $view->registerJsFile($jsfile, [AppAsset::className(), 'depends' => 'backend\assets\AppAsset']);  
    }  
      
    //定义按需加载css方法，注意加载顺序在最后  
    public static function addCss($view, $cssfile) {  
        $view->registerCssFile($cssfile, [AppAsset::className(), 'depends' => 'backend\assets\AppAsset']);  
    }

Next, follow the configuration below.

Let me explain first. Here we assume that there is an article article table and a content content field that needs to be displayed in Baidu Editor.

According to the form model of yii2, we modify the article_form.php fieldcontent in the

<?= $form->field($model, 'content')->textarea(['style' => 'width:760px;height:500px;']) ?>

This file introduces the Appset class and the related css<code> <code>js files as follows

    use backend\assets\AppAsset;
    AppAsset::register($this);
    AppAsset::addCss($this,'/css/umeditor/themes/default/css/umeditor.css');
    AppAsset::addScript($this,'/css/umeditor/umeditor.config.js');
    AppAsset::addScript($this,'/css/umeditor/umeditor.min.js');
    AppAsset::addScript($this,'/css/umeditor/lang/zh-cn/zh-cn.js');

Then you only need to register the following js<code>js code at the bottom of the current page to achieve

    <?php $this->beginBlock('js-block') ?>
        $(function () {
            var um = UM.getEditor('article-content', {
            });
        });
    <?php $this->endBlock() ?>
    <?php $this->registerJs($this->blocks['js-block'], \yii\web\View::POS_END); ?>

About how to use article-content<code>article-content, this is the target object we want to bind, that is, content<code>. <code>article-content<code>content<code>。<code>article-content is the current id<code>id identification of the object.

ok, now the Baidu editor is basically integrated. Now hurry up and add an article to give it a try. Remember to update to see if there is content in the editor