Plugin CkEditor

Fonte

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdn.ckeditor.com/4.19.1/standard-all/ckeditor.js"></script>

CKEDITOR.plugins.add( 'timestamp', {
	init: function( editor ) {
		editor.addCommand( 'first_name', {
			exec: function( editor ) {
				editor.insertHtml( '[[first_name]]' );
			}
		});
		editor.ui.addButton( 'first_name', {
			label: "Primeiro nome",
			command: 'first_name',
			toolbar: 'insert'
		});
		editor.addCommand( 'last_name', {
			exec: function( editor ) {
				editor.insertHtml( '[[last_name]]' );
			}
		});
		editor.ui.addButton( 'last_name', {
			label: "Segundo nome",
			command: 'last_name',
			toolbar: 'insert'
		});
		editor.addCommand( 'full_name', {
			exec: function( editor ) {
				editor.insertHtml( '[[full_name]]' );
			}
		});
		editor.ui.addButton( 'full_name', {
			label: "Nome completo",
			command: 'full_name',
			toolbar: 'insert'
		});
	}
});

function ckeditor() {
    CKEDITOR.remove
    $("textarea.text").each(function() {
    	var txt = $(this).attr('id');
    	CKEDITOR.replace(txt, {
    		baseFloatZIndex: 2000000,
    		extraPlugins: 'timestamp',
    		toolbar: [
    			{
    				name: 'styles',
    				items: ['Styles', 'Format', 'FontSize']
    			},
    			{
    				name: 'basicstyles',
    				groups: ['basicstyles', 'cleanup'],
    				items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript','-', 'RemoveFormat']
    			},
    			{
    				name: 'paragraph',
    				groups: ['list', 'indent', 'blocks', 'align', 'bidi'],
    				items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-','Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter','JustifyRight', 'JustifyBlock']
    			},
    			{
    				name: 'document',
    				groups: ['mode', 'document', 'doctools'],
    				items: ['Source','-', 'first_name','last_name','full_name']
    			}
    		]
    	});
    });
}
ckeditor(); //inicializa o loop do editor

.cke_button__first_name_label, .cke_button__last_name_label, .cke_button__full_name_label {
    display: inline !important;
}
.cke_button__first_name_icon, .cke_button__last_name_icon, .cke_button__full_name_icon {
    display: none !important;
}

<textarea class="form-control text" name="description" id="description1" cols="30" rows="10"></textarea>
<textarea class="form-control text" name="description" id="description2" cols="30" rows="10"></textarea>
<textarea class="form-control text" name="description" id="description3" cols="30" rows="10"></textarea>

Was this article helpful?

Related Articles

Leave A Comment?