如何使用WordPress编辑器

时间:2018-09-04 07:42:48

标签: wordpress

 - wp_register_script( 'tinymce-min-js',
   "//cdnjs.cloudflare.com/ajax/libs/tinymce/4.5.1/tinymce.min.js"); 
       wp_enqueue_script( 'tinymce-min-js' );

    <textarea name="message"></textarea>

     tinymce.init({ 
                toolbar1: "code | preview | fullscreen | emotEventns | blockquote | cut copy paste | undo redo removeformat | save",
                toolbar2: "table | image | link | charmap | hr | media | alignleft aligncenter alignright alignjustify | outdent indent",
                toolbar3: "fontselect fontsizeselect | forecolor backcolor | bold italic underline strikethrough | subscript superscript",
                plugins: "code advlist fullscreen media preview table image link textcolor charmap emotEventns",
                menubar: false, 
                width: 800,
                height: 470,
                resize: false,
                fullpage: false,    
                selector: "textarea"
            });

我已经尝试过了,但是我没有得到编辑器。我想将编辑器用于文本区域。请尝试解决此问题。 预先谢谢你

2 个答案:

答案 0 :(得分:0)

尝试此代码。

<script>
    jQuery( document ).ready( function( $ ) {
            tinymce.init({ 
                toolbar1: "code | preview | fullscreen | emotEventns | blockquote | cut copy paste | undo redo removeformat | save",
                toolbar2: "table | image | link | charmap | hr | media | alignleft aligncenter alignright alignjustify | outdent indent",
                toolbar3: "fontselect fontsizeselect | forecolor backcolor | bold italic underline strikethrough | subscript superscript",
                //plugins: "code advlist fullscreen media preview table image link textcolor charmap emotEventns",
                menubar: false, 
                width: 800,
                height: 470,
                resize: false,
                fullpage: false,    
                selector: "textarea"
            });
    });

</script>

jQuery( document ).ready( function( $ ) {
				tinymce.init({ 
					toolbar1: "code | preview | fullscreen | emotEventns | blockquote | cut copy paste | undo redo removeformat | save",
					toolbar2: "table | image | link | charmap | hr | media | alignleft aligncenter alignright alignjustify | outdent indent",
					toolbar3: "fontselect fontsizeselect | forecolor backcolor | bold italic underline strikethrough | subscript superscript",
					//plugins: "code advlist fullscreen media preview table image link textcolor charmap emotEventns",
					menubar: false, 
					width: 800,
					height: 470,
					resize: false,
					fullpage: false,    
					selector: "textarea"
				});
		});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/tinymce/4.5.1/tinymce.min.js"></script>
<textarea></textarea>
<script>

    </script>

答案 1 :(得分:0)

不确定您要显示编辑器的位置,但是使用内置的wp_editor函数!

在此处查看wp_editor 和 这里tutsplus.com

$settings = array(
   'wpautop' => false,       // auto add p tags to paragraphs
   'media_buttons' => false, // show or hide the media upload button
   'textarea_rows' => 10,    // how many rows you want in the text area
   'teeny' => false          // show or hide the compact editor view
);

$textAreaContent = 'get the data from database';
$editorID = 'id_of_the_editor';

wp_editor( $textAreaContent, $editorID, $settings );

这应该产生一个不错的文本编辑器,例如...

enter image description here